|
|
@@ -2,6 +2,10 @@
|
|
|
<div
|
|
|
v-loading.fullscreen.lock="loading"
|
|
|
class="prize-redeem"
|
|
|
+ :class="{
|
|
|
+ // android: $isAndroid,
|
|
|
+ android: true,
|
|
|
+ }"
|
|
|
>
|
|
|
<BtnClose
|
|
|
@click="emit('close')"
|
|
|
@@ -185,6 +189,10 @@ async function onSubmit() {
|
|
|
loading.value = false
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+const $isAndroid = inject('$isAndroid')
|
|
|
+const viewportHeight = window.innerHeight
|
|
|
+const viewportHeightInDesign = inject('$viewportHeightInDesign')
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
@@ -429,4 +437,144 @@ async function onSubmit() {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.prize-redeem.android{
|
|
|
+ >div.paper-wrap{
|
|
|
+ top: calc(60Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ width: calc(925Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ height: calc(810Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ >article.paper{
|
|
|
+ padding-top: calc(73Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ padding-bottom: calc(64Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ >h1{
|
|
|
+ top: calc(-37Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ left: calc(36Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ font-size: calc(32Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ line-height: calc(38Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ }
|
|
|
+ >h2{
|
|
|
+ top: calc(6Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ left: calc(68Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ font-size: calc(14Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ line-height: calc(16Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ }
|
|
|
+ >.row{
|
|
|
+ margin-bottom: calc(37Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ >.key{
|
|
|
+ font-size: calc(24Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ line-height: calc(28Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ letter-spacing: calc(7Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ margin-right: calc(34Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ }
|
|
|
+ >.key.key-feedback{
|
|
|
+ }
|
|
|
+ >input, >textarea{
|
|
|
+ width: calc(506Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ border-radius: calc(3Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ border: 1Px solid;
|
|
|
+ font-size: calc(16Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ line-height: calc(19Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ padding-left: calc(20Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ padding-right: calc(2Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ &::placeholder{
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >input {
|
|
|
+ height: calc(51Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ }
|
|
|
+ >textarea{
|
|
|
+ width: calc(506Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ height: calc(238Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ padding-top: calc(13Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ padding-bottom: calc(13Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ }
|
|
|
+ >input.veri-code-input{
|
|
|
+ width: calc(338Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ margin-right: calc(15Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ }
|
|
|
+ >button.get-veri-code{
|
|
|
+ width: calc(155Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ height: calc(51Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ border-radius: calc(3Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ >img{
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ >.splitter{
|
|
|
+ width: calc(830Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ border: 1Px solid #B5C2B9;
|
|
|
+ margin-bottom: calc(40Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ }
|
|
|
+
|
|
|
+ >.row-score-current{
|
|
|
+ width: calc(660Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ margin-bottom: calc(10Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ >.key-score{
|
|
|
+ font-size: calc(24Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ line-height: calc(28Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ letter-spacing: calc(8Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ }
|
|
|
+ >.value{
|
|
|
+ font-size: calc(24Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ line-height: calc(28Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >.row-score-consume{
|
|
|
+ width: calc(660Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ margin-bottom: calc(10Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ >.key-score{
|
|
|
+ font-size: calc(20Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ line-height: calc(23Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ }
|
|
|
+ >.value{
|
|
|
+ font-size: calc(20Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ line-height: calc(23Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >.row-score-remain{
|
|
|
+ width: calc(660Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ >.key-score{
|
|
|
+ font-size: calc(20Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ line-height: calc(23Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ }
|
|
|
+ >.value{
|
|
|
+ font-size: calc(20Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ line-height: calc(23Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ &.minus{
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ >.btn-group{
|
|
|
+ >button.cancel{
|
|
|
+ width: calc(194Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ height: calc(94Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ padding-bottom: calc(9Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ font-size: calc(20Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ line-height: calc(23Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ }
|
|
|
+ >button.confirm{
|
|
|
+ width: calc(194Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ height: calc(94Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ padding-bottom: calc(9Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ font-size: calc(20Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ line-height: calc(23Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ &[disabled]{
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >.deco{
|
|
|
+ left: calc(-14Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ top: calc(14Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ border: 1Px solid rgba(255, 255, 255, 0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cert-img {
|
|
|
+ &-wrap {
|
|
|
+ width: calc(506Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
任一存