Showing
4 changed files
with
306 additions
and
25 deletions
| @@ -200,19 +200,75 @@ | @@ -200,19 +200,75 @@ | ||
| 200 | <p class="coupon-err-tip"></p> | 200 | <p class="coupon-err-tip"></p> |
| 201 | </div> | 201 | </div> |
| 202 | </dt> | 202 | </dt> |
| 203 | - <dd> | 203 | + <dd class="coupon-choose-box"> |
| 204 | <div class="coupon-opt-title"> | 204 | <div class="coupon-opt-title"> |
| 205 | + <ul class="coupon-tab clearfix"> | ||
| 206 | + <li class="active">可用（99+）</li> | ||
| 207 | + <li>不可用（12）</li> | ||
| 208 | + </ul> | ||
| 205 | <div class="use-code"> | 209 | <div class="use-code"> |
| 210 | + <span class="err-tip red">23112</span> | ||
| 206 | <input type="text" class="coupon-code" placeholder="输入优惠码"> | 211 | <input type="text" class="coupon-code" placeholder="输入优惠码"> |
| 207 | <label class="sure-convert fw300">兑换</label> | 212 | <label class="sure-convert fw300">兑换</label> |
| 208 | </div> | 213 | </div> |
| 209 | - <span class="ticket-use-tip hide"> | ||
| 210 | - 已成功使用<em class="red num">1</em>张优惠券，<em class="red price"></em> | ||
| 211 | - <b class="cancel-use-ticket">取消使用</b> | ||
| 212 | - </span> | ||
| 213 | - <p class="tip-box red right"></p> | ||
| 214 | </div> | 214 | </div> |
| 215 | - <div class="coupon-list-wrap"></div> | 215 | + <div class="coupon-list-wrap1"> |
| 216 | + <div class="type-list clearfix"> | ||
| 217 | + <label class="active">全部优惠券</label> | ||
| 218 | + <label>店铺券</label> | ||
| 219 | + <label>活动券</label> | ||
| 220 | + <label>运费券</label> | ||
| 221 | + </div> | ||
| 222 | + <div class="list-content"> | ||
| 223 | + <div class="coupon-item"> | ||
| 224 | + <div class="border"> | ||
| 225 | + <div class="due-tig"></div> | ||
| 226 | + <div class="worth"> | ||
| 227 | + <p>¥<span class="price">100</span><br><span class="conditions">满499可用</span></p> | ||
| 228 | + </div> | ||
| 229 | + <div class="coupon-info"> | ||
| 230 | + <p class="name"><span class="type type-s">[店铺券]</span> Adidas Origins店铺使用</p> | ||
| 231 | + <p class="time">2018.1.12-2018.5.20</p> | ||
| 232 | + <label class="explain"> | ||
| 233 | + 使用说明 > | ||
| 234 | + <p class="explain-wrap"> | ||
| 235 | + 全场通用，特例商品暂不支持使用优惠券<br>可以与其他类型叠加使用，同店铺只能使用一张，不同店铺可以叠加使用 | ||
| 236 | + </p> | ||
| 237 | + </label> | ||
| 238 | + <p class="mutex-tip">已选择一张此店铺优惠券；<br>单笔订单同店铺只能使用一张店铺券</p> | ||
| 239 | + </div> | ||
| 240 | + | ||
| 241 | + <span class="iconfont check-icon coupon-check-btn"></span> | ||
| 242 | + <span class="iconfont coupon-check-btn"></span> | ||
| 243 | + <span class="iconfont disable-icon coupon-check-btn"></span> | ||
| 244 | + </div> | ||
| 245 | + </div> | ||
| 246 | + <div class="coupon-item mutex"> | ||
| 247 | + <div class="border"> | ||
| 248 | + <div class="due-tig"></div> | ||
| 249 | + <div class="worth"> | ||
| 250 | + <p>¥<span class="price">100</span><br><span class="conditions">满499可用</span></p> | ||
| 251 | + </div> | ||
| 252 | + <div class="coupon-info"> | ||
| 253 | + <p class="name"><span class="type type-s">[店铺券]</span> Adidas Origins店铺使用</p> | ||
| 254 | + <p class="time">2018.1.12-2018.5.20</p> | ||
| 255 | + <label class="explain"> | ||
| 256 | + 使用说明 > | ||
| 257 | + <p class="explain-wrap"> | ||
| 258 | + 全场通用，特例商品暂不支持使用优惠券<br>可以与其他类型叠加使用，同店铺只能使用一张，不同店铺可以叠加使用 | ||
| 259 | + </p> | ||
| 260 | + </label> | ||
| 261 | + <p class="mutex-tip">已选择一张此店铺优惠券；<br>单笔订单同店铺只能使用一张店铺券</p> | ||
| 262 | + </div> | ||
| 263 | + | ||
| 264 | + <span class="iconfont disable-icon coupon-check-btn"></span> | ||
| 265 | + </div> | ||
| 266 | + </div> | ||
| 267 | + </div> | ||
| 268 | + </div> | ||
| 269 | + <div class="coupon-list-wrap"> | ||
| 270 | + | ||
| 271 | + </div> | ||
| 216 | </dd> | 272 | </dd> |
| 217 | {{/unless}} | 273 | {{/unless}} |
| 218 | 274 |
| @@ -27,7 +27,7 @@ | @@ -27,7 +27,7 @@ | ||
| 27 | <p>¥<span class="price">100</span><br><span class="conditions">满499可用</span></p> | 27 | <p>¥<span class="price">100</span><br><span class="conditions">满499可用</span></p> |
| 28 | </div> | 28 | </div> |
| 29 | <div class="coupon-info"> | 29 | <div class="coupon-info"> |
| 30 | - <p class="name"><span class="type">[店铺券]</span> Adidas Origins店铺使用</p> | 30 | + <p class="name"><span class="type type-s">[店铺券]</span> Adidas Origins店铺使用</p> |
| 31 | <p class="time">2018.1.12-2018.5.20</p> | 31 | <p class="time">2018.1.12-2018.5.20</p> |
| 32 | <label class="explain"> | 32 | <label class="explain"> |
| 33 | 使用说明 > | 33 | 使用说明 > |
| @@ -45,7 +45,7 @@ | @@ -45,7 +45,7 @@ | ||
| 45 | <p>¥<span class="price">100</span><br><span class="conditions">满499可用</span></p> | 45 | <p>¥<span class="price">100</span><br><span class="conditions">满499可用</span></p> |
| 46 | </div> | 46 | </div> |
| 47 | <div class="coupon-info"> | 47 | <div class="coupon-info"> |
| 48 | - <p class="name"><span class="type">[店铺券]</span> Adidas Origins店铺使用</p> | 48 | + <p class="name"><span class="type type-a">[店铺券]</span> Adidas Origins店铺使用</p> |
| 49 | <p class="time">2018.1.12-2018.5.20</p> | 49 | <p class="time">2018.1.12-2018.5.20</p> |
| 50 | <label class="explain">使用说明 ></label> | 50 | <label class="explain">使用说明 ></label> |
| 51 | </div> | 51 | </div> |
| @@ -58,7 +58,7 @@ | @@ -58,7 +58,7 @@ | ||
| 58 | <p><span class="freight">普通</span></p> | 58 | <p><span class="freight">普通</span></p> |
| 59 | </div> | 59 | </div> |
| 60 | <div class="coupon-info"> | 60 | <div class="coupon-info"> |
| 61 | - <p class="name"><span class="type">[运费券]</span> 8月份运费券</p> | 61 | + <p class="name"><span class="type type-d">[运费券]</span> 8月份运费券</p> |
| 62 | <p class="time">2018.1.12-2018.5.20</p> | 62 | <p class="time">2018.1.12-2018.5.20</p> |
| 63 | <label class="explain">使用说明 ></label> | 63 | <label class="explain">使用说明 ></label> |
| 64 | </div> | 64 | </div> |
| @@ -71,7 +71,7 @@ | @@ -71,7 +71,7 @@ | ||
| 71 | <p><span class="freight">顺丰</span></p> | 71 | <p><span class="freight">顺丰</span></p> |
| 72 | </div> | 72 | </div> |
| 73 | <div class="coupon-info"> | 73 | <div class="coupon-info"> |
| 74 | - <p class="name"><span class="type">[运费券]</span> 8月份运费券</p> | 74 | + <p class="name"><span class="type type-d">[运费券]</span> 8月份运费券</p> |
| 75 | <p class="time">2018.1.12-2018.5.20</p> | 75 | <p class="time">2018.1.12-2018.5.20</p> |
| 76 | <label class="explain">使用说明 ></label> | 76 | <label class="explain">使用说明 ></label> |
| 77 | </div> | 77 | </div> |
| @@ -971,19 +971,42 @@ | @@ -971,19 +971,42 @@ | ||
| 971 | } | 971 | } |
| 972 | } | 972 | } |
| 973 | 973 | ||
| 974 | + .coupon-choose-box { | ||
| 975 | + border: 1px solid #e0e0e0; | ||
| 976 | + } | ||
| 977 | + | ||
| 974 | .coupon-opt-title { | 978 | .coupon-opt-title { |
| 975 | - height: 50px; | ||
| 976 | - line-height: 50px; | ||
| 977 | - padding: 0 30px; | 979 | + height: 40px; |
| 980 | + line-height: 40px; | ||
| 978 | background-color: #f0f0f0; | 981 | background-color: #f0f0f0; |
| 982 | + border-bottom: 1px solid #e0e0e0; | ||
| 979 | 983 | ||
| 980 | .red { | 984 | .red { |
| 981 | color: $red; | 985 | color: $red; |
| 982 | } | 986 | } |
| 983 | 987 | ||
| 984 | - .use-code { | 988 | + .coupon-tab { |
| 985 | display: inline-block; | 989 | display: inline-block; |
| 986 | 990 | ||
| 991 | + li { | ||
| 992 | + min-width: 120px; | ||
| 993 | + float: left; | ||
| 994 | + color: #b0b0b0; | ||
| 995 | + text-align: center; | ||
| 996 | + cursor: pointer; | ||
| 997 | + } | ||
| 998 | + | ||
| 999 | + .active { | ||
| 1000 | + background: #fff; | ||
| 1001 | + color: #444; | ||
| 1002 | + font-weight: bold; | ||
| 1003 | + } | ||
| 1004 | + } | ||
| 1005 | + | ||
| 1006 | + .use-code { | ||
| 1007 | + float: right; | ||
| 1008 | + margin-right: 20px; | ||
| 1009 | + | ||
| 987 | > input { | 1010 | > input { |
| 988 | width: 180px; | 1011 | width: 180px; |
| 989 | line-height: 24px; | 1012 | line-height: 24px; |
| @@ -1005,29 +1028,230 @@ | @@ -1005,29 +1028,230 @@ | ||
| 1005 | display: inline-block; | 1028 | display: inline-block; |
| 1006 | } | 1029 | } |
| 1007 | } | 1030 | } |
| 1031 | + } | ||
| 1008 | 1032 | ||
| 1009 | - .ticket-use-tip { | 1033 | + .coupon-list-wrap1 { |
| 1034 | + padding: 20px; | ||
| 1035 | + position: relative; | ||
| 1036 | + | ||
| 1037 | + .type-list { | ||
| 1038 | + width: 100%; | ||
| 1039 | + padding: 10px 0; | ||
| 1040 | + position: absolute; | ||
| 1041 | + left: 0; | ||
| 1042 | + top: -1px; | ||
| 1043 | + background: #fff; | ||
| 1044 | + border-bottom: 1px solid #e0e0e0; | ||
| 1045 | + | ||
| 1046 | + > label { | ||
| 1047 | + float: left; | ||
| 1048 | + min-width: 90px; | ||
| 1049 | + height: 30px; | ||
| 1050 | + line-height: 30px; | ||
| 1051 | + color: #444; | ||
| 1052 | + font-size: 12px; | ||
| 1053 | + text-align: center; | ||
| 1054 | + padding: 0 10px; | ||
| 1055 | + box-sizing: border-box; | ||
| 1056 | + border: 1px solid #e0e0e0; | ||
| 1057 | + margin-left: 40px; | ||
| 1058 | + cursor: pointer; | ||
| 1059 | + } | ||
| 1060 | + | ||
| 1061 | + > label:first-child { | ||
| 1010 | margin-left: 20px; | 1062 | margin-left: 20px; |
| 1063 | + } | ||
| 1011 | 1064 | ||
| 1012 | - .num { | ||
| 1013 | - margin: 0 4px; | 1065 | + .active { |
| 1066 | + color: #fff; | ||
| 1067 | + background: #444; | ||
| 1068 | + border-color: #444; | ||
| 1069 | + } | ||
| 1014 | } | 1070 | } |
| 1015 | 1071 | ||
| 1016 | - .red { | ||
| 1017 | - color: $red; | 1072 | + .type-list + .list-content { |
| 1073 | + margin-top: 50px; | ||
| 1018 | } | 1074 | } |
| 1019 | 1075 | ||
| 1020 | - .cancel-use-ticket { | ||
| 1021 | - color: #1987cf; | 1076 | + .list-content { |
| 1077 | + width: 100%; | ||
| 1078 | + height: 420px; | ||
| 1079 | + background: #f5f5f5; | ||
| 1080 | + border: 1px solid #e0e0e0; | ||
| 1081 | + } | ||
| 1082 | + | ||
| 1083 | + .coupon-item { | ||
| 1084 | + width: 354px; | ||
| 1085 | + height: 100px; | ||
| 1086 | + font-size: 12px; | ||
| 1087 | + display: inline-block; | ||
| 1022 | margin-left: 20px; | 1088 | margin-left: 20px; |
| 1023 | - cursor: pointer; | 1089 | + margin-bottom: 15px; |
| 1090 | + overflow: hidden; | ||
| 1091 | + position: relative; | ||
| 1092 | + user-select: none; | ||
| 1093 | + | ||
| 1094 | + .border { | ||
| 1095 | + width: 100%; | ||
| 1096 | + height: 100%; | ||
| 1097 | + background: #fff; | ||
| 1098 | + border: 1px solid #efefef; | ||
| 1099 | + border-radius: 4px; | ||
| 1100 | + box-sizing: border-box; | ||
| 1024 | } | 1101 | } |
| 1102 | + | ||
| 1103 | + .due-tig { | ||
| 1104 | + width: 42px; | ||
| 1105 | + height: 42px; | ||
| 1106 | + background: resolve(home/due-tig.png); | ||
| 1107 | + position: absolute; | ||
| 1108 | + top: 0; | ||
| 1109 | + right: 0; | ||
| 1110 | + z-index: 3; | ||
| 1111 | + } | ||
| 1112 | + | ||
| 1113 | + .worth { | ||
| 1114 | + width: 100px; | ||
| 1115 | + line-height: 100px; | ||
| 1116 | + color: #fc5960; | ||
| 1117 | + border-right: 1px dashed #e0e0e0; | ||
| 1118 | + text-align: center; | ||
| 1119 | + position: absolute; | ||
| 1120 | + left: 0; | ||
| 1121 | + | ||
| 1122 | + > p { | ||
| 1123 | + width: 90%; | ||
| 1124 | + line-height: 1; | ||
| 1125 | + display: inline-block; | ||
| 1126 | + vertical-align: middle; | ||
| 1127 | + } | ||
| 1128 | + | ||
| 1129 | + .price { | ||
| 1130 | + font-size: 30px; | ||
| 1131 | + font-weight: bold; | ||
| 1132 | + } | ||
| 1133 | + | ||
| 1134 | + .conditions { | ||
| 1135 | + line-height: 1.5; | ||
| 1136 | + margin-top: 10px; | ||
| 1137 | + display: block; | ||
| 1138 | + } | ||
| 1139 | + | ||
| 1140 | + .freight { | ||
| 1141 | + font-size: 24px; | ||
| 1142 | + color: #444; | ||
| 1143 | + } | ||
| 1144 | + | ||
| 1145 | + &:before, | ||
| 1146 | + &:after { | ||
| 1147 | + content: ""; | ||
| 1148 | + width: 15px; | ||
| 1149 | + height: 15px; | ||
| 1150 | + position: absolute; | ||
| 1151 | + right: -8px; | ||
| 1152 | + background: resolve(home/grey-round.png); | ||
| 1153 | + } | ||
| 1154 | + | ||
| 1155 | + &:before { | ||
| 1156 | + top: -10px; | ||
| 1157 | + } | ||
| 1158 | + | ||
| 1159 | + &:after { | ||
| 1160 | + bottom: -9px; | ||
| 1161 | + } | ||
| 1162 | + } | ||
| 1163 | + | ||
| 1164 | + .coupon-info { | ||
| 1165 | + padding: 12px 10px; | ||
| 1166 | + margin-left: 100px; | ||
| 1167 | + color: #b0b0b0; | ||
| 1168 | + | ||
| 1169 | + .name { | ||
| 1170 | + max-width: 90%; | ||
| 1171 | + height: 36px; | ||
| 1172 | + line-height: 1.3; | ||
| 1173 | + font-size: 13px; | ||
| 1174 | + color: #444; | ||
| 1175 | + overflow: hidden; | ||
| 1176 | + } | ||
| 1177 | + | ||
| 1178 | + .type { | ||
| 1179 | + font-weight: bold; | ||
| 1180 | + } | ||
| 1181 | + | ||
| 1182 | + .time { | ||
| 1183 | + margin-bottom: 16px; | ||
| 1184 | + } | ||
| 1185 | + | ||
| 1186 | + .explain-wrap { | ||
| 1187 | + width: calc(100% - 111px); | ||
| 1188 | + height: 98px; | ||
| 1189 | + line-height: 1.4; | ||
| 1190 | + position: absolute; | ||
| 1191 | + top: 1px; | ||
| 1192 | + left: 110px; | ||
| 1193 | + color: #444; | ||
| 1194 | + background: #fff; | ||
| 1195 | + box-sizing: border-box; | ||
| 1196 | + padding-top: 20px; | ||
| 1197 | + padding-right: 20px; | ||
| 1198 | + border-radius: 6px; | ||
| 1199 | + z-index: 2; | ||
| 1200 | + word-break: break-all; | ||
| 1201 | + overflow: hidden; | ||
| 1202 | + display: none; | ||
| 1203 | + } | ||
| 1204 | + | ||
| 1205 | + .explain:hover .explain-wrap { | ||
| 1206 | + display: block; | ||
| 1207 | + } | ||
| 1208 | + | ||
| 1209 | + .mutex-tip { | ||
| 1210 | + width: 210px; | ||
| 1211 | + height: 30px; | ||
| 1212 | + line-height: 1.2; | ||
| 1213 | + position: absolute; | ||
| 1214 | + left: 110px; | ||
| 1215 | + bottom: 7px; | ||
| 1216 | + background: #fff; | ||
| 1217 | + color: #444 !important; | ||
| 1218 | + overflow: hidden; | ||
| 1219 | + word-break: break-all; | ||
| 1220 | + display: none; | ||
| 1221 | + } | ||
| 1222 | + } | ||
| 1223 | + | ||
| 1224 | + .coupon-check-btn { | ||
| 1225 | + width: 20px; | ||
| 1226 | + height: 20px; | ||
| 1227 | + line-height: 20px; | ||
| 1228 | + text-align: center; | ||
| 1229 | + font-size: 18px; | ||
| 1230 | + color: #b0b0b0; | ||
| 1231 | + position: absolute; | ||
| 1232 | + right: 16px; | ||
| 1233 | + top: 50%; | ||
| 1234 | + margin-top: -10px; | ||
| 1235 | + } | ||
| 1236 | + | ||
| 1237 | + .disable-icon { | ||
| 1238 | + color: #e0e0e0 !important; | ||
| 1239 | + font-size: 20px; | ||
| 1240 | + } | ||
| 1241 | + | ||
| 1242 | + .check-icon { | ||
| 1243 | + color: #444; | ||
| 1244 | + font-size: 22px; | ||
| 1245 | + } | ||
| 1246 | + } | ||
| 1247 | + | ||
| 1248 | + .mutex * { | ||
| 1249 | + color: #b0b0b0 !important; | ||
| 1025 | } | 1250 | } |
| 1026 | } | 1251 | } |
| 1027 | 1252 | ||
| 1028 | .coupon-list-wrap { | 1253 | .coupon-list-wrap { |
| 1029 | padding: 0 30px; | 1254 | padding: 0 30px; |
| 1030 | - border: 1px solid #e8e8e8; | ||
| 1031 | line-height: 18px; | 1255 | line-height: 18px; |
| 1032 | padding-bottom: 10px; | 1256 | padding-bottom: 10px; |
| 1033 | 1257 |
| @@ -125,7 +125,7 @@ | @@ -125,7 +125,7 @@ | ||
| 125 | width: 100%; | 125 | width: 100%; |
| 126 | height: 100%; | 126 | height: 100%; |
| 127 | background: #fff; | 127 | background: #fff; |
| 128 | - border: 1px solid #e0e0e0; | 128 | + border: 1px solid #efefef; |
| 129 | border-radius: 4px; | 129 | border-radius: 4px; |
| 130 | box-sizing: border-box; | 130 | box-sizing: border-box; |
| 131 | } | 131 | } |
| @@ -220,6 +220,7 @@ | @@ -220,6 +220,7 @@ | ||
| 220 | position: absolute; | 220 | position: absolute; |
| 221 | top: 1px; | 221 | top: 1px; |
| 222 | left: 110px; | 222 | left: 110px; |
| 223 | + color: #444; | ||
| 223 | background: #fff; | 224 | background: #fff; |
| 224 | box-sizing: border-box; | 225 | box-sizing: border-box; |
| 225 | padding-top: 20px; | 226 | padding-top: 20px; |
-
Please register or login to post a comment