手机布局
Showing
3 changed files
with
88 additions
and
26 deletions
| ... | @@ -181,6 +181,7 @@ | ... | @@ -181,6 +181,7 @@ |
| 181 | size="large" true-value="1" | 181 | size="large" true-value="1" |
| 182 | /> | 182 | /> |
| 183 | <br v-if="language == 1"> | 183 | <br v-if="language == 1"> |
| 184 | |||
| 184 | <span | 185 | <span |
| 185 | @click="handelInsurance" | 186 | @click="handelInsurance" |
| 186 | >《{{ language == 0 ? '赛事购买协议' : 'Event Insurance Procurement Agreement' }} 》</span> | 187 | >《{{ language == 0 ? '赛事购买协议' : 'Event Insurance Procurement Agreement' }} 》</span> |
| ... | @@ -916,21 +917,51 @@ function checkedChange(v) { | ... | @@ -916,21 +917,51 @@ function checkedChange(v) { |
| 916 | } | 917 | } |
| 917 | } | 918 | } |
| 918 | 919 | ||
| 919 | .father { | ||
| 920 | position: relative; | ||
| 921 | height: 85px; | ||
| 922 | } | ||
| 923 | 920 | ||
| 924 | .checkbox { | 921 | @media (max-width: 767px) { |
| 925 | position: absolute; | ||
| 926 | right: 5%; | ||
| 927 | text-align: left; | ||
| 928 | 922 | ||
| 929 | span { | 923 | .father { |
| 930 | color: #453DEA; | 924 | position: relative; |
| 925 | height: 110px; | ||
| 926 | padding-top: 45px; | ||
| 927 | line-height: 40px; | ||
| 928 | } | ||
| 929 | .checkbox { | ||
| 930 | position: absolute; | ||
| 931 | right: 0%; | ||
| 932 | top: 0; | ||
| 933 | text-align: left; | ||
| 934 | font-size: 14px; | ||
| 935 | |||
| 936 | span { | ||
| 937 | color: #453DEA; | ||
| 938 | position: relative; | ||
| 939 | top: -4px; | ||
| 940 | cursor: pointer | ||
| 941 | } | ||
| 942 | } | ||
| 943 | } | ||
| 944 | |||
| 945 | /* 桌面(≥1024px) */ | ||
| 946 | @media (min-width: 1024px) { | ||
| 947 | .father { | ||
| 931 | position: relative; | 948 | position: relative; |
| 932 | top: -1px; | 949 | height: 85px; |
| 933 | cursor: pointer | 950 | line-height: 85px; |
| 951 | } | ||
| 952 | |||
| 953 | .checkbox { | ||
| 954 | position: absolute; | ||
| 955 | right: 0%; | ||
| 956 | text-align: left; | ||
| 957 | font-size: 14px; | ||
| 958 | |||
| 959 | span { | ||
| 960 | color: #453DEA; | ||
| 961 | position: relative; | ||
| 962 | top: -4px; | ||
| 963 | cursor: pointer | ||
| 964 | } | ||
| 934 | } | 965 | } |
| 935 | } | 966 | } |
| 936 | </style> | 967 | </style> | ... | ... |
| ... | @@ -1120,21 +1120,52 @@ function checkedChange(v) { | ... | @@ -1120,21 +1120,52 @@ function checkedChange(v) { |
| 1120 | } | 1120 | } |
| 1121 | } | 1121 | } |
| 1122 | 1122 | ||
| 1123 | .father { | ||
| 1124 | position: relative; | ||
| 1125 | height: 85px; | ||
| 1126 | } | ||
| 1127 | 1123 | ||
| 1128 | .checkbox { | 1124 | @media (max-width: 767px) { |
| 1129 | position: absolute; | ||
| 1130 | right: 5%; | ||
| 1131 | text-align: left; | ||
| 1132 | 1125 | ||
| 1133 | span { | 1126 | .father { |
| 1134 | color: #453DEA; | 1127 | position: relative; |
| 1128 | height: 110px; | ||
| 1129 | padding-top: 45px; | ||
| 1130 | line-height: 40px; | ||
| 1131 | } | ||
| 1132 | .checkbox { | ||
| 1133 | position: absolute; | ||
| 1134 | right: 0%; | ||
| 1135 | top: 0; | ||
| 1136 | text-align: left; | ||
| 1137 | font-size: 14px; | ||
| 1138 | |||
| 1139 | span { | ||
| 1140 | color: #453DEA; | ||
| 1141 | position: relative; | ||
| 1142 | top: -4px; | ||
| 1143 | cursor: pointer | ||
| 1144 | } | ||
| 1145 | } | ||
| 1146 | } | ||
| 1147 | |||
| 1148 | /* 桌面(≥1024px) */ | ||
| 1149 | @media (min-width: 1024px) { | ||
| 1150 | .father { | ||
| 1135 | position: relative; | 1151 | position: relative; |
| 1136 | top: -1px; | 1152 | height: 85px; |
| 1137 | cursor: pointer | 1153 | line-height: 85px; |
| 1154 | } | ||
| 1155 | |||
| 1156 | .checkbox { | ||
| 1157 | position: absolute; | ||
| 1158 | right: 0%; | ||
| 1159 | text-align: left; | ||
| 1160 | font-size: 14px; | ||
| 1161 | |||
| 1162 | span { | ||
| 1163 | color: #453DEA; | ||
| 1164 | position: relative; | ||
| 1165 | top: -4px; | ||
| 1166 | cursor: pointer | ||
| 1167 | } | ||
| 1138 | } | 1168 | } |
| 1139 | } | 1169 | } |
| 1170 | |||
| 1140 | </style> | 1171 | </style> | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <el-dialog | 2 | <el-dialog |
| 3 | v-model="show" :close-on-click-modal="false" | 3 | v-model="show" |
| 4 | :title="language==0?'赛事购买协议':'Event Insurance Procurement Agreement'" append-to-body center | 4 | :title="language==0?'赛事购买协议':'Event Insurance Procurement Agreement'" append-to-body center |
| 5 | class="pcloginpop" | 5 | class="pcloginpop" |
| 6 | close-icon="CircleClose" destroy-on-close | 6 | close-icon="CircleClose" destroy-on-close |
| 7 | width="1100px" | 7 | width="80%" |
| 8 | > | 8 | > |
| 9 | <div v-html="data" /> | 9 | <div v-html="data" /> |
| 10 | <div class="checkbox"> | 10 | <div class="checkbox"> | ... | ... |
-
Please register or sign in to post a comment