|
@@ -23,7 +23,7 @@ import { useRoute, useRouter } from "vue-router"
|
|
const {
|
|
const {
|
|
windowSizeInCssForRef,
|
|
windowSizeInCssForRef,
|
|
windowSizeWhenDesignForRef,
|
|
windowSizeWhenDesignForRef,
|
|
-} = useSizeAdapt()
|
|
|
|
|
|
+} = useSizeAdapt(724, 375)
|
|
|
|
|
|
const route = useRoute()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const router = useRouter()
|
|
@@ -51,16 +51,40 @@ function onClickCopy() {
|
|
top: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
|
|
+ background-image: url(@/assets/images/cover-bg.jpg);
|
|
|
|
+ background-size: cover;
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ background-position: center center;
|
|
>.btn-group{
|
|
>.btn-group{
|
|
position: absolute;
|
|
position: absolute;
|
|
- left: 50%;
|
|
|
|
- bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
- transform: translateX(-50%);
|
|
|
|
|
|
+ bottom: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
>button{
|
|
>button{
|
|
-
|
|
|
|
|
|
+ flex: 0 0 auto;
|
|
|
|
+ font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
+ font-family: Source Han Serif CN-Bold, Source Han Serif CN;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #484238;
|
|
|
|
+ line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
+ height: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
|
|
}
|
|
}
|
|
>button:first-of-type{
|
|
>button:first-of-type{
|
|
- margin-right: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
|
+ background-image: url(@/assets/images/btn-long-bright.png);
|
|
|
|
+ background-size: contain;
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ background-position: center center;
|
|
|
|
+ width: calc(186 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
+ margin-right: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
+ }
|
|
|
|
+ >button:last-of-type{
|
|
|
|
+ background-image: url(@/assets/images/btn-short-dark.png);
|
|
|
|
+ background-size: contain;
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ background-position: center center;
|
|
|
|
+ width: calc(144 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|