first commit

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,94 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+package-lock.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+.vscode
+.history
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

Dockerfile

@@ -0,0 +1,15 @@
+FROM node:14-alpine
+
+ENV NODE_ENV=production
+
+ENV HOST 0.0.0.0
+
+RUN mkdir -p /app
+
+COPY . /app
+
+WORKDIR /app
+
+EXPOSE 3333
+
+CMD npm start

README.md

@@ -0,0 +1,11 @@
+## 协议和授权
+
+`mall4pc-bbc` 并非一个开源软件，作者保留全部的权利。 擅自窃用，即属严重侵权行为，与盗窃无异。产生的一切任何后果责任由侵权者自负。
+
+## 商业使用
+
+商用请联系 **广州蓝海创新科技有限公司** 获取授权，否则产生的一切任何后果责任由侵权者自负。
+
+## 🚫禁止
+
+将本项目的部分或全部代码和资源进行任何形式的再发行（上传GitHub、Gitee等任何公开发行的地方）

assets/css/apply-return.css

@@ -0,0 +1,581 @@
+/* 个人中心-申请售后 */
+.user-center .apply-return.applied-box .item .goods-info {
+  display: flex;
+  background: #f9f9f9;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.user-center .apply-return.apply-box .item .goods-info:not(:last-child),
+.user-center .apply-return.apply-box .item.apply-item .goods-item:not(:last-child) {
+  margin-bottom: 10px;
+}
+.user-center .apply-return.apply-box .item.apply-prod {
+  align-items: flex-start;
+}
+.user-center .apply-return.apply-box .item.apply-prod .tit {
+  margin-top: 40px;
+}
+.user-center .apply-return.apply-box .item.apply-item .goods-item {
+  background: #f9f9f9;
+}
+.user-center .apply-return.apply-box .item.apply-item .goods-item.giveaways,
+.user-center .apply-return.apply-box .item.apply-item .goods-con {
+  display: flex;
+  /* align-items: center; */
+  padding: 10px;
+  box-sizing: border-box;
+}
+/* 赠品列表 */
+.user-center .apply-return.apply-box .item .goods-item .gift-name-list {
+  padding: 0 10px 10px;
+  box-sizing: border-box;
+}
+.user-center .apply-return.apply-box .item .goods-item .gift-name-list .gift-item {
+  cursor: pointer;
+  color: #333;
+}
+.user-center .apply-return.apply-box .item .goods-item .gift-name-list .gift-item:not(:first-child) {
+  margin-top: 5px;
+}
+.user-center .apply-return.apply-box .item .goods-item.giveaways .goods-text .name,
+.user-center .apply-return.apply-box .item .goods-item.giveaways .goods-img {
+  cursor: pointer;
+}
+.user-center .apply-return.apply-box .item .goods-item.giveaways .goods-text .name:hover,
+.user-center .apply-return.apply-box .item .goods-item .gift-name-list .gift-item:hover {
+  color: #e1251b;
+}
+.user-center .apply-return.apply-box .item .goods-item .gift-name-list .gift-item .name {
+  max-width: 400px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 10px;
+}
+.user-center .apply-return.apply-box .item .goods-item .gift-name-list .gift-item .name,
+.user-center .apply-return.apply-box .item .goods-item .gift-name-list .gift-item .num {
+  display: inline-block;
+  vertical-align: middle;
+}
+/* 赠品列表 end */
+
+.user-center .apply-return .item .goods-info .goods-img {
+  width: 75px;
+  height: 75px;
+  font-size: 0;
+  box-sizing: border-box;
+}
+
+.user-center .apply-return .item .goods-info .goods-img img {
+  width: 100%;
+  height: 100%;
+}
+
+.user-center .apply-return .item .goods-info .goods-text {
+  margin-left: 10px;
+  width: 370px;
+}
+
+.user-center .apply-return .item .goods-info .goods-text .name {
+  display: block;
+  line-height: 18px;
+  width: 370px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.user-center .apply-return .item .goods-info .goods-text .price {
+  margin-top: 5px;
+  font-size: 14px;
+}
+
+.user-center .apply-return .item .goods-info .goods-text .sku {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  color: #999;
+  margin-top: 5px;
+  font-size: 12px;
+}
+
+.user-center .apply-return .item .goods-info .goods-text .sku .sku-name {
+  max-width: 220px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.user-center .apply-return .item .goods-info .goods-text .sku .num {
+  margin-left: 10px;
+  margin-right: 5px;
+}
+
+/* 赠品标签 */
+.user-center .apply-return .item .goods-info .goods-text .sku .gifts-icon {
+  display: inline-block;
+  padding: 3px;
+  line-height: 1em;
+  text-align: center;
+  color: #fff;
+  background: #E43130;
+  border-radius: 3px;
+  font-size: 12px;
+  box-sizing: border-box;
+  margin-right: 5px;
+}
+/* 赠品移除按钮 */
+.user-center .apply-return .item .goods-info .goods-text .sku .del-btn {
+  display: inline-block;
+  color: #E43130;
+  border: 1px solid #E43130;
+  border-radius: 12px;
+  min-width: 56px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+  margin-left: auto;
+  cursor: pointer;
+}
+
+/* 详情 */
+.user-center .apply-return .return-detail .item.prod-con-box {
+  align-items: flex-start;
+}
+.user-center .apply-return .return-detail .item.prod-con-box .tit {
+  margin-top: 40px;
+}
+.user-center .apply-return .return-detail .item.prod-con-box .prod-item {
+  padding: 0 10px;
+  background: #f9f9f9;
+}
+.user-center .apply-return .return-detail .item.prod-con-box .prod-item:not(:last-child) {
+  border-bottom: 1px solid #eee;
+}
+.user-center .apply-return .return-detail .item.prod-con-box .goods-info {
+  padding: 10px 0;
+}
+.user-center .apply-return .return-detail .item.prod-con-box .goods-info.pointer {
+  cursor: pointer;
+}
+.user-center .apply-return .return-detail .item.prod-con-box .gift-prod {
+  padding-bottom: 10px;
+}
+.user-center .apply-return .return-detail .item.prod-con-box .gift-item {
+  display: block;
+  line-height: 1em;
+  color: #333;
+  cursor: pointer;
+}
+.user-center .apply-return .return-detail .item.prod-con-box .gift-item:hover {
+  color: #E43130;
+}
+.user-center .apply-return .return-detail .item.prod-con-box .gift-item:not(:first-child) {
+  margin-top: 8px;
+}
+.user-center .apply-return .return-detail .item.prod-con-box .gift-item .name {
+  margin-right: 8px;
+}
+.user-center .apply-return .return-detail .item .goods-info .goods-text .price-con {
+  margin-top: 10px;
+}
+.user-center .apply-return .return-detail .item .goods-info .goods-text .pri {
+  color: #e1251b;
+  font-size: 14px;
+}
+.user-center .apply-return .return-detail .item .goods-info .goods-text .sku .gift-icon {
+  color: #fff;
+  background-color: #E43130;
+  padding: 2px 4px;
+  border-radius: 4px;
+  margin-right: 5px;
+}
+
+.user-center .apply-return .item .apply-item {
+  padding: 5px 15px;
+  width: 60px;
+  text-align: center;
+  border: 1px solid #eee;
+  margin-right: 15px;
+  cursor: pointer;
+}
+
+.user-center .en .item .apply-item {
+  width: 120px;
+}
+
+.user-center .apply-return .item .apply-item.active {
+  border-color: #e1251b;
+}
+
+.user-center .apply-return .item .retur-reason {
+  position: relative;
+  height: 32px;
+}
+
+.user-center .apply-return .item .retur-reason .reason-tit {
+  cursor: pointer;
+  display: block;
+  width: 220px;
+  border: 1px solid #eee;
+  padding: 0px 28px 0 12px;
+  line-height: 30px;
+  position: relative;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  -o-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+.user-center .apply-return .item.error .retur-reason .reason-tit {
+  border-color: #e1251b;
+}
+
+.user-center .apply-return .item.error .shop-description {
+  border-color: #e1251b;
+}
+
+.user-center .apply-return .item .retur-reason:hover .reason-tit,
+.user-center .apply-return .item.error .retur-reason .reason-tit {
+  color: #e1251b;
+}
+
+.user-center .apply-return .item .retur-reason .reason-tit::after {
+  position: absolute;
+  right: 10px;
+  top: 12px;
+  width: 0;
+  height: 0;
+  content: ' ';
+  border: 5px solid transparent;
+  border-top: 5px solid #bcbcbc;
+  border-radius: 2px;
+}
+
+.user-center .apply-return .item .retur-reason:hover .reason-tit::after,
+.user-center .apply-return .item.error .retur-reason .reason-tit::after {
+  border-top: 5px solid #e1251b;
+}
+
+.user-center .apply-return .item .retur-reason .reason-select {
+  position: relative;
+  top: -1px;
+  left: 0;
+  border-width: 0 1px 1px;
+  border-style: solid;
+  border-color: #eee;
+  background-color: #fff;
+  line-height: 30px;
+  font-size: 12px;
+  text-align: center;
+  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+/* .user-center .apply-return .item .retur-reason:hover .reason-select {
+    display: block;
+} */
+
+.user-center .apply-return .item .retur-reason .reason-select .s-item {
+  display: block;
+  padding: 2px 15px;
+  cursor: pointer;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  -o-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  text-align: left;
+}
+
+.user-center .apply-return .item .retur-reason .reason-select .s-item:hover {
+  color: #e1251b;
+  background: #f9f9f9;
+}
+
+/* 计数器 */
+.user-center .apply-return .item .counter-box {
+  display: flex;
+}
+.user-center .apply-return .item .counter-box .increase,
+.user-center .apply-return .item .counter-box .reduce {
+  display: inline-block;
+  background: #f1f0f0;
+  width: 26px;
+  height: 26px;
+  line-height: 26px;
+  text-align: center;
+  cursor: pointer;
+  font-size: 16px;
+  user-select: none;
+  -moz-user-select: none; /*禁止双击选中文本*/
+}
+.user-center .apply-return .item .counter-box .prod-num-int {
+  display: inline-block;
+  width: 60px;
+  height: 26px;
+  line-height: 26px;
+  background: #f8f8f8;
+  padding: 0 5px;
+  text-align: center;
+  box-sizing: border-box;
+  color: #000;
+}
+.user-center .apply-return .item .max-refund-pieces {
+  padding: 5px 0;
+  width: 228px;
+  /* border: 1px solid #eee; */
+  box-sizing: border-box;
+}
+/* /计数器 */
+
+.user-center .apply-return .item .unalterable {
+  display: block;
+  width: 220px;
+  border: 1px solid #eee;
+  padding: 0px 28px 0 12px;
+  line-height: 30px;
+  color: #e43130;
+  cursor: pointer;
+}
+
+.user-center .apply-return .item .return-price,
+.user-center .apply-return .item .fillin-mobilenumber {
+  position: relative;
+}
+
+.user-center .apply-return .item .return-price .prefix {
+  position: absolute;
+  line-height: 32px;
+  font-family: arial;
+  left: 10px;
+  top: 0;
+  color: #e1251b;
+}
+
+.user-center .apply-return .item .return-price .text {
+  width: 228px;
+  padding-left: 22px;
+  color: #e1251b;
+  font-family: arial;
+}
+
+.user-center .apply-return .item .fillin-mobilenumber .text {
+  width: 240px;
+  padding: 0 10px;
+  color: #000;
+  font-family: arial;
+}
+
+.user-center .apply-return .item .price-des {
+  color: #999;
+  margin-left: 10px;
+  font-family: arial;
+}
+
+.user-center .apply-return .item .shop-description {
+  width: 324px;
+  padding-top: 10px;
+}
+.user-center .apply-return .item .shop-description::placeholder {
+  color: #999;
+}
+
+.user-center .apply-return .item .img-des {
+  color: #999;
+  margin-left: 0px;
+  margin-top: 12px;
+}
+
+.user-center .apply-return .return-wait {
+  border-bottom: 1px solid #eee;
+  margin-bottom: 20px;
+}
+
+.user-center .apply-return .return-state {
+  display: flex;
+  align-items: center;
+}
+
+.user-center .apply-return .return-state .state {
+  font-size: 18px;
+}
+
+.user-center .apply-return .return-state .rest-time {
+  margin-left: 20px;
+  font-size: 14px;
+}
+
+.user-center .apply-return .return-state .rest-time .time {
+  font-family: arial;
+  color: #e1251b;
+}
+
+.user-center .apply-return .return-tip {
+  margin-top: 20px;
+  background: #f9f9f9;
+  padding: 10px 20px;
+}
+
+.user-center .apply-return .return-tip .tip-item {
+  line-height: 22px;
+  color: #777;
+  position: relative;
+  padding-left: 5px;
+}
+
+.user-center .apply-return .return-tip .tip-item:before {
+  position: absolute;
+  left: -7px;
+  top: 9px;
+  display: block;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  content: ' ';
+  background: #ccc;
+}
+
+.user-center .apply-return .return-btn {
+  margin-top: 25px;
+  /* padding-left: 20px; */
+  display: flex;
+  align-items: center;
+  margin-bottom: 40px;
+}
+
+.logistics-number {
+  font-size: 14px;
+  color: #999;
+  padding-right: 30px;
+}
+
+.user-center .apply-return .return-btn .btn-r {
+  padding: 5px 15px;
+  color: #fff;
+  background: #e1251b;
+  border-radius: 2px;
+  margin-right: 15px;
+}
+
+.user-center .apply-return .return-btn .btn-r:hover {
+  opacity: 0.9;
+}
+
+.user-center .apply-return .return-btn .btn-g {
+  padding: 4px 14px;
+  background: #f9f9f9;
+  border-radius: 2px;
+  border: 1px solid #ddd;
+  margin-left: 15px;
+}
+
+.user-center .apply-return .return-btn .btn-g:hover {
+  background: #fff;
+}
+
+.user-center .apply-return .shop-info {
+  margin-top: 20px;
+  padding-left: 40px;
+  position: relative;
+}
+
+.user-center .apply-return .shop-info::before {
+  position: absolute;
+  left: 18px;
+  top: 2px;
+  display: block;
+  width: 16px;
+  height: 16px;
+  content: ' ';
+  background: url(../images/icons.png) no-repeat;
+  background-position: 0 -864px;
+}
+
+.user-center .apply-return .shop-info .shop-name {
+  font-size: 14px;
+}
+
+.user-center .apply-return .shop-info .shop-name .name {
+  margin-left: 5px;
+}
+
+.user-center .apply-return .shop-info .shop-name .phone {
+  font-family: arial;
+  margin-left: 15px;
+}
+
+.user-center .apply-return .shop-info .shop-address {
+  margin-top: 5px;
+  color: #999;
+  word-break: break-word;
+}
+
+.user-center .apply-return .return-number {
+  padding: 5px;
+  width: 200px;
+  border: 1px solid #eee;
+  margin-right: 15px;
+}
+
+/* .user-center .box-content .return-detail {
+  border-top: 1px solid #eee;
+  padding-top: 20px;
+} */
+
+.user-center .box-content .return-detail .detail-tit {
+  padding: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 20px;
+}
+
+.user-center .box-content .return-detail .detail-con {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.user-center .box-content .return-detail .item .tit {
+  color: #999;
+  min-width: 80px;
+}
+
+.user-center .box-content .return-detail .detail-con .det-box {
+  flex: 1;
+}
+
+.user-center .box-content .return-detail .detail-con .det-box:first-child {
+  margin-right: 50px;
+}
+
+.user-center .box-content .return-detail .detail-con .det-box .item {
+  margin-bottom: 20px;
+  align-items: flex-start;
+}
+
+.user-center
+  .box-content
+  .return-detail
+  .detail-con
+  .det-box
+  .item
+  .return-text {
+  font-family: arial;
+  word-break: break-word;
+  max-width: 70%;
+}
+
+.unchecked {
+  -moz-user-select:none;/*火狐*/
+  -webkit-user-select:none;/*webkit浏览器*/
+  -ms-user-select:none;/*IE10*/
+  -khtml-user-select:none;/*早期浏览器*/
+  user-select:none;
+}
+
+
+/* 个人中心-申请售后 end */

assets/css/buy-member.css

@@ -0,0 +1,243 @@
+
+/* 购买会员 */
+
+.member-center{
+    min-height:82vh;
+}
+
+.member-center .buy-member {
+    margin-top: 20px;
+    box-sizing: border-box;
+    min-height: 55.4vh;
+    padding: 75px 155px;
+}
+
+.member-center .buy-member .tit {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.member-center .buy-member .tit .tit-bg {
+    width: 44px;
+    height: 10px;
+    background: url(../images/memberPic/member-tit-bg.png) no-repeat;
+}
+
+.member-center .buy-member .tit .tit-bg.tit-r {
+    -webkit-transform: rotate(180deg);
+    -moz-transform: rotate(180deg);
+    -o-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+.member-center .buy-member .tit .text {
+    margin: 0 20px;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.member-center .buy-member .item-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.member-center .buy-member .item-box .item {
+    position: relative;
+    width: 405px;
+    height: 243px;
+    box-sizing: border-box;
+    padding: 30px;
+    color: #fff;
+    margin-top: 70px;
+    box-shadow: 0 10px 20px rgba(0,0,0,.1);
+    border-radius: 10px;
+}
+
+.member-center .buy-member .item-box .item .bg {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.member-center .buy-member .item-box .item .bg img {
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+}
+
+.member-center .buy-member .item-box .item .text-box {
+    position: relative;
+}
+
+.member-center .buy-member .item-box .item .level {
+    font-size: 26px;
+    font-family: arial;
+}
+
+.member-center .buy-member .item-box .item .time {
+    margin-top: 10px;
+    font-family: arial;
+    opacity: 0.8;
+}
+
+.member-center .buy-member .item-box .item .price {
+    margin-top: 20px;
+    justify-content: flex-end;
+    font-size: 24px;
+    color: #fff;
+    margin-right: 10px;
+}
+
+.member-center .buy-member .item-box .item .price .big {
+    font-size: 40px;
+}
+
+.member-center .buy-member .item-box .item .btn-box {
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+}
+
+.member-center .buy-member .item-box .item .btn-box .limit {
+    flex: 1;
+    margin-right: 20px;
+    font-size: 14px;
+    font-family: arial;
+}
+
+.member-center .buy-member .item-box .item .btn-box .btn {
+    background: rgba(0,0,0,.1);
+    font-size: 14px;
+    border-radius: 36px;
+    cursor: pointer;
+    width: 120px;
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+    letter-spacing: 2px;
+    color: #f9f9f9;
+}
+
+.member-center .buy-member .item-box .item .btn-box .btn:hover {
+    background: rgba(0,0,0,.15);
+    color: #fff;
+}
+
+.member-center .buy-member .item-box .item .btn-box .btn.default {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.member-center .buy-member .item-box .item .btn-box .btn.default:hover {
+    background: rgba(0,0,0,.1);
+    color: #f9f9f9;
+}
+
+/* 支付弹窗 */
+
+.popup-box .con .pay-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 15px 30px 10px;
+    height: 19px;
+    font-size: 14px;
+}
+
+.popup-box .con .pay-number .number {
+    color: #e1251b;
+    margin: 0 3px;
+}
+
+.popup-box .con .pay-way {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+
+.popup-box .con .pay-way .item {
+    width: 174px;
+    height: 60px;
+    line-height: 60px;
+    margin: 0 10px;
+    border: 1px solid #e0e0e0;
+    text-align: center;
+    cursor: pointer;
+    overflow: hidden;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+}
+
+.popup-box .con .pay-way .item img {
+    display: block;
+    width: 28px;
+    height: 28px;
+    margin-right: 10px;
+}
+.popup-box .con .pay-way .item:hover {
+    border-color: #e1251b;
+}
+
+/* 支付弹窗 end */
+
+/* 微信支付弹窗 */
+
+.weixin-pay-code {
+    height: 320px;
+}
+
+.weixin-pay-code .text {
+    font-size: 18px;
+    font-weight: 600;
+    text-align: center;
+    margin-top: 10px;
+}
+
+.weixin-pay-code .qrcode {
+    margin: 20px auto;
+    font-size: 0;
+    width: 196px;
+    height: 196px;
+    border: 1px solid #eee;
+}
+
+.weixin-pay-code .btn-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+.weixin-pay-code .btn-box .btn {
+    background: #e1251b;
+    height: 32px;
+    line-height: 32px;
+    border-radius: 32px;
+    width: 90px;
+    text-align: center;
+    color: #fff;
+}
+
+.weixin-pay-code .btn-box .btn.gray {
+    background: #fff;
+    color: #000;
+    border: 1px solid #ddd;
+    width: 80px;
+    margin-left: 20px;
+}
+
+/* 微信支付弹窗 end */
+
+
+/* 购买会员 end */

assets/css/cart.css

@@ -0,0 +1,881 @@
+/* 购物车列表 */
+
+.cart .step-box .left .img {
+  background: url(../images/icons.png) no-repeat 0 -249px;
+}
+
+.cart .cart-tab {
+  padding: 12px 0;
+  border: 1px solid #eee;
+  background-color: #f9f9f9;
+  display: flex;
+  line-height: 14px;
+}
+
+.cart .cart-tab .tab-check {
+  width: 100px;
+}
+
+.cart .cart-tab .tab-img,
+.cart .cart-con .tab-img {
+  width: 90px;
+}
+
+.cart .cart-tab .tab-check .checkbox,
+.cart .cart-con .tab-check .checkbox {
+  margin-left: 15px;
+}
+
+.cart .cart-tab .tab-check .text {
+  display: inline-block;
+  vertical-align: top;
+  margin-left: 5px;
+}
+
+.cart .cart-tab .tab-name {
+  width: 370px;
+}
+
+.cart .cart-tab .tab-price,
+.cart .cart-con .item .tab-price {
+  width: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cart .cart-con .item .tab-price {
+  flex-direction: column;
+  justify-content: center;
+}
+
+.cart .cart-tab .tab-number,
+.cart .cart-con .tab-number {
+  width: 150px;
+  text-align: center;
+  padding-left: 40px;
+}
+
+.cart .cart-tab .tab-total,
+.cart .cart-con .tab-total {
+  width: 160px;
+  text-align: center;
+  padding-right: 40px;
+}
+
+.cart .cart-tab .tab-action {
+  width: 80px;
+  text-align: left;
+}
+
+.cart .cart-con .shop-box {
+  height: 24px;
+  line-height: 24px;
+  border-bottom: 1px solid #eee;
+  padding: 20px 0 15px;
+}
+
+.cart .cart-con .shop-box .shop-msg {
+  display: inline-block;
+  margin-left: 16px;
+  width: 48%;
+}
+
+.cart .cart-con .shop-box .shop-msg .checkbox {
+  margin-right: 5px;
+  margin-top: 5px;
+}
+
+.cart .cart-con .shop-box .shop-msg .self {
+  background: #e1251b;
+  color: #fff;
+  padding: 1px 3px;
+  display: inline-block;
+  height: 14px;
+  line-height: 14px;
+  border-radius: 2px;
+  margin-right: 5px;
+  margin-top: 4px;
+  vertical-align: top;
+}
+
+.cart .cart-con .shop-box .shop-msg .shop-name {
+  display: inline-block;
+  vertical-align: top;
+  font-weight: 700;
+}
+
+.cart .cart-con .shop-box .shop-coupon {
+  display: inline-block;
+  vertical-align: top;
+  margin-left: 5px;
+  position: relative;
+}
+
+.cart .cart-con .shop-box .shop-coupon .coupon-tit {
+  display: inline-block;
+  width: 58px;
+  height: 24px;
+  line-height: 24px;
+  padding-left: 18px;
+  position: relative;
+  cursor: pointer;
+  border-radius: 2px;
+  color: #e1251b;
+  background: url(../images/icons.png) no-repeat 0 -386px;
+}
+
+.cart .cart-con .shop-box .shop-coupon .coupon-tit::before {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: block;
+  width: 0;
+  height: 0;
+  content: ' ';
+  border: 4px solid transparent;
+  border-radius: 2px;
+}
+
+.cart .cart-con .shop-box .shop-coupon .coupon-tit::before {
+  border-top: 4px solid #e1251b;
+}
+
+.cart .cart-con .shop-box .shop-coupon.active .coupon-tit:before {
+  transform: rotate(180deg);
+  top: 6px;
+}
+
+.cart .cart-con .shop-box .shop-coupon .coupon-con {
+  position: absolute;
+  top: 39px;
+  left: 0;
+  background: #fff;
+  border: 1px solid #e1251b;
+  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
+  padding: 10px 0 10px 15px;
+  width: 278px;
+  z-index: 10;
+  display: none;
+}
+
+.cart .cart-con .shop-box .shop-coupon.active .coupon-con {
+  display: block;
+}
+
+.cart .cart-con .shop-box .shop-coupon .coupon-con::before,
+.cart .cart-con .shop-box .shop-coupon .coupon-con::after {
+  position: absolute;
+  top: -17px;
+  left: 30px;
+  display: block;
+  width: 0;
+  height: 0;
+  content: ' ';
+  border: 8px solid transparent;
+}
+
+.cart .cart-con .shop-box .shop-coupon .coupon-con::before {
+  border-bottom: 8px solid #df0b00;
+}
+
+.cart .cart-con .shop-box .shop-coupon .coupon-con::after {
+  top: -16px;
+  border-bottom: 8px solid #fff;
+}
+
+.cart .cart-con .shop-box .shop-coupon .coupon-con .coupon-box {
+  max-height: 250px;
+  overflow-y: auto;
+}
+
+.cart .cart-con .shop-box .shop-coupon .coupon-con .coupon-item {
+  padding: 5px 0;
+  height: 40px;
+  display: flex;
+  align-items: center;
+}
+
+.cart .cart-con .shop-box .shop-coupon .coupon-con .coupon-item .price {
+  display: inline-block;
+  width: 46px;
+  height: 22px;
+  padding: 0 3px;
+  color: #fff;
+  line-height: 22px;
+  text-align: center;
+  white-space: nowrap;
+  border: 1px dashed #fff;
+  border-top: 0;
+  border-bottom: 0;
+  background: #e1251b;
+  font-weight: 600;
+}
+
+.cart .cart-con .shop-box .shop-coupon .coupon-con .coupon-item .price .big {
+  font-size: 14px;
+  margin-left: 2px;
+}
+
+.cart .cart-con .shop-box .shop-coupon .coupon-con .coupon-item .info {
+  height: 30px;
+  margin-left: 10px;
+  line-height: 15px;
+}
+
+.cart .cart-con .shop-box .shop-coupon .coupon-con .coupon-item .info .name {
+  display: block;
+  width: 130px;
+  height: 15px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #000;
+  font-family: arial;
+}
+
+.cart .cart-con .shop-box .shop-coupon .coupon-con .coupon-item .info .time {
+  display: block;
+  font-family: arial;
+  color: #999;
+  height: 12px;
+  line-height: 12px;
+  margin-top: 3px;
+}
+
+.cart .cart-con .shop-box .shop-coupon .coupon-con .coupon-item .btn {
+  height: 24px;
+  line-height: 24px;
+  border: 1px solid #ddd;
+  margin-top: 7px;
+  width: 50px;
+  text-align: center;
+  color: #666;
+  border-radius: 2px;
+  margin-left: 15px;
+}
+
+.cart .cart-con .shop-box .shop-coupon .coupon-con .coupon-item .btn:hover {
+  border-color: #e1251b;
+  color: #e1251b;
+}
+
+.cart .cart-con .shop-box .shop-coupon .coupon-con .coupon-item .btn.active {
+  color: #999;
+  border: 0;
+  cursor: default;
+}
+
+.cart .cart-con .activity-msg {
+  display: flex;
+  border: 1px solid #eee;
+  border-width: 0 1px;
+  padding: 10px 22px;
+  align-items: center;
+  position: relative;
+  min-height: 50px;
+  box-sizing: border-box;
+}
+
+.cart .cart-con .activity-msg .a-info {
+  width: 880px;
+  display: flex;
+  align-items: center;
+}
+
+.activity-goods-checked {
+  position: relative;
+}
+
+.activity-goods-checked::after {
+  content: '';
+  position: absolute;
+  left: 22px;
+  top: 0;
+  bottom: 0;
+  width: 0;
+  border-left: 1px dashed #ddd;
+  z-index: 0;
+}
+
+.cart .cart-con .activity-msg .a-info .icon {
+  padding: 1px 7px;
+  height: 16px;
+  line-height: 16px;
+  background: #e1251b;
+  color: #fff;
+  position: relative;
+}
+
+.cart .cart-con .activity-msg .a-info .icon::after {
+  position: absolute;
+  left: 0;
+  bottom: -3px;
+  display: block;
+  width: 0;
+  height: 0;
+  content: ' ';
+  font-size: 0;
+  border-top: 3px solid #e1251b;
+  border-right: 6px solid transparent;
+}
+
+.cart .cart-con .activity-msg .a-info .text {
+  margin-left: 10px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cart .cart-con .activity-msg .a-info .text-red {
+  color: #e1251b;
+}
+
+.cart .cart-con .activity-msg .a-info .link {
+  margin-left: 10px;
+}
+
+.cart .cart-con .activity-msg .a-info .link .arr {
+  font-family: Consolas;
+}
+
+.cart .cart-con .activity-msg .a-info .link:hover {
+  color: #e1251b;
+}
+
+.cart .cart-con .activity-msg .a-price {
+  text-align: right;
+  min-width: 100px;
+}
+
+.cart .cart-con .activity-msg .a-price .discount {
+  color: #e1251b;
+}
+
+.cart .cart-con .item {
+  padding: 15px 0;
+  border: 1px solid #eee;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: -1px;
+  position: relative;
+}
+
+.cart .cart-con .item .item-goods {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.cart .cart-con .item.active {
+  background: #fffcf8;
+}
+
+.cart .cart-con .tab-check {
+  width: 44px;
+}
+
+.cart .cart-con .item .tab-img {
+  width: 90px;
+}
+
+.cart .cart-con .item .tab-img .img-box {
+  display: block;
+  width: 80px;
+  height: 80px;
+  font-size: 0;
+}
+
+.cart .cart-con .item .tab-img .img-box img {
+  width: 100%;
+  height: 100%;
+  vertical-align: top;
+}
+
+.cart .cart-con .item .tab-name {
+  line-height: 20px;
+  align-self: flex-start;
+  width: 426px;
+}
+
+.cart .cart-con .item .tab-name .name {
+  max-width: 380px;
+  max-height: 36px;
+  line-height: 18px;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+}
+
+.cart .cart-con .item .tab-name .name:hover {
+  color: #e1251b;
+}
+
+.cart .cart-con .item .tab-name .sku {
+  max-width: 380px;
+  height: 20px;
+  display: block;
+  margin-top: 10px;
+  color: #999;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cart .cart-con .item .tab-price .unit-price {
+  font-family: verdana;
+}
+
+.cart .cart-con .item .tab-price .promotion-box {
+  position: relative;
+  display: inline-block;
+  margin-top: 5px;
+}
+
+.cart .cart-con .item .tab-price .promotion-box .p-tit {
+  display: inline-block;
+  /* width: 28px; */
+  border: 1px solid #e1251b;
+  color: #e1251b;
+  height: 18px;
+  text-align: left;
+  line-height: 20px;
+  padding: 0 15px 0 5px;
+  position: relative;
+  background-color: #fff;
+  cursor: pointer;
+}
+
+.cart .cart-con .item .tab-price .promotion-box .p-tit::before {
+  position: absolute;
+  right: 5px;
+  top: 7px;
+  display: block;
+  width: 0;
+  height: 0;
+  content: ' ';
+  border: 4px solid transparent;
+  border-top: 4px solid #e1251b;
+  border-radius: 2px;
+}
+
+.cart .cart-con .item .tab-price .promotion-box .p-con {
+  position: absolute;
+  left: 0px;
+  top: 19px;
+  padding: 10px 14px 10px 10px;
+  width: 276px;
+  height: 210px;
+  z-index: 30;
+  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
+  border: 1px solid #e1251b;
+  background: #fff;
+  text-align: left;
+}
+
+.cart .cart-con .item .tab-price .promotion-box .p-con::before {
+  position: absolute;
+  left: 0;
+  top: -1px;
+  display: block;
+  width: 44px;
+  height: 1px;
+  background: #fff;
+  content: ' ';
+}
+
+.cart .cart-con .item .tab-price .promotion-box .p-con .p-items-con {
+  height: 180px;
+  overflow-y: auto;
+}
+
+.cart .cart-con .item .tab-price .promotion-box .p-con .p-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-top: 6px;
+  cursor: pointer;
+}
+
+.cart .cart-con .item .tab-price .promotion-box .p-con .p-item .radio {
+  /* align-self: flex-start;
+	margin: 4px 5px 0 0; */
+  margin-right: 5px;
+  cursor: pointer;
+}
+
+.cart .cart-con .item .tab-price .promotion-box .p-con .p-item .p-info {
+  /* flex: 1;
+  position: relative; */
+  line-height: 1.5em;
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  cursor: pointer;
+}
+
+.cart .cart-con .item .tab-price .promotion-box .p-con .p-btns {
+  margin-top: 10px;
+  display: flex;
+  justify-content: center;
+}
+
+.cart .cart-con .item .tab-price .promotion-box .p-con .p-btns .sure {
+  padding: 3px 10px;
+  border-radius: 2px;
+  color: #fff;
+  background: #e1251b;
+}
+
+.cart .cart-con .item .tab-price .promotion-box .p-con .p-btns .sure:hover {
+  opacity: 0.9;
+}
+
+.cart .cart-con .item .tab-price .promotion-box .p-con .p-btns .cancel {
+  padding: 3px 10px;
+  border-radius: 2px;
+  border: 1px solid #eee;
+  background: #f7f7f7;
+  margin-left: 10px;
+}
+
+.cart .cart-con .item .tab-price .promotion-box .p-con .p-btns .cancel:hover {
+  background: #fff;
+}
+
+.cart .cart-con .item .tab-number .goods-number .reduce,
+.cart .cart-con .item .tab-number .goods-number .increase {
+  display: inline-block;
+  vertical-align: top;
+  width: 30px;
+  height: 30px;
+  background: #f5f5f5;
+  font-size: 22px;
+  text-align: center;
+  line-height: 26px;
+  color: #999;
+  cursor: pointer;
+  border-radius: 50%;
+  -moz-user-select: none; /*火狐*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10*/
+  -khtml-user-select: none; /*早期浏览器*/
+  user-select: none;
+}
+
+.cart .cart-con .item.active .tab-number .goods-number .reduce,
+.cart .cart-con .item.active .tab-number .goods-number .increase {
+  background: #fff;
+}
+
+.cart .cart-con .item .tab-number .goods-number .limit {
+  cursor: not-allowed;
+  color: #ccc;
+}
+
+.cart .cart-con .item .tab-number .goods-number .number {
+  border: 0;
+  width: 40px;
+  height: 30px;
+  text-align: center;
+  font-family: arial;
+  vertical-align: top;
+  background: transparent;
+}
+
+.cart .cart-con .item .tab-total {
+  color: #e1251b;
+  font-weight: 600;
+  font-family: verdana;
+}
+
+.cart .cart-con .item .tab-action .action-a {
+  display: block;
+  -moz-transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  transition: all 0.2s;
+}
+
+.cart .cart-con .item .tab-action .collect {
+  margin-bottom: 5px;
+}
+
+.cart .cart-con .item .tab-action .del {
+  color: #999;
+}
+
+.cart .cart-con .item .tab-action .action-a:hover {
+  color: #e1251b;
+}
+
+.cart .cart-con .shop-box.invalid .shop-msg .checkbox,
+.cart .cart-con .shop-box.invalid .shop-coupon {
+  display: none;
+}
+
+.cart .cart-con .item.invalid .tab-check .checkbox {
+  display: none;
+}
+
+.cart .cart-con .item.invalid .tab-check .invalid-text {
+  background: #dadada;
+  color: #5f5f5f;
+  margin-left: 20px;
+  text-align: center;
+  border-radius: 1px;
+}
+
+.cart .cart-con .item.invalid .tab-name .name:hover,
+.cart .cart-con .item.invalid .tab-name .sku,
+.cart .cart-con .item.invalid .tab-price,
+.cart .cart-con .item.invalid .tab-total {
+  color: #ccc;
+}
+
+/* 购物车列表 end */
+
+/* 结算 */
+
+.cart .cart-bottom {
+  display: flex;
+  border: 1px solid #eee;
+  margin-top: 30px;
+  align-items: center;
+}
+
+.cart .cart-bottom .total-box {
+  flex: 1;
+  display: flex;
+}
+.cart .cart-bottom .total-box .check-all {
+  margin-left: 16px;
+  height: 14px;
+  line-height: 14px;
+  cursor: pointer;
+}
+
+.cart .cart-bottom .total-box .check-all .text {
+  display: inline-block;
+  vertical-align: top;
+  margin-left: 5px;
+}
+
+.cart .cart-bottom .total-box .del-selected,
+.cart .cart-bottom .total-box .clear-invalid {
+  margin-left: 20px;
+  line-height: 14px;
+  display: inline-block;
+  vertical-align: top;
+  -moz-transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  transition: all 0.2s;
+}
+
+.cart .cart-bottom .total-box .del-selected:hover,
+.cart .cart-bottom .total-box .clear-invalid:hover {
+  color: #e1251b;
+}
+
+.cart .cart-bottom .settlement-box {
+  display: flex;
+  position: relative;
+  padding-right: 93px;
+}
+
+.cart .cart-bottom .settlement-box .amount {
+  line-height: 20px;
+  margin-top: 6px;
+}
+
+.cart .cart-bottom .settlement-box .amount .number {
+  font-family: verdana;
+  color: #e1251b;
+  margin: 0 3px;
+}
+
+.cart .cart-bottom .settlement-box .price-box {
+  height: 44px;
+  line-height: 20px;
+  margin: 6px 15px 0;
+}
+
+.cart .cart-bottom .settlement-box .price-box .total-price .text {
+  font-size: 16px;
+  color: #e1251b;
+  font-family: verdana;
+  font-weight: 700;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.cart .cart-bottom .settlement-box .price-box .discount-price {
+  display: block;
+  text-align: right;
+  font-family: verdana;
+}
+
+.cart .cart-bottom .settlement-box .btn {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  display: block;
+  width: 94px;
+  height: 52px;
+  line-height: 52px;
+  color: #fff;
+  text-align: center;
+  font-size: 16px;
+  background: #e1251b;
+  font-weight: 600;
+}
+
+.cart .cart-bottom .settlement-box .btn:hover {
+  opacity: 0.9;
+}
+
+/* 结算 end */
+
+
+
+/* 套装、赠品样式 */
+
+/* 套装提示栏 */
+.combo-msg {
+  display: flex;
+  width: 1200px;
+  padding: 10px 0;
+  box-sizing: border-box;
+  border-left: 1px solid #eee;
+  border-right: 1px solid #eee;
+  align-items: center;
+  text-align: center;
+}
+.combo-info {
+  display: flex;
+  width: 560px;
+  padding-left: 22px;
+  box-sizing: border-box;
+}
+.combo-info .combo-icon {
+  padding: 1px 7px;
+  height: 16px;
+  line-height: 16px;
+  background: #e1251b;
+  color: #fff;
+  position: relative;
+}
+.combo-info .combo-icon::after {
+  position: absolute;
+  left: 0;
+  bottom: -3px;
+  display: block;
+  width: 0;
+  height: 0;
+  content: ' ';
+  font-size: 0;
+  border-top: 3px solid #e1251b;
+  border-right: 6px solid transparent;
+}
+.combo-info .combo-name {
+  margin: 0 10px;
+}
+.combo-info .combo-reduce {
+  color: #e1251b;
+}
+
+.combo-unit-price {
+  width: 140px;
+  font-family: verdana;
+}
+
+.combo-count {
+  width: 150px;
+  margin-left: 40px;
+}
+
+.combo-count .reduce,
+.combo-count .increase {
+  display: inline-block;
+  vertical-align: top;
+  width: 30px;
+  height: 30px;
+  background: #f5f5f5;
+  font-size: 22px;
+  text-align: center;
+  line-height: 26px;
+  color: #999;
+  cursor: pointer;
+  border-radius: 50%;
+  -moz-user-select: none; /*火狐*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10*/
+  -khtml-user-select: none; /*早期浏览器*/
+  user-select: none;
+}
+
+.combo-count .limit {
+  cursor: not-allowed;
+  color: #ccc;
+}
+
+.combo-count .number {
+  border: 0;
+  width: 40px;
+  height: 30px;
+  text-align: center;
+  font-family: arial;
+  vertical-align: top;
+  background: transparent;
+}
+
+.combo-total-price {
+  width: 160px;
+  margin-right: 40px;
+  color: #e1251b;
+  font-weight: 600;
+  font-family: verdana;
+}
+.combo-del-btn {
+  color: #999;
+  cursor: pointer;
+}
+.combo-del-btn:hover {
+  color: #e1251b;
+}
+
+/* 赠品 */
+.gift-con {
+  width: 100%;
+  padding: 10px 0 0 45px;
+  box-sizing: border-box;
+}
+.gift-item {
+  max-width: 468px;
+  margin-bottom: 4px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.gift-item:last-child {
+  margin-bottom: 0;
+}
+.gift-item-name:hover {
+  color: #e1251b;
+}
+
+.gift-item-name .gift-item-sku-name {
+  color: #999;
+  margin-left: 10px;
+}

assets/css/common.css

@@ -0,0 +1,2368 @@
+@charset "UTF-8";
+html {
+    -webkit-text-size-adjust: none;
+    -moz-text-size-adjust: none;
+    -ms-text-size-adjust: none;
+    text-size-adjust: none;
+    /*解决chrome浏览器下字体不能小于12px*/
+}
+
+body {
+    min-width: 1200px;
+    overflow-x: hidden;
+    font-size: 12px;
+    color: #000;
+    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+}
+
+@media (max-width: 1200px) {
+    body {
+        overflow-x: auto;
+    }
+}
+
+a {
+    outline: none;
+    text-decoration: none;
+    color: #000;
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+html {
+    zoom: 1;
+}
+
+html * {
+    outline: 0;
+    zoom: 1;
+}
+
+html button::-moz-focus-inner {
+    border-color: transparent !important;
+}
+
+
+/*设置margin和padding为0*/
+
+html,
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+textarea,
+p,
+blockquote,
+th,
+td {
+    margin: 0;
+    padding: 0;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+fieldset,
+a img {
+    border: 0;
+}
+
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+th,
+var,
+i {
+    font-style: normal;
+    font-weight: normal;
+}
+
+li {
+    list-style: none;
+}
+
+caption,
+th {
+    text-align: left;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: 100%;
+    font-weight: normal;
+}
+
+q:before,
+q:after {
+    content: '';
+}
+
+em,
+i {
+    font-style: normal;
+}
+
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+input[type=date],
+button,
+select,
+input[type=text] {
+    /*去掉苹果的默认UI来渲染按钮 、解决部分手机浏览器对border：none无效办法*/
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: 0;
+}
+
+input:disabled {
+    background-color: #fff;
+    -webkit-text-fill-color: #ccc;
+    -webkit-opacity: 1;
+    color: #ccc;
+    opacity: 1;
+}
+
+input::-webkit-input-placeholder {
+    color: #aaa;
+}
+
+.price {
+    font-family: arial;
+    font-size: 12px;
+    color: #e1251b;
+    display: flex;
+    align-items: baseline;
+}
+
+.price .big {
+    font-size: 16px;
+}
+
+.price .small {
+    font-size: 12px;
+}
+
+.content {
+    width: 1200px;
+    margin: auto;
+}
+.content-en {
+    width: 1380px;
+    margin: auto;
+}
+
+input[type="text"]::-webkit-input-placeholder,
+input[type="password"]::-webkit-input-placeholder {
+    color: #999;
+}
+
+input[type="text"]::-moz-placeholder,
+input[type="password"]::-moz-placeholder {
+    color: #999;
+}
+
+input[type="text"]:-ms-input-placeholder,
+input[type="password"]:-ms-input-placeholder {
+    color: #999;
+}
+
+input[type="text"]::placeholder,
+input[type="password"]::placeholder {
+    color: #999;
+}
+
+
+/* 复选框 */
+
+.checkbox {
+    width: 14px;
+    height: 14px;
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    outline: none;
+    -webkit-appearance: none;
+    background: none;
+    border: none;
+    box-sizing: border-box;
+    cursor: pointer;
+    box-shadow: none;
+}
+
+.checkbox::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: " ";
+    display: block;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+.checkbox.default::before {
+    border: 1px solid #ddd;
+    background: #fff;
+    z-index: 1;
+}
+
+.checkbox.checked::before {
+    border: 0;
+    background: url('../images/icons.png') no-repeat 0 -367px;
+    z-index: 1;
+}
+
+.checkbox.disabled::before {
+    background: #eee;
+    cursor: not-allowed;
+    border: 1px solid #ddd;
+}
+
+
+/* 复选框 end */
+
+
+/* 单选框 */
+
+
+/* .radio {
+    width: 14px;
+    height: 14px;
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    outline: none;
+    -webkit-appearance: none;
+    background: none;
+    border: none;
+    box-sizing: border-box;
+    cursor: pointer;
+    box-shadow: none;
+}
+
+.radio::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: " ";
+    display: block;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+.radio.default::before {
+    border: 1px solid #ddd;
+    background: #fff;
+    z-index: 1;
+}
+
+.radio.checked::before {
+    border: 1px solid #e1251b;
+    z-index: 1;
+}
+
+.radio.checked::after {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    content: " ";
+    display: block;
+    width: 8px;
+    height: 8px;
+}
+
+.radio.disabled::before {
+    background: #eee;
+    cursor: not-allowed;
+    border: 1px solid #ddd;
+} */
+
+
+/* 单选框 end */
+
+
+/* 顶部 */
+
+.top {
+    width: 100%;
+    height: 36px;
+    line-height: 36px;
+    color: #999;
+    background-color: #f7f7f7;
+}
+
+.top .con {
+    width: 1200px;
+    height: 36px;
+    display: flex;
+    margin: auto;
+}
+
+.top .con .left {
+    position: relative;
+    padding-left: 22px;
+    flex: 1;
+    overflow: hidden;
+}
+
+.top .con .left::before {
+    position: absolute;
+    left: 0;
+    top: 11px;
+    display: block;
+    content: ' ';
+    width: 12px;
+    height: 14px;
+    background: url(../images/icons.png) no-repeat;
+}
+
+.top .con .left .item {
+    text-decoration: underline;
+    cursor: pointer;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;
+}
+
+.top .con .left .item:hover {
+    color: #e1251b;
+}
+
+.top .con .right {
+    display: flex;
+}
+
+.top .con .right .item {
+    position: relative;
+}
+
+.top .con .right .item .text {
+    color: #999;
+}
+
+.top .con .right .item .link {
+    margin-right: 10px;
+    position: relative;
+    display: inline-block;
+}
+
+.top .con .right .item .link,
+.top .con .right .item .link .link-a {
+    color: #e1251b;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.top .con .right .item .link .link-a:hover {
+    font-weight: 600;
+}
+
+.top .con .right .item .link .link-name {
+    color: #999;
+    position: relative;
+    padding-right: 18px;
+    padding-left: 2px;
+    display: inline-block;
+    max-width: 70px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.top .con .right .item .link:hover .link-name {
+    color: #e1251b;
+}
+
+.top .con .right .item .link .link-name::before,
+.top .con .right .item .link .link-name::after {
+    position: absolute;
+    right: 3px;
+    display: block;
+    width: 0;
+    height: 0;
+    content: " ";
+    border: 5px solid transparent;
+    border-radius: 2px;
+}
+
+.top .con .right .item .link .link-name::before {
+    top: 16px;
+    border-top: 5px solid #888;
+}
+
+.top .con .right .item .link:hover .link-name::before {
+    top: 16px;
+    border-top: 5px solid #e1251b;
+}
+
+.top .con .right .item .link .link-name::after {
+    top: 15px;
+    border-top: 5px solid #f7f7f7;
+}
+
+.top .con .right .item .link .link-select {
+    position: absolute;
+    width: 70px;
+    padding: 5px 3px;
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    -moz-transform: translateX(-50%);
+    transform: translateX(-50%);
+    top: 36px;
+    background: #fff;
+    box-shadow: 0 0 5px rgba(0, 0, 0, .15);
+    z-index: 91;
+    display: none;
+}
+
+.top .con .right .item .link:hover .link-select {
+    display: block;
+}
+
+.top .con .right .item .link .link-select::before,
+.top .con .right .item .link .link-select::after {
+    position: absolute;
+    top: -11px;
+    left: 50%;
+    transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+    display: block;
+    content: " ";
+    width: 0;
+    height: 0;
+    border: 5px solid transparent;
+    border-bottom: 6px solid #dedede;
+}
+
+.top .con .right .item .link .link-select::after {
+    top: -10px;
+    border-bottom: 6px solid #fff;
+}
+
+.top .con .right .item .link .link-select .link-item {
+    display: block;
+    text-align: center;
+    color: #999;
+    line-height: 12px;
+    padding: 8px 0;
+}
+
+.top .con .right .item .link .link-select .link-item:hover {
+    color: #e1251b;
+}
+
+.top .con .right .item .link {
+    margin-right: 10px;
+}
+
+.top .con .right .item .link,
+.top .con .right .item .link .link-a {
+    color: #e1251b;
+    cursor: pointer;
+}
+
+.top .con .right .item .link .link-a:hover {
+    font-weight: 600;
+}
+
+.top .con .right .item .item-a,
+.top .con .right .item .item-b {
+    padding: 0 10px 0 11px;
+    position: relative;
+    z-index: 90;
+    display: block;
+    color: #999;
+}
+
+.top .con .right .item .item-a::after,
+.top .con .right .item .item-b::after {
+    position: absolute;
+    top: 10px;
+    left: 0;
+    display: block;
+    content: ' ';
+    width: 1px;
+    height: 16px;
+    background: #ccc;
+}
+
+.top .con .right .item:hover .item-a,
+.top .con .right .item:hover .item-b {
+    color: #e1251b;
+}
+
+.top .con .right .item.mobile .item-a {
+    padding-left: 24px;
+}
+
+.top .con .right .item.mobile .item-a::before {
+    position: absolute;
+    left: 10px;
+    top: 11px;
+    display: block;
+    content: ' ';
+    width: 12px;
+    height: 14px;
+    background: url(../images/icons.png) no-repeat 0 -19px;
+}
+
+.top .con .right .item.mobile:hover .item-a::before {
+    background-position: -14px -19px;
+}
+
+.top .con .right .item.mobile .mobile-select.option {
+    width: 75px;
+    height: auto;
+    text-align: center;
+    line-height: 1.5em;
+    padding: 10px 0;
+}
+.top .con .right .item.mobile .mobile-select.option .text {
+    margin: 0;
+    cursor: pointer;
+    color: #999;
+    line-height: 1.5em;
+}
+
+.top .con .right .item.mobile .mobile-select {
+    position: absolute;
+    display: none;
+    top: 36px;
+    left: 50%;
+    transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+    transition: height .3s;
+    -webkit-transition: height .3s;
+    width: 120px;
+    height: 145px;
+    box-sizing: border-box;
+    background-color: #fff;
+    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+    z-index: 91;
+}
+
+.top .con .right .item.mobile .mobile-select .code {
+    width: 100px;
+    height: 100px;
+    font-size: 0;
+    margin: 10px auto 0;
+}
+
+.top .con .right .item.mobile .mobile-select .code img {
+    width: 100%;
+    height: 100%;
+}
+
+.top .con .right .item.mobile .mobile-select .text {
+    font-size: 12px;
+    line-height: 20px;
+    text-align: center;
+    color: #000;
+    margin-top: 7px;
+}
+
+.top .con .right .item.mobile .mobile-select::before,
+.top .con .right .item.mobile .mobile-select::after {
+    position: absolute;
+    top: -11px;
+    left: 50%;
+    transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+    display: block;
+    content: ' ';
+    width: 0;
+    height: 0;
+    border: 5px solid transparent;
+    border-bottom: 6px solid #dedede;
+}
+
+.top .con .right .item.mobile .mobile-select::after {
+    top: -10px;
+    border-bottom: 6px solid #fff;
+}
+
+.top .con .right .item.mobile:hover .mobile-select {
+    display: block;
+}
+
+.top .con .right .item.top-cart .item-a {
+    padding-left: 32px;
+}
+
+.top .con .right .item.top-cart .item-a::before {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    display: block;
+    content: ' ';
+    width: 17px;
+    height: 15px;
+    background: url(../images/icons.png) no-repeat 0 -38px;
+}
+
+.top .con .right .item.top-cart:hover .item-a::before {
+    background-position: -22px -38px;
+}
+
+.top .con .right .item.top-cart .item-a .number {
+    font-family: arial;
+}
+
+.top .con .right .item.top-cart.top-cart-empty:hover .item-a {
+    background: #fff;
+}
+
+.top .con .right .item.top-cart.top-cart-empty .no-goods {
+    position: absolute;
+    right: 0;
+    top: 36px;
+    z-index: 89;
+    width: 316px;
+    height: 0;
+    text-align: center;
+    color: #000;
+    background: #fff;
+    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+    -webkit-transition: height .3s;
+    transition: height .3s;
+    overflow: hidden;
+}
+
+.top .con .right .item.top-cart.top-cart-empty:hover .no-goods {
+    height: 94px;
+    line-height: 94px;
+}
+
+.top .con .right .item.top-cart.top-cart-on .item-a {
+    background: #e1251b;
+}
+
+.top .con .right .item.top-cart.top-cart-empty:hover .item-a::after,
+.top .con .right .item.top-cart.top-cart-on .item-a::after {
+    width: 0;
+}
+
+.top .con .right .item.top-cart.top-cart-on .item-a {
+    color: #fff;
+    height: 36px;
+}
+
+.top .con .right .item.top-cart.top-cart-on .item-a::before {
+    background-position: -44px -38px;
+}
+
+.top .con .right .item.top-cart .cart-select {
+    position: absolute;
+    right: 0;
+    top: 36px;
+    z-index: 89;
+    width: 316px;
+    height: auto;
+    max-height: 0;
+    color: #000;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+    transition: max-height .3s;
+    -webkit-transition: max-height .3s;
+    overflow: hidden;
+}
+
+.top .con .right .item.top-cart .cart-select .cart-list {
+    padding: 0 20px;
+    max-height: 324px;
+    overflow-y: auto;
+}
+
+.top .con .right .item.top-cart .cart-select .cart-list .list-item {
+    display: flex;
+    padding: 10px 0;
+    border-bottom: 1px solid #eee;
+}
+
+.top .con .right .item.top-cart .cart-select .cart-list .list-item:last-child {
+    border: 0;
+}
+
+.top .con .right .item.top-cart .cart-select .cart-list .list-item .goods-img {
+    width: 60px;
+    height: 60px;
+    font-size: 0;
+    cursor: pointer;
+}
+
+.top .con .right .item.top-cart .cart-select .cart-list .list-item .goods-img img {
+    width: 100%;
+    height: 100%;
+}
+
+.top .con .right .item.top-cart .cart-select .cart-list .list-item .goods-msg {
+    margin-left: 10px;
+    line-height: 30px;
+    flex: 1;
+}
+
+.top .con .right .item.top-cart .cart-select .cart-list .list-item .goods-msg .name {
+    max-width: 175px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.top .con .right .item.top-cart .cart-select .cart-list .list-item:hover .goods-msg .name {
+    color: #e1251b;
+}
+
+.top .con .right .item.top-cart .cart-select .cart-list .list-item .goods-msg .info {
+    display: flex;
+}
+
+.top .con .right .item.top-cart .cart-select .cart-list .list-item .goods-msg .info .price {
+    color: #000;
+}
+
+.top .con .right .item.top-cart .cart-select .cart-list .list-item .goods-msg .info .number {
+    margin-left: 10px;
+    color: #999;
+    font-family: arial;
+}
+
+.top .con .right .item.top-cart .cart-select .cart-list .list-item .del {
+    width: 14px;
+    height: 14px;
+    background: url(../images/icons.png) no-repeat;
+    background-position: 0 -415px;
+    margin-top: 23px;
+    cursor: pointer;
+}
+
+.top .con .right .item.top-cart .cart-select .list-total {
+    padding: 15px 20px;
+    background: #fafafa;
+    display: flex;
+}
+
+.top .con .right .item.top-cart .cart-select .list-total .total-msg {
+    flex: 1;
+}
+
+.top .con .right .item.top-cart .cart-select .list-total .total-msg .total-number {
+    height: 16px;
+    line-height: 16px;
+}
+
+.top .con .right .item.top-cart .cart-select .list-total .total-msg .price {
+    height: 20px;
+    line-height: 20px;
+    margin-top: 4px;
+}
+
+.top .con .right .item.top-cart .cart-select .list-total .total-btn {
+    width: 130px;
+    height: 40px;
+    line-height: 40px;
+    font-size: 14px;
+    text-align: center;
+    color: #f5f5f5;
+    background: #e1251b;
+    cursor: pointer;
+}
+
+.top .con .right .item.top-cart.top-cart-on:hover .item-a {
+    background: #fff;
+    color: #e1251b;
+}
+
+.top .con .right .item.top-cart.top-cart-on:hover .item-a::before {
+    background-position: -22px -38px;
+}
+
+.top .con .right .item.top-cart.top-cart-on:hover .cart-select {
+    max-height: 393px;
+}
+
+
+/* 顶部 end  */
+
+
+/* 头部 */
+
+.head {
+    background: #fff;
+    width: 100%;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .05);
+}
+
+.head .content {
+    height: 94px;
+    display: flex;
+    justify-content: space-between;
+    -webkit-justify-content: space-between;
+    padding-top: 20px;
+    box-sizing: border-box;
+}
+
+.head .logo {
+    height: 54px;
+    display: flex;
+    cursor: pointer;
+}
+
+.head .logo .logo-img {
+    display: block;
+    width: 190px;
+    height: 48px;
+    /*background: url(../images/logo.png) no-repeat;*/
+    background-size: 100%;
+}
+
+.head .logo .name {
+    margin-left: 10px;
+}
+
+.head .logo .name .cn {
+    font-size: 16px;
+    font-weight: 700;
+    display: block;
+    line-height: 20px;
+    margin-top: 7px;
+}
+
+.head .logo .name .en {
+    font-size: 12px;
+    color: #ccc;
+    display: block;
+    line-height: 16px;
+    margin-top: 5px;
+}
+
+.head .menu {
+    display: flex;
+}
+
+.head .menu .item {
+    position: relative;
+    display: block;
+    line-height: 52px;
+    height: 52px;
+    padding: 0 20px;
+    font-size: 14px;
+}
+.head .menu-en .item{
+    padding: 0 15px;
+}
+
+.head .menu .item.item-on,
+.head .menu .item:hover {
+    color: #e1251b;
+}
+
+.head .search {
+    position: relative;
+    width: 320px;
+    height: 38px;
+    margin-top: 8px;
+}
+
+.head .search .search-input-box {
+    height: 38px;
+    border: 2px solid #e1251b;
+    width: 100%;
+    box-sizing: border-box;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 10;
+}
+
+.head .search .search-input-box .search-input {
+    display: inline-block;
+    border: 0;
+    width: 51%;
+    height: 99%;
+    line-height: 34px;
+    padding: 0 10px;
+}
+
+.head .search .search-input-box .select-search {
+    display: inline-block;
+    width: 12%;
+    line-height: 34px;
+    text-align: center;
+    cursor: pointer;
+    color: #e1251b;
+}
+
+.head .search .search-input-box .select-list {
+    position: absolute;
+    right: 89px;
+    top: 34px;
+    border: 2px solid #e1251b;
+    background-color: #fff;
+}
+
+.head .search .search-input-box .select-list .select-item {
+    padding: 0 8px;
+    line-height: 2.5em;
+}
+
+.head .search .search-btn {
+    width: 93px;
+    height: 38px;
+    padding-left: 7px;
+    font-size: 14px;
+    letter-spacing: 5px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background: #e1251b;
+    border: 0;
+    color: #fff;
+    cursor: pointer;
+    z-index: 11;
+}
+
+.head .search .search-btn:hover {
+    opacity: 0.9;
+}
+
+
+/* 头部 end */
+
+
+/* 底部 */
+
+.foot {
+    width: 100%;
+    background: #222;
+    color: #666;
+}
+
+.foot .foot-box {
+    width: 1200px;
+    margin: auto;
+    display: flex;
+    padding: 40px 0 30px;
+}
+
+.foot .foot-box .company-msg {
+    padding: 0 60px;
+    border-right: 1px solid #333;
+}
+
+.foot .foot-box .company-msg .img {
+    display: block;
+    margin: auto;
+    /* width: 54px; */
+    height: 54px;
+    /*background: url(../images/logo.png) no-repeat;*/
+    object-fit: contain;
+    background-size: 100%;
+}
+
+.foot .foot-box .company-msg .name {
+    color: #00a0e9;
+    font-size: 14px;
+    margin: 5px 0 10px;
+    text-align: center;
+}
+
+.foot .foot-box .company-msg .web {
+    line-height: 20px;
+}
+
+.foot .foot-box .right {
+    display: flex;
+    margin-left: 60px;
+    padding-top: 5px;
+}
+
+.foot .foot-box .right .item {
+    width: 100px;
+    margin-right: 80px;
+}
+
+.foot .foot-box .right .item:last-child {
+    margin-right: 0;
+}
+
+.foot .foot-box .right .item.official-code {
+    text-align: center;
+}
+
+.foot .foot-box .right .item.official-code .img {
+    width: 100px;
+    height: 100px;
+    font-size: 0;
+}
+
+.foot .foot-box .right .item.official-code .img img {
+    width: 100%;
+    height: 100%;
+}
+
+.foot .foot-box .right .item.official-code .text {
+    margin-top: 5px
+}
+
+.foot .foot-box .right .item.service .tit {
+    font-size: 14px;
+    margin-top: 3px;
+    margin-bottom: 20px;
+}
+
+.foot .foot-box .right .item.service .con {
+    /* margin-top: 10px;
+    line-height: 30px; */
+}
+
+.foot .foot-box .right .item.service .con .text {
+    margin-top: 16px;
+    /* line-height: 30px; */
+}
+
+.foot .copyright {
+    width: 100%;
+    background: #1b1b1b;
+    padding: 10px 0;
+    text-align: center;
+}
+
+
+/* 底部 end */
+
+
+/* 分类 */
+
+.categroy {
+    width: 110px;
+    left: 50%;
+    top: 660px;
+    margin-left: -732px;
+    z-index: 98;
+    background: #fff;
+    border-radius: 3px;
+    position: absolute;
+    display: block;
+    opacity: 1;
+    will-change: transform;
+    transform: translateZ(0);
+    border: 1px solid #eee;
+}
+
+.categroy.shorttop {
+    top: 182px;
+}
+
+@media (max-width: 1440px) {
+    .categroy {
+        left: 0;
+        margin-left: 0;
+    }
+}
+
+.categroy .tit {
+    height: 40px;
+    line-height: 40px;
+    background: #f9f9f9;
+    text-align: center;
+    font-size: 14px;
+    border-bottom: 1px solid #eee;
+    font-weight: 600;
+}
+
+.categroy .con {
+    text-align: center;
+    padding-bottom: 15px;
+    position: relative;
+}
+
+/* .categroy .con::after {
+    display: block;
+    content: ' ';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: auto;
+    height: 1px;
+    margin: 0 15px;
+    background: #eee;
+} */
+
+.categroy .con .item {
+    line-height: 24px;
+    padding-top: 15px;
+    cursor: pointer;
+    transition: all .2s;
+    -webkit-transition: all .2s;
+}
+
+.categroy .con .item:hover .name {
+    color: #e1251b;
+}
+
+.categroy .con .item .icon {
+    display: inline-block;
+    vertical-align: top;
+    width: 24px;
+    height: 24px;
+    font-size: 0;
+}
+
+.categroy .con .item .icon img {
+    width: 100%;
+    height: 100%;
+}
+
+.categroy .con .item .name {
+    display: inline-block;
+    width: 50%;
+    height: 24px;
+    vertical-align: top;
+    margin-left: 5px;
+    overflow:hidden;
+	text-overflow:ellipsis;
+	white-space:nowrap
+}
+
+.categroy .con .item .select {
+    position: absolute;
+    left: 130px;
+    top: -44px;
+    z-index: 24;
+    min-height: 510px;
+    border: 1px solid #eee;
+    background: #ffffff;
+    opacity: 0.94;
+    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
+    flex-wrap: wrap;
+    width: 1202px;
+    align-items: flex-start;
+    align-content: flex-start;
+    display: flex;
+    visibility: hidden;
+    box-sizing: border-box;
+    border-radius: 3px;
+}
+
+.categroy .con .item .select .select-title {
+    display: block;
+    font-size: 14px;
+    text-align: left;
+    padding: 20px 20px 0;
+    font-weight: 600;
+}
+
+.categroy .con .item .select::before {
+    position: absolute;
+    left: -20px;
+    top: 0;
+    width: 20px;
+    height: 100%;
+    display: block;
+    content: ' ';
+    background: transparent;
+}
+
+.categroy .con .item:hover .select {
+    visibility: visible;
+}
+
+.categroy .con .item .select-item-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    width: 1202px;
+}
+
+.categroy .con .item .select .select-item {
+    padding: 10px 20px;
+    text-align: left;
+    height: 60px;
+    display: flex;
+}
+
+.categroy .con .item .select .select-item .item-img {
+    display: inline-block;
+    width: 60px;
+    height: 60px;
+    font-size: 0;
+    margin-right: 10px;
+    vertical-align: top;
+}
+
+.categroy .con .item .select .select-item .item-img img {
+    width: 100%;
+    height: 100%;
+    vertical-align: top;
+}
+
+.categroy .con .item .select .select-item .item-name {
+    display: inline-block;
+    height: 60px;
+    line-height: 60px;
+    width: 90px;
+    transition: color .2s;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.categroy .con .item .select .select-item:hover .item-name {
+    color: #e1251b;
+}
+
+.categroy .phone-code {
+    padding: 15px 0;
+    text-align: center;
+}
+
+.categroy .phone-code .code {
+    width: 100px;
+    height: 100px;
+    font-size: 0;
+    margin: auto;
+}
+
+.categroy .phone-code .code img {
+    width: 100%;
+    height: 100%;
+}
+
+.categroy .phone-code .text {
+    margin-top: 5px;
+    line-height: 15px;
+}
+
+
+/* 分类 end */
+
+
+/* 滑动时的头部 */
+
+.head-scroll {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 60px;
+    background: #fff;
+    animation: hdnav2-show .3s;
+    -webkit-animation: hdnav2-show .3s;
+    -moz-animation: hdnav2-show .3s;
+    -o-animation: hdnav2-show .3s;
+    z-index: 100;
+    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .05);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, .05);
+}
+
+.head-scroll .content {
+    display: flex;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+    align-items: center;
+    height: 60px;
+}
+
+.head-scroll .logo {
+    height: 40px;
+    display: flex;
+    margin-top: -8px;
+    cursor: pointer;
+}
+
+.head-scroll .logo .logo-img {
+    display: block;
+    width: 190px;
+    height: 48px;
+    font-size: 0;
+    /*background: url(../images/logo.png) no-repeat;*/
+    background-size: 100%;
+}
+
+.head-scroll .logo .name {
+    line-height: 15px;
+    margin-left: 10px;
+    margin-top: 5px;
+}
+
+.head-scroll .logo .name .cn {
+    display: block;
+    font-size: 14px;
+    letter-spacing: 1px;
+    font-weight: 600;
+}
+
+.head-scroll .logo .name .en {
+    color: #ccc;
+    margin-top: 3px;
+    display: block;
+}
+
+.head-scroll .menu {
+    display: flex;
+}
+
+.head-scroll .menu .item {
+    padding: 0 25px;
+    font-size: 14px;
+}
+
+.head-scroll .menu-en .item {
+    padding: 0 10px;
+    font-size: 12px;
+}
+
+.head-scroll .menu .item:hover,
+.head-scroll .menu .item.item-on {
+    color: #e1251b;
+}
+
+.head-scroll .right {
+    display: flex;
+    align-items: center;
+}
+
+.head-scroll .search {
+    position: relative;
+    height: 38px;
+}
+
+.head-scroll .search .search-input {
+    width: 220px;
+    height: 38px;
+    border: 0;
+    border-bottom: 1px solid #e1251b;
+    padding: 0 48px 0 10px;
+    box-sizing: border-box;
+}
+
+.head-scroll .search .search-btn {
+    width: 36px;
+    height: 36px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    border: 0;
+    cursor: pointer;
+    z-index: 11;
+    font-size: 0;
+    background: url(../images/icons.png) no-repeat -19px -58px #ffff;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;
+    border: 11px solid #fff;
+}
+
+.head-scroll .search .search-btn:hover {
+    opacity: 0.9;
+}
+
+.head-scroll .scroll-cart {
+    position: relative;
+    margin-left: 30px;
+    margin-right: 15px;
+    width: 17px;
+    height: 15px;
+    background: url(../images/icons.png) no-repeat -22px -38px;
+    cursor: pointer;
+    border-top: 8px solid #fff;
+    border-bottom: 7px solid #fff;
+    border-left: 6px solid #fff;
+    border-right: 7px solid #fff;
+}
+
+.head-scroll .scroll-cart .number {
+    position: absolute;
+    top: -9px;
+    left: 5px;
+    font-size: 12px;
+    font-family: arial;
+    padding: 0 5px;
+    background: #e1251b;
+    color: #fff;
+    height: 16px;
+    line-height: 16px;
+    min-width: 16px;
+    border-radius: 30px;
+    margin-left: 10px;
+    text-align: center;
+    box-sizing: border-box;
+}
+
+
+/* 滑动时的头部 */
+
+
+/* 产品列表 */
+
+.goods-list {
+    background: #fff;
+}
+
+.goods-list .list-tit {
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+}
+
+.goods-list .list-tit .text {
+    flex: 1;
+}
+
+.goods-list .list-tit .text .tit {
+    font-size: 24px;
+}
+
+.goods-list .list-tit .text .description {
+    font-size: 12px;
+    margin-left: 10px;
+    color: #999;
+}
+
+.goods-list .list-tit .view-more {
+    position: relative;
+    color: #999;
+    font-size: 12px;
+    height: 19px;
+    line-height: 19px;
+    margin-top: 9px;
+}
+
+.goods-list .list-tit .view-more .arrow {
+    display: inline-block;
+    font-family: Consolas;
+    margin-left: 3px;
+}
+
+.goods-list .list-tit .view-more:hover {
+    color: #e1251b;
+}
+
+.goods-list .list-con {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.goods-list .list-con .item {
+    position: relative;
+    width: 285px;
+    margin-top: 20px;
+    margin-right: 20px;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;
+    cursor: pointer;
+}
+
+.goods-list .list-con .item:hover {
+    opacity: 0.8;
+}
+
+.goods-list .list-con .item:nth-child(4n) {
+    margin-right: 0;
+}
+
+.goods-list .list-con .item .goods-img {
+    width: 285px;
+    height: 285px;
+    line-height: 285px;
+    text-align: center;
+    font-size: 0;
+}
+
+.goods-list .list-con .item .goods-img img {
+    max-width: 80%;
+    max-height: 80%;
+    vertical-align: middle;
+    object-fit: scale-down;
+}
+
+.goods-list .list-con .item .goods-msg {
+    text-align: center;
+    padding: 15px 10px 0;
+}
+
+.goods-list .list-con .item .goods-msg .goods-name {
+    height: 16px;
+    line-height: 16px;
+    font-size: 14px;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.goods-list .list-con .item .goods-msg .goods-price {
+    display: flex;
+    justify-content: center;
+    height: 16px;
+    line-height: 16px;
+    margin-top: 10px;
+    overflow: hidden;
+}
+
+.goods-list .list-con .item .goods-msg .goods-price .old-price {
+    margin-left: 10px;
+    color: #999;
+    font-family: arial;
+    text-decoration: line-through;
+    height: 12px;
+    line-height: 12px;
+    margin-top: 3px;
+}
+
+
+/* 产品列表 end */
+
+
+/* 优惠团购 */
+
+.group-list .group-number {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    padding: 5px 12px;
+    background: #e1251b;
+    color: #fff;
+    border-radius: 30px;
+    line-height: 1;
+}
+
+
+/* 优惠团购 end */
+
+
+/* 优选好店 */
+
+.shop-list .list-con .item {
+    display: flex;
+    padding: 15px;
+    width: 253px;
+    height: 122px;
+    border: 1px solid #eee;
+    cursor: auto;
+}
+
+.shop-list .list-con .item .shop-img {
+    width: 120px;
+    height: 120px;
+    line-height: 120px;
+    font-size: 0;
+    text-align: center;
+}
+
+.shop-list .list-con .item .shop-img img {
+    max-width: 100%;
+    max-height: 100%;
+    vertical-align: middle;
+}
+
+.shop-list .list-con .item .shop-msg {
+    margin-left: 10px;
+    margin-top: 15px;
+}
+
+.shop-list .list-con .item .shop-msg .shop-name {
+    max-width: 120px;
+    height: 20px;
+    line-height: 17px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 14px;
+}
+
+.shop-list .list-con .item .shop-msg .focus-number {
+    height: 12px;
+    line-height: 12px;
+    margin-top: 10px;
+    color: #999;
+}
+
+.shop-list .list-con .item .shop-msg .go-shop {
+    display: block;
+    margin-top: 30px;
+    background: #e1251b;
+    width: 80px;
+    height: 24px;
+    line-height: 24px;
+    border-radius: 30px;
+    text-align: center;
+    color: #fff;
+    padding-left: 3px;
+    cursor: pointer;
+}
+
+.shop-list .list-con .item .shop-msg .go-shop .arrow {
+    display: inline-block;
+    font-family: Consolas;
+    margin-left: 3px;
+}
+
+
+/* 优选好店 end */
+
+
+/* 面包屑 */
+
+.crumbs {
+    font-size: 12px;
+    line-height: 1;
+    padding: 23px 0 20px;
+}
+
+.crumbs .item-a:hover {
+    text-decoration: underline;
+}
+
+.crumbs .arrow {
+    font-family: Consolas;
+    margin: 0 2px;
+}
+
+.crumbs .item-span {
+    color: #999;
+}
+
+
+/* 面包屑 end */
+
+
+/* 页码 */
+
+.pages {
+    margin-top: 30px;
+    display: flex;
+    justify-content: flex-end;
+    text-align: center;
+}
+
+.pages .item {
+    margin-left: 5px;
+    display: block;
+    padding: 3px 7px;
+    min-width: 18px;
+    height: 24px;
+    line-height: 24px;
+    word-break: keep-all;
+    border: 1px solid #eee;
+    font-size: 12px;
+    font-family: arial;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;
+    background: #fff;
+}
+
+.pages .item:hover {
+    color: #e1251b;
+}
+
+.pages .cur,
+.pages .cur:hover {
+    color: #fff;
+    background: #e1251b;
+    border-color: #e1251b;
+}
+
+.pages .ellipsis {
+    display: block;
+    width: 30px;
+    height: 32px;
+    line-height: 24px;
+    text-align: center;
+    margin-right: -5px;
+}
+
+.pages .go-page {
+    height: 32px;
+    line-height: 30px;
+    margin-left: 10px;
+}
+
+.pages .go-page .page-input {
+    width: 28px;
+    height: 24px;
+    padding: 3px 5px;
+    margin: 0 5px;
+    text-align: center;
+    border: 0;
+    border: 1px solid #eee;
+    vertical-align: top;
+}
+
+.pages .go-page .page-btn {
+    margin-left: 5px;
+    display: inline-block;
+    padding: 3px 5px;
+    border: 1px solid #eee;
+    min-width: 28px;
+    height: 24px;
+    line-height: 24px;
+    word-break: keep-all;
+    font-size: 12px;
+    font-family: arial;
+    vertical-align: top;
+    -moz-transition: all 0.1s;
+    -webkit-transition: all 0.1s;
+    -o-transition: all 0.1s;
+    transition: all 0.1s;
+    background: #fff;
+}
+
+.pages .go-page .page-btn:hover {
+    color: #e1251b;
+}
+
+.pages .item.prev,
+.pages .item.next {
+    padding: 3px 13px;
+}
+
+.pages .total-num {
+    height: 32px;
+    line-height: 30px;
+    margin-left: 10px;
+}
+
+.pages .total-num .num {
+    margin: 0 3px;
+    font-family: arial;
+}
+
+.pages .item.default,
+.pages .item.default:hover {
+    color: #d2d2d2;
+    cursor: not-allowed;
+    background: #fff;
+    border-color: #eee;
+}
+
+
+/* 页码 end */
+
+
+/* 弹窗 */
+
+.popup-mask {
+    position: fixed;
+    left: 0px;
+    top: 0px;
+    /* z-index: 1998; */
+    z-index: 1997;
+    background-color: rgb(0, 0, 0, .15);
+    width: 100%;
+    height: 100%;
+}
+
+.popup-box {
+    position: fixed;
+    /* z-index: 10000; */
+    z-index: 1998;
+    top: 40%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    -o-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    border: 4px solid rgba(0, 0, 0, .05);
+}
+.logisticsCompany {
+    top: 200px;
+}
+.popup-box {
+    position: fixed;
+    /* z-index: 10000; */
+    z-index: 1998;
+    top: 40%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    -o-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    border: 4px solid rgba(0, 0, 0, .05);
+}
+
+.popup-box .tit {
+    background: #f9f9f9;
+    padding: 10px;
+    display: flex;
+    height: 14px;
+    line-height: 14px;
+}
+
+.popup-box .tit .text {
+    color: #999;
+    font-size: 14px;
+    flex: 1;
+}
+
+.popup-box .tit .close {
+    width: 12px;
+    height: 12px;
+    margin-top: 1px;
+    background: url(../images/icons.png) no-repeat;
+    background-position: 0 -232px;
+    cursor: pointer;
+}
+
+.popup-box .con {
+    padding: 20px;
+    background: #fff;
+    min-width: 450px;
+    min-height: 100px;
+}
+
+
+/* 提示性弹窗 */
+
+.popup-box .con .tip {
+    padding: 10px 20px;
+    text-align: center;
+}
+
+.popup-box .con .tip .tip-icon {
+    display: inline-block;
+    vertical-align: top;
+    width: 32px;
+    height: 32px;
+    background: url(../images/icons.png) no-repeat;
+}
+
+.popup-box .con .tip .tip-icon.success {
+    background-position: 0 -476px;
+}
+
+.popup-box .con .tip .tip-icon.fail {
+    background-position: -37px -476px;
+}
+
+.popup-box .con .tip .tip-icon.warning {
+    background-position: -74px -476px;
+}
+
+.popup-box .con .tip .tip-info {
+    display: inline-block;
+    vertical-align: top;
+    margin-left: 20px;
+    text-align: left;
+}
+
+.popup-box .con .tip .tip-info .result {
+    font-size: 14px;
+    height: 14px;
+    line-height: 14px;
+}
+
+.popup-box .con .tip .tip-info .result .number {
+    color: #e1251b;
+    font-family: Verdana;
+}
+
+.popup-box .con .tip .tip-info .date {
+    font-family: arial;
+    color: #999;
+    margin-top: 10px;
+}
+
+.popup-box .con .tip .tip-info .btns {
+    margin-top: 10px;
+    color: #999;
+    display: flex;
+}
+
+.popup-box .con .tip .tip-info .btns .btn {
+    color: #005ea7;
+}
+
+.popup-box .con .tip .tip-info .btns .btn .arrow {
+    font-family: Consolas;
+    margin-left: 3px;
+}
+
+.popup-box .con .tip .tip-info .btns .btn-r,
+.popup-box .con .tip .tip-info .btns .btn-g {
+    min-width: 72px;
+    text-align: center;
+    height: 26px;
+    line-height: 26px;
+    border-radius: 26px;
+    border: 1px solid #e1251b;
+    background: #e1251b;
+    color: #fff;
+    box-sizing: border-box;
+    padding: 0 8px;
+    margin-top: 10px;
+}
+
+.popup-box .con .tip .tip-info .btns .btn-r:hover {
+    opacity: 0.9;
+}
+
+.popup-box .con .tip .tip-info .btns .btn-g {
+    background: #f9f9f9;
+    border-color: #ddd;
+    color: #000;
+    margin-left: 15px;
+}
+
+.popup-box .con .tip .tip-info .btns .btn-g:hover {
+    background: #fff;
+}
+
+
+/* 提示性弹窗 */
+
+
+/* 编辑性弹窗 */
+
+.popup-box .con .edit {
+    padding: 10px 10px 10px 10px;
+}
+
+.popup-box .con .edit .item {
+    display: flex;
+    margin-top: 20px;
+    position: relative;
+}
+
+.popup-box .con .edit .item:first-child {
+    margin-top: 0;
+}
+
+.popup-box .con .edit .item .label {
+    width: 80px;
+    height: 32px;
+    line-height: 32px;
+}
+
+.popup-box .con .edit .item .text-box .input {
+    border: 1px solid #eee;
+    padding: 5px;
+    height: 20px;
+    width: 300px;
+}
+
+.popup-box .con .edit .item .text-box .area-box {
+    display: flex;
+}
+
+.popup-box .con .edit .item .text-box .area-box .area {
+    border: 1px solid #eee;
+    padding: 5px;
+    height: 20px;
+    line-height: 20px;
+    width: 85px;
+    margin-right: 10px;
+    position: relative;
+}
+
+.popup-box .con .edit .item .text-box .area-box .area:last-child {
+    margin-right: 0;
+}
+
+.popup-box .con .edit .item .text-box .area-box .area::before {
+    position: absolute;
+    right: 10px;
+    top: 12px;
+    display: block;
+    width: 0;
+    height: 0;
+    content: " ";
+    font-size: 0;
+    border: 5px solid transparent;
+    border-top: 5px solid #bcbcbc;
+}
+
+.popup-box .con .edit .item .label-btn {
+    width: 80px;
+}
+
+.popup-box .con .edit .item .btn-r {
+    padding: 5px 15px;
+    background: #e1251b;
+    color: #fff;
+    border-radius: 2px;
+}
+
+.popup-box .con .edit .item .text-box .btn-r:hover {
+    opacity: 0.9;
+}
+
+.popup-box .con .edit .item .btn-g {
+    padding: 4px 14px;
+    background: #f9f9f9;
+    border-radius: 2px;
+    margin-left: 12px;
+    border: 1px solid #ddd;
+}
+
+.popup-box .con .edit .item .btn-g:hover {
+    background: #fff;
+}
+
+.popup-box .con .edit .item .text-box .error-text {
+    color: #e1251b;
+    padding-left: 19px;
+    position: relative;
+    height: 14px;
+    line-height: 14px;
+    margin-top: 5px;
+    margin-left: 5px;
+    display: block;
+}
+
+.popup-box .con .edit .item .text-box .error-text::before {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: block;
+    width: 14px;
+    height: 14px;
+    content: " ";
+    font-size: 0;
+    background: url(../images/icons.png) no-repeat -77px -517px;
+}
+
+.popup-box .con .edit .item.error .text-box .error-text {
+    display: block;
+}
+
+/* 修改退款金额 */
+.popup-box .con.modify-amount {
+    position: relative;
+    max-width: 260px;
+}
+.popup-box .con.modify-amount .int-box {
+    display: block;
+    width: 90%;
+    margin: 0 auto;
+}
+.popup-box .con.modify-amount .int-box .int {
+    display: block;
+    width: 100%;
+    border: 1px solid #eee;
+    line-height: 1em;
+    padding: 10px;
+    box-sizing: border-box;
+}
+.popup-box .con.modify-amount .max-amount {
+    margin-top: 5px;
+    color: #888;
+}
+.popup-box .con.modify-amount .foot-btn {
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    padding: 20px;
+    box-sizing: border-box;
+}
+.popup-box .con.modify-amount .foot-btn .confirm {
+    display: inline-block;  
+    padding: 8px 20px;
+    background: #e1251b;
+    color: #fff;
+    border-radius: 2px;
+    cursor: pointer;
+}
+.popup-box .con.modify-amount .error {
+    margin-top: 5px;
+    color: #e1251b;
+}
+
+
+/* 编辑性弹窗 end */
+
+
+/* 弹窗 end */
+
+
+/* 步骤 */
+
+.step-box {
+    display: flex;
+    height: 70px;
+    padding: 0 20px 7px;
+    margin-top: 10px;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .05);
+    margin-bottom: 30px;
+    border-bottom: 2px solid #e1251b;
+}
+
+.step-box .left {
+    flex: 1;
+    margin-top: 16px;
+}
+
+.step-box .left .img {
+    display: inline-block;
+    vertical-align: top;
+    width: 38px;
+    height: 38px;
+}
+
+.step-box .left .text {
+    display: inline-block;
+    vertical-align: top;
+    height: 38px;
+    line-height: 38px;
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.step-box .steps {
+    display: flex;
+}
+
+.step-box .steps .item {
+    padding-left: 90px;
+    margin-left: 40px;
+    position: relative;
+    background: url(../images/icons.png) no-repeat 0 -292px;
+}
+
+.step-box .steps .item:first-child {
+    background: none;
+}
+
+.step-box .steps .item .number {
+    height: 20px;
+    line-height: 20px;
+    margin-top: 12px;
+    color: #999;
+    font-family: arial;
+}
+
+.step-box .steps .item .text {
+    height: 24px;
+    line-height: 24px;
+    font-size: 14px;
+    color: #999;
+}
+
+.step-box .steps .item.active .number,
+.step-box .steps .item.active .text {
+    color: #000;
+}
+
+
+/* 步骤 end */
+
+
+/* 猜你喜欢 */
+
+.guess-like {
+    margin-top: 20px;
+}
+
+.guess-like .guess-like-tit {
+    padding-left: 22px;
+    height: 44px;
+    line-height: 44px;
+    display: flex;
+}
+
+.guess-like .text {
+    font-size: 16px;
+    flex: 1;
+}
+
+.guess-like .swiper-controls {
+    display: flex;
+    margin-right: 5px;
+}
+
+.guess-like .swiper-controls .arrow {
+    font-family: Consolas;
+    font-size: 20px;
+    text-align: center;
+    display: inline-block;
+    width: 30px;
+    margin-left: -1px;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;
+    cursor: pointer;
+    color: #666;
+}
+
+.guess-like .swiper-controls .arrow:hover {
+    color: #e1251b;
+}
+
+.guess-like .swiper-controls .arrow.limit {
+    color: #ccc;
+}
+
+.guess-like .list-con .item {
+    margin-top: 0;
+}
+
+
+/* 猜你喜欢 end */
+
+.fade-enter {
+    opacity: 0;
+}
+
+.fade-enter-active {
+    transition: opacity .5s;
+}
+
+.fade-leave-to {
+    opacity: 0;
+}
+
+.fade-leave-active {
+    transition: opacity .5s;
+}
+
+
+/* 空页面 */
+
+.empty {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 50px 0;
+    width: 100%;
+}
+
+.empty .img {
+    width: 250px;
+    height: 200px;
+    font-size: 0;
+}
+
+.empty .img img {
+    width: 100%;
+    height: 100%;
+}
+
+.empty .action {
+    margin-left: 10px;
+}
+
+.empty .action .text {
+    color: #999;
+    font-size: 14px;
+    margin-top: 40px;
+}
+
+.empty .action .btn {
+    display: inline-block;
+    padding: 7px 20px;
+    background: #e1251b;
+    border-radius: 30px;
+    color: #fff;
+    margin-top: 20px;
+}
+
+
+/* 空页面 end */
+
+
+/* 隐私条款与服务协议 */
+
+.terms-container .r-header {
+    background: #fff;
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
+}
+
+.terms-container .r-header .content {
+    display: flex;
+    padding: 20px 0;
+    align-items: center;
+}
+
+.terms-container .r-header .logo {
+    cursor: pointer;
+    /* flex: 1; */
+    display: flex;
+    margin-right: 70%;
+}
+
+.terms-container .r-header .logo .img {
+    display: inline-block;
+    vertical-align: top;
+    width: 190px;
+    height: 48px;
+    background: url(../images/register-logo.png) no-repeat;
+    background-size: 100%;
+}
+
+.terms-container .r-header .logo .text {
+    font-size: 0;
+    display: inline-block;
+    vertical-align: top;
+    line-height: 48px;
+    margin-left: 5px;
+}
+
+.terms-container .r-header .go-login {
+    font-size: 14px;
+}
+
+.terms-container .r-header .go-login .login-btn {
+    font-size: 13px;
+    display: inline-block;
+    padding: 6px 22px;
+    background: #146ef7;
+    color: #fff;
+    border-radius: 30px;
+    margin-left: 7px;
+}
+
+
+/*删除文本框中的叉号*/
+input::-ms-clear {
+    display: none;
+}
+/*删除密码框中的小眼睛*/
+input::-ms-reveal {
+    display: none;
+}

assets/css/coupon-select.css

@@ -0,0 +1,208 @@
+/* 优惠信息 */
+
+.submit-order .submit-box .coupon-list {
+  margin-top: 20px;
+  border: 1px solid #eee;
+  background:#fff;
+}
+
+.submit-order .submit-box .coupon-list .coupon-tab {
+  display: flex;
+  background: #f9f9f9;
+  border-bottom: 0;
+}
+
+.submit-order .submit-box .coupon-list .coupon-tab .tab-item {
+  padding: 10px 20px;
+  cursor: pointer;
+}
+
+.submit-order .submit-box .coupon-list .coupon-tab .tab-item.active {
+  color: #e1251b;
+  background: #fff;
+}
+
+.submit-order .submit-box .coupon-list .coupon-box {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 20px;
+}
+
+.submit-order .submit-box .coupon-list .c-item {
+  margin: 20px 0 0 20px;
+  background: #f9f9f9;
+  width: 215px;
+  position: relative;
+  cursor: pointer;
+  border: 1px solid #fff;
+  box-sizing: border-box;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-type {
+  background: #e1251b;
+  padding: 15px 10px 12px;
+  color: #fff;
+  position: relative;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-type::before,
+.submit-order .submit-box .coupon-list .c-item .coupon-type::after {
+  position: absolute;
+  display: block;
+  width: 10px;
+  height: 10px;
+  content: ' ';
+  background: #fff;
+  border-radius: 50%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-type::before {
+  left: -5px;
+}
+.submit-order .submit-box .coupon-list .c-item .coupon-type::after {
+  right: -5px;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-type .coupon-price {
+  display: flex;
+  align-items: center;
+}
+
+.submit-order
+  .submit-box
+  .coupon-list
+  .c-item
+  .coupon-type
+  .coupon-price
+  .price {
+  margin-left: 10px;
+  margin-top: 5px;
+  font-family: arial;
+  color: #fff;
+}
+
+.submit-order
+  .submit-box
+  .coupon-list
+  .c-item
+  .coupon-type
+  .coupon-price
+  .price
+  .big {
+  font-size: 24px;
+}
+
+.submit-order
+  .submit-box
+  .coupon-list
+  .c-item
+  .coupon-type
+  .coupon-price
+  .limit {
+  margin-left: 10px;
+  margin-top: 10px;
+  font-family: arial;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-type .coupon-time {
+  margin: 5px 0 5px 10px;
+  font-family: arial;
+  opacity: 0.7;
+  line-height: 16px;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-info {
+  padding: 5px 15px 12px;
+  position: relative;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-info::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 3px;
+  background: url(../images/icons.png) no-repeat;
+  background-position: -2px -783px;
+  content: ' ';
+  z-index: 3;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-info .range-item {
+  margin-top: 10px;
+  color: #999;
+  display: flex;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-info .range-item .label {
+  color: #000;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-info .range-item .text {
+  flex: 1;
+}
+
+.submit-order .submit-box .coupon-list .c-item.check .coupon-type::before,
+.submit-order .submit-box .coupon-list .c-item.check .coupon-type::after {
+  display: none;
+}
+
+.submit-order .submit-box .coupon-list .c-item.check .coupon-info::before {
+  background: none;
+}
+
+.submit-order .submit-box .coupon-list .c-item.check {
+  background: #fff;
+  border: 1px solid #e1251b;
+}
+
+.submit-order .submit-box .coupon-list .c-item.check::before {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  display: block;
+  width: 0;
+  height: 0;
+  content: ' ';
+  border: 10px solid transparent;
+  border-right: 10px solid #e1251b;
+  border-bottom: 10px solid #e1251b;
+}
+
+.submit-order .submit-box .coupon-list .c-item.check::after {
+  position: absolute;
+  bottom: 2px;
+  right: 1px;
+  display: block;
+  width: 10px;
+  height: 8px;
+  content: ' ';
+  background: url(../images/icons.png) no-repeat;
+  background-position: -21px -750px;
+}
+
+.submit-order .submit-box .coupon-list .c-item.useless {
+  cursor: not-allowed;
+}
+
+.submit-order .submit-box .coupon-list .c-item.useless .coupon-type {
+  background: #ccc;
+}
+
+.submit-order .submit-box .coupon-list .c-item.useless .coupon-info::before {
+  background-position: 0 -791px;
+}
+
+.coupon-empty{
+  width:100%;
+  text-align: center;
+}
+
+.tit .platform.text{
+  font-weight: 600;
+  font-size: 14px;
+}
+/* 优惠信息 end */

assets/css/coupons.css

@@ -0,0 +1,711 @@
+
+/* 领券中心 */
+
+.coupons .coupon-banner {
+    font-size: 0;
+    margin-top: 35px;
+}
+
+.coupons .coupons-con {
+    margin-top: 45px;
+}
+
+.coupons .coupons-con .tit {
+    font-size: 18px;
+    text-align: center;
+    height: 22px;
+    line-height: 22px;
+    font-weight: 600;
+    padding-bottom: 15px;
+}
+
+.coupons .coupons-con .tit .bg-l,
+.coupons .coupons-con .tit .bg-r {
+    display: inline-block;
+    width: 35px;
+    height: 18px;
+    background: url(../images/icons.png) no-repeat;
+    background-position: 0 -763px;
+    margin-top: 4px;
+    vertical-align: top;
+}
+
+.coupons .coupons-con .tit .bg-l {
+    margin-right: 15px;
+}
+
+.coupons .coupons-con .tit .bg-r {
+    margin-left: 15px;
+}
+
+.coupons .coupons-con .con-box {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+/* 通用券 */
+.coupons .coupons-con .con-box .item {
+    display: flex;
+    width: 348px;
+    padding: 20px;
+    margin: 18px 18px 0 0;
+    border-radius: 5px;
+    background: #fff;
+    position: relative;
+    box-shadow: 0 5px 20px rgba(0,0,0,.05);
+    transition: all 0.2s;
+}
+
+.coupons .coupons-con .con-box .item:hover {
+    box-shadow: 0 5px 20px rgba(0,0,0,.09);
+}
+
+.coupons .coupons-con .con-box .item::before,
+.coupons .coupons-con .con-box .item::after {
+    position: absolute;
+    right: 111px;
+    display: block;
+    width: 16px;
+    height: 8px;
+    content: " ";
+    font-size: 0;
+    z-index: 1;
+}
+
+.coupons .coupons-con .con-box .item::before {
+    top: 0;
+    background: #fafafa;
+    border-radius:  0 0 18px 18px;
+}
+
+.coupons .coupons-con .con-box .item:hover::before {
+    background: #f8f8f8;
+}
+
+.coupons .coupons-con .con-box .item::after {
+    bottom: 0;
+    background: #f8f8f8;
+    border-radius: 18px 18px 0 0;
+}
+
+.coupons .coupons-con .con-box .item:hover::after {
+    background: #f2f2f2;
+}
+
+.coupons .coupons-con .con-box .item:nth-child(3n) {
+    margin-right: 0;
+}
+
+.coupons .coupons-con .con-box .item .text {
+    flex: 1;
+    position: relative;
+    padding-right: 20px;
+}
+
+.coupons .coupons-con .con-box .item .text::after {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: block;
+    width: 0;
+    height: auto;
+    content: " ";
+    font-size: 0;
+    border: 1px dashed #e1251b;
+    opacity: 0.1;
+}
+
+.coupons .coupons-con .con-box .item .text .coupon-price {
+    display: flex;
+    color: #e1251b;
+    align-items: center;
+    line-height: 1;
+}
+
+.coupons .coupons-con .con-box .item .text .coupon-price .symbol {
+    font-size: 18px;
+    margin-right: 2px;
+    font-family: arial;
+    margin-top: 15px;
+}
+
+.coupons .coupons-con .con-box .item .text .coupon-price .big {
+    font-size: 40px;
+    max-width: 105px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.coupons .coupons-con .con-box .item .text .coupon-price .symbol-s {
+    font-size: 14px;
+    margin-left: 2px;
+    margin-top: 15px;
+    font-weight: 600;
+}
+
+.coupons .coupons-con .con-box .item .text .coupon-price .limit {
+    border-radius: 2px;
+    margin-left: 10px;
+    padding: 4px 7px;
+    margin-top: 13px;
+    font-family: arial;
+    max-width: 95px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background: -webkit-linear-gradient(bottom, #ffd4d7, #fff9f9); 
+    background: -o-linear-gradient(top, #ffd4d7, #fff9f9); 
+    background: -moz-linear-gradient(top, #ffd4d7, #fff9f9); 
+    background: linear-gradient(to top, #ffd4d7, #fff9f9); 
+    position: relative;
+    z-index: 1;
+}
+
+.coupons .coupons-con .con-box .item .text .range {
+    width: 176px;
+    margin-top: 10px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.coupons .coupons-con .con-box .item .text .time {
+    width: 176px;
+    color: #999;
+    margin: 5px 0 0;
+    font-family: arial;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.coupons .coupons-con .con-box .item .rest {
+    width: 78px;
+    margin-left: 20px;
+    text-align: center;
+}
+
+.coupons .coupons-con .con-box .item .rest .number {
+    font-family: arial;
+    margin-top: 10px;
+}
+
+.coupons .coupons-con .con-box .item .rest .scale {
+    width: 74px;
+    background: #f5f5f5;
+    height: 10px;
+    border-radius: 20px;
+    margin: 5px auto 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.coupons .coupons-con .con-box .item .rest .scale .percent {
+    background: #e1251b;
+    display: block;
+    height: 10px;
+}
+
+.coupons .coupons-con .con-box .item .rest .btn {
+    display: block;
+    margin-top: 12px;
+    color: #fff;
+    background: #e1251b;
+    border-radius: 30px;
+    padding: 5px 0;
+}
+
+/* 商品券 */
+.coupons .coupons-con .con-box .s-item {
+    display: flex;
+    align-items: center;
+    padding: 20px;
+    background: #fff;
+    box-shadow: 0 10px 20px rgba(0,0,0,.05);
+    width: 545px;
+    margin: 20px 20px 0 0;
+    position: relative;
+    transition: all 0.2s;
+    border-radius: 5px;
+}
+
+
+.coupons .coupons-con .con-box .s-item:hover {
+    box-shadow: 0 10px 20px rgba(0,0,0,.07);
+}
+
+.coupons .coupons-con .con-box .s-item::before,
+.coupons .coupons-con .con-box .s-item::after {
+    position: absolute;
+    right: 168px;
+    display: block;
+    width: 16px;
+    height: 8px;
+    content: " ";
+    font-size: 0;
+    z-index: 1;
+}
+
+.coupons .coupons-con .con-box .s-item::before {
+    top: 0;
+    background: #fafafa;
+    border-radius:  0 0 18px 18px;
+}
+
+.coupons .coupons-con .con-box .s-item:hover::before {
+    background: #f9f9f9;
+}
+
+.coupons .coupons-con .con-box .s-item::after {
+    bottom: 0;
+    background: #f5f5f5;
+    border-radius: 18px 18px 0 0;
+}
+
+.coupons .coupons-con .con-box .s-item:hover::after {
+    background: #f3f3f3;
+}
+
+.coupons .coupons-con .con-box .s-item:nth-child(2n) {
+    margin-right: 0;
+}
+
+.coupons .coupons-con .con-box .s-item img {
+    width: 100%;
+    height: 100%;
+}
+
+.coupons .coupons-con .con-box .s-item .goods-box {
+    flex: 1;
+    padding-right: 20px;
+    position: relative;
+}
+
+.coupons .coupons-con .con-box .s-item .goods-box::after {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: block;
+    width: 0;
+    height: auto;
+    content: " ";
+    font-size: 0;
+    border: 1px dashed #e1251b;
+    opacity: 0.1;
+}
+
+.coupons .coupons-con .con-box .s-item .goods-box .shop-msg {
+    display: flex;
+    align-items: center;
+}
+
+.coupons .coupons-con .con-box .s-item .goods-box .shop-msg .logo {
+    font-size: 0;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    overflow: hidden;
+}
+
+.coupons .coupons-con .con-box .s-item .goods-box .shop-msg .logo img {
+    border-radius: 50%;
+}
+
+.coupons .coupons-con .con-box .s-item .goods-box .shop-msg .name {
+    font-size: 14px;
+    font-weight: 600;
+    flex: 1;
+    margin-left: 10px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.coupons .coupons-con .con-box .s-item .goods-box .prods {
+    margin-top: 10px;
+    display: flex;
+}
+
+.coupons .coupons-con .con-box .s-item .goods-box .prods .p-item {
+    margin-left: 20px;
+}
+
+.coupons .coupons-con .con-box .s-item .goods-box .prods .p-item:first-child {
+    margin-left: 0;
+}
+
+.coupons .coupons-con .con-box .s-item .goods-box .prods .p-item .img {
+    width: 110px;
+    height: 110px;
+    font-size: 0;
+}
+
+.coupons .coupons-con .con-box .s-item .goods-box .prods .p-item .price {
+    margin-top: 5px;
+    justify-content: center;
+    height: 15px;
+}
+
+.coupons .coupons-con .con-box .s-item .rest {
+    width: 135px;
+    margin-left: 20px;
+    text-align: center;
+}
+
+.coupons .coupons-con .con-box .s-item .rest .coupon-price {
+    display: flex;
+    color: #e1251b;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+}
+.coupons .coupons-con .con-box .s-item .rest .coupon-price .symbol {
+    font-size: 18px;
+    margin-right: 2px;
+    font-family: arial;
+    margin-top: 15px;
+}
+
+.coupons .coupons-con .con-box .s-item .rest .coupon-price .big {
+    font-size: 40px;
+    max-width: 115px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.coupons .coupons-con .con-box .s-item .rest .coupon-price .symbol-s {
+    font-size: 14px;
+    margin-left: 2px;
+    margin-top: 15px;
+    font-weight: 600;
+}
+
+.coupons .coupons-con .con-box .s-item .rest .limit {
+    margin: 10px 0;
+    font-family: arial;
+    /* overflow: hidden; */
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 14px;
+}
+
+.coupons .coupons-con .con-box .s-item .rest .scale {
+    width: 90px;
+    background: #ffb5af;
+    height: 13px;
+    border-radius: 20px;
+    margin: 0 auto;
+    position: relative;
+    overflow: hidden;
+}
+
+.coupons .coupons-con .con-box .s-item .rest .number {
+    font-family: arial;
+    position: absolute;
+    top: 1px;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    line-height: 1;
+    color: #fff;
+}
+
+.coupons .coupons-con .con-box .s-item .rest .percent {
+    background: #e1251b;
+    display: block;
+    height: 100%;
+    border-radius: 20px 0 0 20px;
+}
+
+.coupons .coupons-con .con-box .s-item .rest .btn {
+    display: block;
+    margin: 20px auto 0;
+    width: 100px;
+    color: #fff;
+    background: #e1251b;
+    border-radius: 30px;
+    padding: 7px 0;
+}
+
+/* 单商品 */
+.coupons .coupons-con .con-box .s-item.single::before,
+.coupons .coupons-con .con-box .s-item.single::after {
+    width: 0;
+    height: 0;
+}
+
+.coupons .coupons-con .con-box .s-item .single-box {
+    flex: 1;
+    display: flex;
+}
+
+.coupons .coupons-con .con-box .s-item .single-box .img {
+    width: 180px;
+    height: 180px;
+}
+
+.coupons .coupons-con .con-box .s-item .single-box .text-box {
+    flex: 1;
+    margin-left: 20px;
+}
+
+.coupons .coupons-con .con-box .s-item .single-box .text-box .goods-name {
+    font-size: 14px;
+    font-weight: 600;
+    height: 40px;
+    line-height: 20px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-top: 5px;
+}
+
+.coupons .coupons-con .con-box .s-item .single-box .text-box .scale-box {
+    margin-top: 15px;
+    display: flex;
+    align-items: center;
+}
+
+.coupons .coupons-con .con-box .s-item .single-box .text-box .scale-box .number {
+    margin-right: 10px;
+}
+
+.coupons .coupons-con .con-box .s-item .single-box .text-box .scale-box .scale {
+    width: 130px;
+    background: #ffd8d8;
+    height: 12px;
+    border-radius: 20px;
+    position: relative;
+    overflow: hidden;
+}
+
+.coupons .coupons-con .con-box .s-item .single-box .text-box .scale-box .scale .percent {
+    background: #e1251b;
+    display: block;
+    height: 100%;
+    border-radius: 20px 0 0 20px;
+}
+
+.coupons .coupons-con .con-box .s-item .single-box .text-box .coupon-info {
+    margin-top: 35px;
+    background: #fff5f5;
+    display: flex;
+    border-radius: 5px;
+    position: relative;
+}
+
+.coupons .coupons-con .con-box .s-item .single-box .text-box .coupon-info::before,
+.coupons .coupons-con .con-box .s-item .single-box .text-box .coupon-info::after {
+    position: absolute;
+    right: 64px;
+    display: block;
+    width: 12px;
+    height: 6px;
+    content: " ";
+    font-size: 0;
+    background: #fff;
+    z-index: 1;
+}
+
+.coupons .coupons-con .con-box .s-item .single-box .text-box .coupon-info::before {
+    top: 0;
+    border-radius:  0 0 12px 12px;
+}
+
+.coupons .coupons-con .con-box .s-item .single-box .text-box .coupon-info::after {
+    bottom: 0;
+    border-radius: 12px 12px 0 0;
+}
+
+
+.coupons .coupons-con .con-box .s-item .single-box .text-box .coupon-info .coupon-price {
+    flex: 1;
+    padding: 15px;
+    display: flex;
+    color: #e1251b;
+    align-items: center;
+    line-height: 1;
+}
+
+.coupons .coupons-con .con-box .s-item .single-box .text-box .coupon-info .coupon-price .symbol {
+    font-size: 18px;
+    margin-right: 2px;
+    font-family: arial;
+    margin-top: 15px;
+}
+
+.coupons .coupons-con .con-box .s-item .single-box .text-box .coupon-info .coupon-price .big {
+    font-size: 40px;
+    max-width: 115px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.coupons .coupons-con .con-box .s-item .single-box .text-box .coupon-info .coupon-price .symbol-s {
+    font-size: 14px;
+    margin-left: 2px;
+    margin-top: 15px;
+    font-weight: 600;
+}
+
+.coupons .coupons-con .con-box .s-item .single-box .text-box .coupon-info .limit {
+    margin-top: 15px;
+    font-family: arial;
+    font-size: 14px;
+    margin-left: 10px;
+    color: #000;
+}
+
+.coupons .coupons-con .con-box .s-item .single-box .text-box .coupon-info .btn {
+    display: flex;
+    width: 40px;
+    padding: 0 13px 0 17px;
+    color: #fff;
+    background: #e1251b;
+    font-size: 14px;
+    align-items: center;
+    text-align: center;
+    line-height: 20px;
+    border-radius: 5px;
+    letter-spacing: 2px;
+}
+.coupons {
+    padding: 0 20px;
+}
+
+/* 按钮 */
+.coupons .coupons-con .con-box .icon {
+    width: 60px;
+    height: 60px;
+    background: url(../images/icons.png) no-repeat;
+}
+.coupons .coupons-con .con-box .icon-en img{
+    width: 60px;
+    height: 60px;
+}
+.coupons .coupons-con .con-box .item .icon-en {
+    position: absolute;
+    top: 60px;
+    right: 130px;
+    z-index: 10;
+}
+.coupons .coupons-con .con-box .s-item .icon-en {
+    position: absolute;
+    top: 10px;
+    right: 187px;
+}
+
+.coupons .coupons-con .con-box .s-item.single .icon-en {
+    position: absolute;
+    top: 65px;
+    right: 20px;
+}
+.coupons .coupons-con .con-box .icon.received-icon {
+    background-position: -130px -799px;
+}
+
+.coupons .coupons-con .con-box .icon.robbed-icon {
+    background-position: -195px -799px;
+}
+
+.coupons .coupons-con .con-box .item .icon {
+    position: absolute;
+    top: 60px;
+    right: 130px;
+    z-index: 10;
+}
+
+.coupons .coupons-con .con-box .s-item .icon {
+    position: absolute;
+    top: 10px;
+    right: 187px;
+}
+
+.coupons .coupons-con .con-box .s-item.single .icon {
+    position: absolute;
+    top: 65px;
+    right: 20px;
+}
+
+/* 已领取 */
+.coupons .coupons-con .con-box .item.received .rest .btn {
+    background: #fff;
+    color: #e1251b;
+    padding: 4px 0;
+    border: 1px solid #e1251b;
+}
+
+.coupons .coupons-con .con-box .s-item.received .rest .btn {
+    width: 98px;
+    background: #fff;
+    color: #e1251b;
+    padding: 6px 0;
+    border: 1px solid #e1251b;
+}
+
+/* 已抢光 */
+
+.coupons .coupons-con .con-box .item.robbed .text .coupon-price,
+.coupons .coupons-con .con-box .item.robbed .text .range,
+.coupons .coupons-con .con-box .item.robbed .rest .number,
+.coupons .coupons-con .con-box .s-item.robbed .rest .coupon-price,
+.coupons .coupons-con .con-box .s-item.robbed .rest .limit,
+.coupons .coupons-con .con-box .s-item.robbed .rest .number,
+.coupons .coupons-con .con-box .s-item.robbed .single-box .text-box .scale-box .number,
+.coupons .coupons-con .con-box .s-item.robbed .single-box .text-box .coupon-info .coupon-price,
+.coupons .coupons-con .con-box .s-item.robbed .single-box .text-box .coupon-info .limit {
+    color: #999;
+}
+
+.coupons .coupons-con .con-box .item.robbed .text .coupon-price .limit,
+.coupons .coupons-con .con-box .item.robbed .rest .scale .percent,
+.coupons .coupons-con .con-box .s-item.robbed .rest .scale,
+.coupons .coupons-con .con-box .s-item.robbed .rest .percent,
+.coupons .coupons-con .con-box .s-item.robbed .single-box .text-box .scale-box .scale,
+.coupons .coupons-con .con-box .s-item.robbed .single-box .text-box .scale-box .scale .percent {
+    background: #f0f0f0;
+}
+
+.coupons .coupons-con .con-box .item.robbed .text::after,
+.coupons .coupons-con .con-box .s-item.robbed .goods-box::after {
+    border-color: #333;
+}
+
+.coupons .coupons-con .con-box .item.robbed .rest .btn {
+    background: #fff;
+    color: #999;
+    padding: 4px 0;
+    border: 1px solid #eee;
+}
+
+.coupons .coupons-con .con-box .s-item.robbed .rest .btn {
+    width: 98px;
+    background: #fff;
+    color: #999;
+    padding: 6px 0;
+    border: 1px solid #eee;
+}
+
+.coupons .coupons-con .con-box .s-item.robbed .single-box .text-box .coupon-info {
+    background: #f9f9f9;
+}
+
+.coupons .coupons-con .con-box .s-item.robbed .single-box .text-box .coupon-info .btn {
+    background: #ccc;
+    color: #fff;
+}
+
+/* 领券中心 end  */

assets/css/detail.css

@@ -0,0 +1,2142 @@
+/* 面包屑和店铺信息 */
+
+.hid {
+  display: block;
+  height: 100%;
+  overflow: hidden;
+}
+
+.detail .crumbs-shop {
+  width: 100%;
+  background: #f7f7f7;
+}
+
+.detail .crumbs-shop .content {
+  display: flex;
+}
+
+.detail .crumbs-shop .crumbs {
+  flex: 1;
+  padding: 16px 0 14px;
+}
+
+.detail .crumbs-shop .shop-box {
+  display: flex;
+  height: 16px;
+  line-height: 16px;
+  padding: 16px 0 14px;
+}
+
+.detail .crumbs-shop .shop-box .shop {
+  display: block;
+  height: 16px;
+  line-height: 16px;
+}
+
+.detail .crumbs-shop .shop-box .shop .self {
+  background: #e1251b;
+  color: #fff;
+  padding: 1px 3px;
+  display: inline-block;
+  height: 14px;
+  line-height: 14px;
+  border-radius: 2px;
+  margin-right: 5px;
+  vertical-align: top;
+}
+
+.detail .crumbs-shop .shop-box .shop .shop-icon {
+  width: 14px;
+  height: 14px;
+  vertical-align: top;
+  display: inline-block;
+  margin-top: 1px;
+  margin-right: 2px;
+  background: url(../images/icons.png) no-repeat -28px -458px;
+  font-size: 0;
+}
+
+.detail .crumbs-shop .shop-box .shop:hover .shop-icon {
+  background-position: -9px -458px;
+}
+
+.detail .crumbs-shop .shop-box .shop:hover {
+  color: #e1251b;
+}
+
+.detail .crumbs-shop .shop-box .favourite {
+  display: inline-block;
+  cursor: pointer;
+  margin: 0 15px;
+}
+
+.detail .crumbs-shop .shop-box .favourite:hover {
+  color: #e1251b;
+}
+
+.detail .crumbs-shop .shop-box .favourite .favourite-icon {
+  vertical-align: top;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background: url(../images/icons.png) no-repeat 0 -135px;
+  margin-right: 5px;
+}
+
+.detail .crumbs-shop .shop-box .favourite:hover .favourite-icon,
+.detail .crumbs-shop .shop-box .favourite.active .favourite-icon {
+  background-position: -21px -135px;
+}
+
+/* 面包屑和店铺信息 end */
+
+/* 详情上部分 */
+
+.detail .detail-up {
+  display: flex;
+  margin-top: 20px;
+}
+
+/* 商品图片 */
+
+.detail .detail-up .img {
+  width: 450px;
+  margin-right: 40px;
+}
+
+.detail .detail-up .img .big-img {
+  width: 100%;
+  height: 450px;
+  text-align: center;
+  line-height: 430px;
+  font-size: 0;
+  position: relative;
+}
+
+.prod-video {
+  background-color: #000;
+}
+
+.detail .detail-up .img .oper-btn {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.09);
+  width: 50px;
+  height: 50px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0.6;
+}
+
+.detail .detail-up .img .oper-btn:hover {
+  opacity: 1;
+}
+
+.close-btn {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  top: 20px;
+  right: 10px;
+  transform: translateX(-50%);
+}
+
+.detail .detail-up .img .oper-btn img {
+  width: 100%;
+  height: 100%;
+}
+
+.detail .detail-up .img .big-img img {
+  max-width: 100%;
+  max-height: 100%;
+  vertical-align: middle;
+}
+
+.detail .detail-up .img .small-img {
+  position: relative;
+}
+
+.detail .detail-up .img .small-img .left-arrow,
+.detail .detail-up .img .small-img .right-arrow {
+  position: absolute;
+  top: 0;
+  display: block;
+  width: 35px;
+  height: 68px;
+  line-height: 64px;
+  font-size: 40px;
+  color: #ccc;
+  font-family: Consolas;
+  cursor: pointer;
+  -moz-transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  transition: all 0.2s;
+}
+
+.detail .detail-up .img .small-img .left-arrow {
+  left: 0;
+  text-align: left;
+}
+
+.detail .detail-up .img .small-img .right-arrow {
+  right: 0;
+  text-align: right;
+}
+
+.detail .detail-up .img .small-img .left-arrow:hover,
+.detail .detail-up .img .small-img .right-arrow:hover {
+  color: #999;
+}
+
+.detail .detail-up .img .small-img .limit {
+  color: #eee;
+}
+
+.detail .detail-up .img .small-img .limit:hover {
+  color: #eee;
+}
+
+.detail .detail-up .img .small-img .img-box {
+  margin: 15px 35px 0;
+  width: 380px;
+  height: 68px;
+  overflow: hidden;
+  position: relative;
+}
+
+.detail .detail-up .img .small-img .img-box .offset-box {
+  position: absolute;
+  left: 0;
+  -webkit-transition: all 0.3s;
+  -moz-transition: all 0.3s;
+  transition: all 0.3s;
+}
+
+.detail .detail-up .img .small-img .img-box .item {
+  display: inline-block;
+  width: 64px;
+  height: 64px;
+  font-size: 0;
+  line-height: 64px;
+  text-align: center;
+  border: 2px solid #fff;
+  margin-left: 10px;
+}
+
+.detail .detail-up .img .small-img .img-box .item:first-child {
+  margin-left: 0;
+}
+
+.detail .detail-up .img .small-img .img-box .item.active,
+.detail .detail-up .img .small-img .img-box .item:hover {
+  border: 2px solid #e1251b;
+}
+
+.detail .detail-up .img .small-img .img-box .item img {
+  max-width: 100%;
+  max-height: 100%;
+  vertical-align: middle;
+}
+
+/* 商品图片 end */
+
+/* 商品详情 */
+
+.detail .detail-up .info {
+  flex: 1;
+}
+
+.detail .detail-up .info .name-box {
+  margin-bottom: 15px;
+  margin-top: 5px;
+}
+
+.detail .detail-up .info .name-box .name {
+  width: 710px;
+  font-size: 24px;
+  line-height: 28px;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  position: relative;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+.detail .detail-up .info .name-box .des {
+  margin-top: 7px;
+  color: #999;
+  line-height: 18px;
+  font-size: 12px;
+  padding-right:15px
+}
+
+.detail .detail-up .info .name-box .des .brief {
+  max-width: 550px;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
+
+}
+
+
+.detail .detail-up .info .name-box .des .discount-info {
+  color: #999;
+  margin-top:5px;
+  max-width: 550px;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
+}
+
+.detail .detail-up .info .name-box .des .discount-info .go-discount {
+  color: #005ea7;
+}
+
+.detail .detail-up .info .name-box .des .discount-info .go-discount:hover {
+  text-decoration: underline;
+}
+
+.detail .detail-up .info .name-box .des .discount-info .go-discount .arr {
+  font-family: Consolas;
+}
+
+.detail .detail-up .info .activity {
+  height: 40px;
+  line-height: 38px;
+  display: flex;
+  padding: 0 15px 0 0;
+  color: #fff;
+  background: -webkit-linear-gradient(left, #f53e00, #e1251b);
+  background: -o-linear-gradient(right, #f53e00, #e1251b);
+  background: -moz-linear-gradient(right, #f53e00, #e1251b);
+  background: linear-gradient(to right, #f53e00, #e1251b);
+  position: relative;
+  border-bottom: 1px solid #eb6060;
+}
+
+.detail .detail-up .info .activity .name {
+  flex: 1;
+  font-size: 16px;
+  padding-left: 50px;
+  position: relative;
+  margin-right: 20px;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.detail .detail-up .info .activity .name::before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: block;
+  width: 40px;
+  height: 40px;
+  content: ' ';
+  background: url(../images/icons.png) no-repeat;
+}
+
+.detail .detail-up .info .activity .name.flash-sale::before {
+  background-position: -65px -182px;
+}
+
+.detail .detail-up .info .activity .name.group-buy::before {
+  background-position: -10px -182px;
+}
+
+.detail .detail-up .info .activity .limit .time {
+  font-family: arial;
+}
+
+.detail .detail-up .info .price-box {
+  background: #f9f9f9;
+  border-top: 1px dotted #eee;
+  border-bottom: 1px dotted #eee;
+  padding: 0 0 13px;
+  line-height: 24px;
+  margin-top: -1px;
+  margin-bottom: 20px;
+}
+
+.detail .detail-up .info .price-box .item {
+  display: flex;
+  margin-top: 15px;
+}
+.detail .detail-up .info .price-box .discount {
+  align-items: baseline;
+}
+
+.detail .detail-up .info .price-box .item .tit {
+  margin: 0 15px;
+  color: #999;
+}
+
+.detail .detail-up .info .price-box .item .con {
+  flex: 1;
+}
+.detail .detail-up .info .price-box .item .con.pre-sale-red {
+  color: #e43130;
+}
+
+.detail .detail-up .info .price-box .item.goods-price {
+  height: 30px;
+  line-height: 35px;
+}
+
+.detail .detail-up .info .price-box .item.goods-price .con {
+  display: flex;
+}
+
+.detail .detail-up .info .price-box .item.goods-price .con .price {
+  font-size: 18px;
+  height: 30px;
+  line-height: 30px;
+  display: flex;
+  align-items: baseline;
+}
+
+.detail .detail-up .info .price-box .item.goods-price .con .price .big {
+  font-size: 26px;
+}
+
+.detail .detail-up .info .price-box .item.goods-price .con .old-price {
+  font-family: arial;
+  color: #999;
+  text-decoration: line-through;
+  margin-left: 10px;
+}
+
+.detail .detail-up .info .price-box .item.coupons .con {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.detail .detail-up .info .price-box .item.coupons .con .conpon {
+  display: inline-block;
+  margin-right: 12px;
+  position: relative;
+  height: 16px;
+  line-height: 16px;
+  text-align: center;
+  border-top: 1px solid #e1251b;
+  border-bottom: 1px solid #e1251b;
+  padding: 0 10px 0 12px;
+  background: #ffdedf;
+  cursor: pointer;
+  color: #e1251b;
+  font-family: arial;
+  -moz-transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  transition: all 0.2s;
+}
+
+.detail .detail-up .info .price-box .item.coupons .con .conpon:hover {
+  background: #fff;
+}
+
+.detail .detail-up .info .price-box .item.coupons .con .conpon::before,
+.detail .detail-up .info .price-box .item.coupons .con .conpon::after {
+  position: absolute;
+  top: -1px;
+  display: block;
+  height: 18px;
+  width: 2px;
+  content: ' ';
+  background: url(../images/icons.png) no-repeat 0 -453px;
+}
+
+.detail .detail-up .info .price-box .item.coupons .con .conpon::before {
+  left: 0;
+  background-position: -2px -453px;
+}
+
+.detail .detail-up .info .price-box .item.coupons .con .conpon::after {
+  right: -2px;
+}
+
+.detail .detail-up .info .price-box .item.coupons .con .more {
+  color: #999;
+}
+
+.detail .detail-up .info .price-box .item.coupons .con .more:hover {
+  color: #e1251b;
+}
+
+.detail .detail-up .info .price-box .item.coupons .con .arrow {
+  font-family: Consolas;
+}
+
+.detail .detail-up .info .price-box .item.discount .con .discount-item {
+  display: flex;
+  margin-bottom: 5px;
+  align-items: center;
+  flex-wrap: wrap;
+  line-height: 24px;
+}
+
+.detail .detail-up .info .price-box .item.discount .con .discount-item .type {
+  margin-right: 5px;
+  padding: 1px 3px;
+  border: 1px solid #e1251b;
+  color: #e1251b;
+  line-height: 14px;
+  height: 14px;
+}
+.detail .detail-up .info .price-box .item.discount .con .discount-item .packge-item {
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.detail .detail-up .info .price-box .item.discount .con .discount-item .packge-item img {
+  width: 29px;
+  height: 29px;
+  margin-right: 5px;
+  border: 1px solid #f2f2f2;
+}
+.detail .detail-up .info .price-box .item.discount .con .discount-item .packge-item .count {
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  color: #999999;
+}
+.detail .detail-up .info .price-box .item.discount .con .discount-item .text {
+  margin: 0 10px 0 5px;
+  max-width: 500px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+}
+
+.detail .detail-up .info .price-box .item.discount .con .discount-item .det {
+  color: #999;
+}
+
+.detail
+  .detail-up
+  .info
+  .price-box
+  .item.discount
+  .con
+  .discount-item
+  .det
+  .arr {
+  font-family: Consolas;
+}
+
+.detail
+  .detail-up
+  .info
+  .price-box
+  .item.discount
+  .con
+  .discount-item
+  .det:hover {
+  color: #e1251b;
+}
+
+.detail
+  .detail-up
+  .info
+  .price-box
+  .item.discount
+  .con
+  .discount-item.item-box {
+  display: inline-block;
+}
+
+.detail
+  .detail-up
+  .info
+  .price-box
+  .item.discount
+  .con
+  .discount-item.item-box
+  .text,
+.detail
+  .detail-up
+  .info
+  .price-box
+  .item.discount
+  .con
+  .discount-item.item-box
+  .det {
+  display: none;
+}
+
+.detail
+  .detail-up
+  .info
+  .price-box
+  .item.discount
+  .con:hover
+  .discount-item.item-box {
+  display: flex;
+}
+
+.detail
+  .detail-up
+  .info
+  .price-box
+  .item.discount
+  .con:hover
+  .discount-item.item-box
+  .text,
+.detail
+  .detail-up
+  .info
+  .price-box
+  .item.discount
+  .con:hover
+  .discount-item.item-box
+  .det {
+  display: block;
+}
+
+.detail .detail-up .info .sku-box .items {
+  display: flex;
+  margin-top: 10px;
+}
+
+.detail .detail-up .info .sku-box .items .tit {
+  margin: 0 15px;
+  color: #999;
+  display: block;
+  line-height: 30px;
+  word-break: break-all; /* 解决数字不换行 */
+  width: 5em; /* 5个字的大小 */
+}
+
+.detail .detail-up .info .sku-box .items .con {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.detail .detail-up .info .sku-box .items .con .item {
+  display: inline-block;
+  border: 1px solid #ddd;
+  position: relative;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  vertical-align: middle;
+  -moz-transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.detail .detail-up .info .sku-box .items .con .item.not-optional {
+  border: 1px dashed #bbb;
+  color: #bbb;
+}
+
+.detail .detail-up .info .sku-box .items .con .item.active,
+.detail .detail-up .info .sku-box .items .con .item:hover {
+  border: 1px solid #e1251b;
+  color: #e1251b;
+}
+
+.detail .detail-up .info .sku-box .items.sku-img .tit {
+  line-height: 52px;
+}
+
+.detail .detail-up .info .sku-box .items.sku-img .con .item {
+  width: 50px;
+  height: 50px;
+  font-size: 0;
+  line-height: 50px;
+}
+
+.detail .detail-up .info .sku-box .items.sku-img .con .item img {
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+}
+
+.detail .detail-up .info .sku-box .items.sku-text .con .item {
+  padding: 0 16px;
+  line-height: 28px;
+  height: 28px;
+}
+
+.detail .detail-up .info .sku-box .items .con .goods-number {
+  height: 30px;
+}
+
+.detail .detail-up .info .sku-box .items .con .goods-number .reduce,
+.detail .detail-up .info .sku-box .items .con .goods-number .increase {
+  display: inline-block;
+  vertical-align: top;
+  width: 30px;
+  height: 30px;
+  background: #e9e9e9;
+  font-size: 22px;
+  text-align: center;
+  line-height: 26px;
+  color: #999;
+  cursor: pointer;
+}
+
+.detail .detail-up .info .sku-box .items .con .goods-number .limit {
+  cursor: not-allowed;
+  color: #ccc;
+}
+
+.detail .detail-up .info .sku-box .items .con .goods-number .number {
+  border: 0;
+  width: 60px;
+  height: 30px;
+  text-align: center;
+  font-family: arial;
+  vertical-align: top;
+}
+
+.detail .detail-up .info .btns {
+  margin-top: 30px;
+  padding-left: 15px;
+  display: flex;
+}
+
+.detail .detail-up .info .btns .buy-now,
+.detail .detail-up .info .btns .add-cart,
+.detail .detail-up .info .btns .collect,
+.detail .detail-up .info .btns .collected,
+.detail .detail-up .info .btns .shortage {
+  height: 46px;
+  line-height: 46px;
+  padding: 0 50px;
+  font-size: 16px;
+  border-radius: 2px;
+}
+
+.detail .detail-up .info .btns .buy-now {
+  background: #e1251b;
+  color: #fff;
+  height: 48px;
+  line-height: 48px;
+}
+
+.detail .detail-up .info .btns .buy-now:hover {
+  opacity: 0.9;
+}
+
+.detail .detail-up .info .btns .add-cart {
+  margin-left: 10px;
+  background: #ffdedf;
+  border: 1px solid #e1251b;
+  color: #e1251b;
+}
+
+.detail .detail-up .info .btns .add-cart:hover {
+  background: #fff;
+}
+
+.detail .detail-up .info .btns .add-cart-group {
+  padding: 0 22px;
+}
+
+.detail .detail-up .info .btns .collect,
+.detail .detail-up .info .btns .collected {
+  border: 1px solid #ddd;
+  padding: 0 30px;
+  margin-left: 10px;
+}
+
+.detail .detail-up .info .btns .collect .icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  vertical-align: top;
+  margin-right: 10px;
+  margin-top: 16px;
+  background: url(../images/icons.png) no-repeat 0 -156px;
+}
+
+.detail .detail-up .info .btns .collected .icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  vertical-align: top;
+  margin-right: 10px;
+  margin-top: 16px;
+  background: url(../images/icons.png) no-repeat -21px -156px;
+}
+
+.detail .detail-up .info .btns .collect.active .icon {
+  background-position: -21px -156px;
+}
+
+.detail .detail-up .info .btns .shortage {
+  height: 48px;
+  line-height: 48px;
+  background: #f7f7f7;
+  color: #999;
+  cursor: not-allowed;
+}
+
+/* 拼团按钮 */
+
+.detail .detail-up .info .group-btn .build-group,
+.detail .detail-up .info .group-btn .alone-group {
+  display: block;
+  position: relative;
+  height: 48px;
+  padding: 0 20px;
+  color: #fff;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: 2px;
+  min-width: 90px;
+}
+
+.detail .detail-up .info .group-btn .en,
+.detail .detail-up .info .group-btn .en {
+  padding: 0 10px;
+}
+
+.detail .detail-up .info .group-btn .alone-group:hover {
+  opacity: 0.9;
+}
+
+.detail .detail-up .info .group-btn .build-group {
+  background: #e1251b;
+}
+
+.detail .detail-up .info .group-btn .alone-group {
+  background: #85c360;
+  margin-left: 10px;
+}
+
+.detail .detail-up .info .group-btn .alone-group.cannotbuy {
+  background: #bbb;
+}
+
+.detail .detail-up .info .group-btn .group-price {
+  display: block;
+  line-height: 14px;
+  margin-top: 9px;
+}
+
+.detail .detail-up .info .group-btn .build-group .group-text {
+  display: block;
+  line-height: 14px;
+  margin-top: 3px;
+}
+
+.detail .detail-up .info .group-btn .build-group .group-code {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 58px;
+  width: 130px;
+  box-sizing: border-box;
+  border: 1px solid #eee;
+  background: #fff;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.07);
+}
+
+.detail .detail-up .info .group-btn .build-group:hover .group-code {
+  display: block;
+}
+
+.detail .detail-up .info .group-btn .build-group .group-code::before,
+.detail .detail-up .info .group-btn .build-group .group-code::after {
+  position: absolute;
+  left: 20px;
+  display: block;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  content: ' ';
+}
+
+.detail .detail-up .info .group-btn .build-group .group-code::before {
+  top: -11px;
+  border-bottom: 5px solid #e4e4e4;
+}
+
+.detail .detail-up .info .group-btn .build-group .group-code::after {
+  top: -10px;
+  border-bottom: 5px solid #f5f5f5;
+}
+
+.detail .detail-up .info .group-btn .build-group .group-code .text {
+  display: block;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  padding-left: 10px;
+  box-sizing: border-box;
+  background: #f5f5f5;
+  font-size: 13px;
+  font-family: arial;
+  font-weight: 400;
+  text-align: left;
+  color: #666;
+}
+
+.detail .detail-up .info .group-btn .build-group .group-code .code-img {
+  display: block;
+  margin: 10px auto;
+  width: 110px;
+  height: 110px;
+  font-size: 0;
+}
+.detail .detail-up .info .group-btn .build-group .group-code .display-none {
+  display: none !important;
+}
+.detail .detail-up .info .group-btn .build-group .group-code .code-img img {
+  width: 100%;
+  height: 100%;
+}
+
+/* 拼团按钮 end */
+
+/* 商品详情 end */
+
+/* 详情上部分 end */
+
+/* 详情下部分 */
+
+.detail .detail-down {
+  display: flex;
+  margin-top: 30px;
+}
+
+.detail .detail-down .introduce-box {
+  flex: 1;
+  margin-right: 20px;
+  max-width: 938px;
+}
+
+.detail .detail-down .introduce-box.packages{
+  margin-right: 0;
+  max-width: 1200px;
+}
+
+.detail .detail-down .introduce-box .tab {
+  display: flex;
+  flex-wrap: wrap;
+  background: #f9f9f9;
+  border: 1px solid #eee;
+  border-bottom-color: #e1251b;
+}
+
+.detail .detail-down .introduce-box .tab .item {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 30px;
+  font-size: 14px;
+  -moz-transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  margin-left: -1px;
+  margin-top: -1px;
+}
+
+.detail .detail-down .introduce-box .tab .item:hover {
+  color: #e1251b;
+}
+
+.detail .detail-down .introduce-box .tab .item.active {
+  background: #e1251b;
+  color: #fff;
+}
+
+.detail .detail-down .introduce-box .tab .item .number {
+  color: #e1251b;
+  font-family: arial;
+}
+
+.detail .detail-down .introduce-box .tab .item.active .number {
+  color: #fff;
+}
+
+/* 商品介绍 */
+
+.detail .detail-down .introduce-box .introduce {
+  margin-top: 30px;
+}
+
+.detail .detail-down .introduce-box .introduce img {
+  display: block;
+  margin: auto;
+  max-width: 100%;
+}
+
+/* 商品介绍 end */
+
+/* 套餐 */
+.detail .detail-down .introduce-box.packages .packages-content {
+  margin-top: 20px;
+  display: flex;
+}
+.detail .detail-down .introduce-box.packages .packages-content .add-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  margin: 43px 40px 0;
+}
+.detail .detail-down .introduce-box.packages .packages-content .add-icon::before {
+  content: '';
+  position: absolute;
+  width: 26px;
+  border-top: 4px solid #ddd;
+}
+.detail .detail-down .introduce-box.packages .packages-content .add-icon::after {
+  content: '';
+  position: absolute;
+  height: 26px;
+  border-left: 4px solid #ddd;
+}
+
+.detail .detail-down .introduce-box.packages .packages-content .mean-icon {
+  display: inline-block;
+  width: 34px;
+  height: 34px;
+  margin: 53px 40px 0 0;
+}
+.detail .detail-down .introduce-box.packages .packages-content .mean-icon::before {
+  content: '';
+  position: absolute;
+  width: 26px;
+  border-top: 4px solid #ddd;
+}
+.detail .detail-down .introduce-box.packages .packages-content .mean-icon::after {
+  content: '';
+  position: absolute;
+  margin-top: 10px;
+  width: 26px;
+  border-bottom: 4px solid #ddd;
+  /* transform: rotate(45deg); */
+}
+
+.detail .detail-down .introduce-box.packages .packages-content .left{
+  width: 938px;
+  margin-right: 20px;
+  display: flex;
+}
+.detail .detail-down .introduce-box.packages .packages-content .left .prod-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 120px;
+  height: 200px;
+}
+.detail .detail-down .introduce-box.packages .packages-content .left .prod-box.necessary {
+  margin-right: 70px;
+}
+.detail .detail-down .introduce-box.packages .packages-content .left .prod-box.necessary:last-child {
+  margin-right: 0;
+}
+.detail .detail-down .introduce-box.packages .packages-content .left .prod-box .img{
+  width: 120px;
+  height: 120px;
+  box-sizing: border-box;
+  border: 1px solid #f2f2f2;
+}
+.detail .detail-down .introduce-box.packages .packages-content .left .prod-box .prod-name{
+  margin-top: 10px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 19px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  color: #333333;
+}
+.detail .detail-down .introduce-box.packages .packages-content .left .prod-box .checkbox {
+  margin-right: 4px;
+}
+.detail .detail-down .introduce-box.packages .packages-content .left .prod-box .price{
+  margin-top: 10px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #E1251B;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.detail .detail-down .introduce-box.packages .packages-content .left .prod-box .price .price-count-con{
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+.detail .detail-down .introduce-box.packages .packages-content .left .prod-box .price .price-count-con > span{
+  flex: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.detail .detail-down .introduce-box.packages .packages-content .left .prod-box .price .combo-count {
+  margin-left: auto;
+  width: 40px;
+  color: #999;
+  text-align: right;
+}
+
+.detail .detail-down .introduce-box.packages .packages-content .right{
+  width: 240px;
+  display: flex;
+}
+.detail .detail-down .introduce-box.packages .packages-content .right .item {
+  margin-top: 12px;
+}
+.detail .detail-down .introduce-box.packages .packages-content .right .settlement-box{
+  width: 140px;
+}
+.detail .detail-down .introduce-box.packages .packages-content .right .settlement-box .text{
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 19px;
+  color: #666666;
+}
+.detail .detail-down .introduce-box.packages .packages-content .right .settlement-box .price-text {
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 21px;
+  color: #E1251B;
+}
+.detail .detail-down .introduce-box.packages .packages-content .right .settlement-box .btn {
+  width: 104px;
+  height: 33px;
+  background: #E1251B;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 19px;
+  color: #FFFFFF;
+  display: flex;
+  justify-content: center;
+  align-items:center;
+  cursor: pointer;
+}
+.detail .detail-down .introduce-box.packages .packages-content .right .settlement-box .btn-add-cart {
+  width: 104px;
+  height: 33px;
+  background: #FFECEC;
+  border: 1px solid #E1251B;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 19px;
+  color: #E1251B;
+  display: flex;
+  justify-content: center;
+  align-items:center;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+/* 套餐end */
+
+/* 商品评论 */
+
+.detail .detail-down .introduce-box .comment {
+  margin-top: 30px;
+}
+
+.detail .detail-down .introduce-box .comment .good-rates {
+  display: flex;
+  padding: 20px 0;
+}
+
+.detail .detail-down .introduce-box .comment .good-rates .score {
+  border-right: 1px solid #eee;
+  text-align: center;
+  display: flex;
+  padding: 0 60px;
+  align-items: center;
+}
+
+.detail .detail-down .introduce-box .comment .good-rates .score .tit {
+  margin-right: 20px;
+  font-size: 14px;
+}
+
+.detail .detail-down .introduce-box .comment .good-rates .score .con {
+  font-size: 45px;
+  color: #e1251b;
+  font-family: arial;
+}
+
+.detail .detail-down .introduce-box .comment .good-rates .average {
+  margin-left: 50px;
+}
+
+.detail .detail-down .introduce-box .comment .good-rates .average .item {
+  display: flex;
+  height: 14px;
+  line-height: 14px;
+  margin-top: 10px;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .good-rates
+  .average
+  .item:first-child {
+  margin-top: 0;
+}
+
+.detail .detail-down .introduce-box .comment .good-rates .average .item .number,
+.detail .detail-down .introduce-box .comment .good-rates .average .item .text {
+  font-family: arial;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.detail .detail-down .introduce-box .comment .good-rates .average .item .stars {
+  margin: 0 10px;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .good-rates
+  .average
+  .item
+  .stars
+  .star,
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .good-rates
+  .average
+  .item
+  .stars
+  .star-gray {
+  display: inline-block;
+  vertical-align: top;
+  width: 14px;
+  height: 14px;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .good-rates
+  .average
+  .item
+  .stars
+  .star {
+  background: url(../images/icons.png) no-repeat;
+  background-position: -42px -138px;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .good-rates
+  .average
+  .item
+  .stars
+  .star-gray {
+  background: url(../images/icons.png) no-repeat;
+  background-position: -61px -138px;
+}
+
+.detail .detail-down .introduce-box .comment .comment-tab {
+  display: flex;
+  background: #f9f9f9;
+  padding: 10px;
+  border: 1px solid #eee;
+  margin-top: 20px;
+}
+
+.detail .detail-down .introduce-box .comment .comment-tab .item {
+  padding: 0 10px;
+  cursor: pointer;
+  -moz-transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  transition: all 0.2s;
+}
+
+.detail .detail-down .introduce-box .comment .comment-tab .item:hover,
+.detail .detail-down .introduce-box .comment .comment-tab .item.active {
+  color: #e1251b;
+}
+
+.detail .detail-down .introduce-box .comment .comment-tab .item .number {
+  font-family: arial;
+}
+
+.detail .detail-down .introduce-box .comment .comment-con {
+  margin-top: 15px;
+}
+
+.detail .detail-down .introduce-box .comment .comment-con .item {
+  padding: 15px;
+  display: flex;
+  border-bottom: 1px solid #eee;
+}
+
+.detail .detail-down .introduce-box .comment .comment-con .item .buyer-msg {
+  width: 80px;
+  text-align: center;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-msg
+  .img {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin: auto;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-msg
+  .img
+  img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-msg
+  .name {
+  margin: 7px auto 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.detail .detail-down .introduce-box .comment .comment-con .item .buyer-comment {
+  margin-left: 10px;
+  line-height: 20px;
+  flex: 1;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-comment
+  .stars
+  .star,
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-comment
+  .stars
+  .star-gray {
+  display: inline-block;
+  vertical-align: top;
+  width: 14px;
+  height: 14px;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-comment
+  .stars {
+  padding-top: 2px;
+  height: 14px;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-comment
+  .stars
+  .star {
+  background: url(../images/icons.png) no-repeat;
+  background-position: -42px -138px;
+  margin-right: 3px;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-comment
+  .stars
+  .star-gray {
+  background: url(../images/icons.png) no-repeat;
+  background-position: -61px -138px;
+  margin-right: 3px;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-comment
+  .text {
+  margin-top: 5px;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-comment
+  .img-box
+  .img {
+  display: inline-block;
+  text-align: center;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+  font-size: 0;
+  border: 1px solid #fff;
+  margin: 10px 10px 0 0;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-comment
+  .img-box
+  .img:hover {
+  border-color: #e1251b;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-comment
+  .img-box
+  .img
+  img {
+  display: inline-block;
+  text-align: center;
+  max-width: 100%;
+  max-height: 100%;
+  vertical-align: middle;
+  -moz-transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-comment
+  .time-sku {
+  margin-top: 10px;
+  color: #999;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-comment
+  .time-sku
+  .time {
+  font-family: arial;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-comment
+  .time-sku
+  .sku {
+  margin-left: 20px;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-comment
+  .append-comment {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid #eee;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-comment
+  .append-comment
+  .append-time {
+  color: #999;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-comment
+  .append-comment
+  .append-con {
+  margin-top: 5px;
+  padding-bottom: 3px;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-comment
+  .seller-reply {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid #eee;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-comment
+  .seller-reply
+  .tit {
+  color: #e1251b;
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-comment
+  .seller-reply
+  .con {
+  margin-top: 5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  /* -webkit-line-clamp: 3; */
+  -webkit-box-orient: vertical;
+  position: relative;
+  line-height: 1.5;
+  word-wrap: break-word;
+  word-break: break-all;
+  word-break: break-word
+}
+
+.detail
+  .detail-down
+  .introduce-box
+  .comment
+  .comment-con
+  .item
+  .buyer-comment
+  .seller-reply
+  .time {
+  margin-top: 10px;
+  color: #999;
+  font-family: arial;
+}
+
+.detail .detail-down .introduce-box .comment .comment-con .comment-empty {
+  text-align: center;
+  color: #999;
+  padding: 80px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.detail .detail-down .introduce-box .comment .pages {
+  margin-top: 20px;
+}
+
+/* 评论大图 */
+
+.introduce-box .comment .comment-con .buyer-comment .big-img-show {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  background-color: #333;
+  overflow: hidden;
+}
+
+.introduce-box .comment .comment-con .buyer-comment .big-img-show .left-arrow {
+  width: 100px;
+  height: 100px;
+  font-size: 80px;
+  color: #d8d3d3;
+  position: absolute;
+  top: 40%;
+  left: 10%;
+  z-index: 1002;
+  cursor: pointer;
+}
+
+.introduce-box .comment .comment-con .buyer-comment .big-img-show .right-arrow {
+  width: 100px;
+  height: 100px;
+  font-size: 80px;
+  color: #d8d3d3;
+  position: absolute;
+  top: 40%;
+  right: 10%;
+  z-index: 1002;
+  cursor: pointer;
+}
+
+.introduce-box .comment .comment-con .buyer-comment .big-img-show .mask {
+  position: relative;
+  top: 0;
+  left: 0;
+  /* width: 100%; */
+  width: calc(100% + 17px);
+  height: 100%;
+  /* background: rgba(0, 0, 0, 0.5); */
+  background: rgba(0, 0, 0);
+  opacity: 0.9;
+  /* overflow-y: hidden; */
+}
+
+.introduce-box .comment .comment-con .buyer-comment .big-img-show img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: auto;
+  max-height: 100%;
+  z-index: 1001;
+}
+
+/* 视频大小 */
+.introduce div p video {
+  width: 938px;
+}
+
+/* 商品评论 end */
+
+.detail .detail-down .side {
+  width: 242px;
+}
+
+/* 店内搜索 */
+
+.detail .detail-down .side .shop-search {
+  border: 1px solid #eee;
+}
+
+.detail .detail-down .side .shop-search .tit,
+.detail .detail-down .side .shop-category .tit,
+.detail .detail-down .side .sale-well .tit {
+  background: #f9f9f9;
+  padding: 10px;
+  font-size: 14px;
+  border-bottom: 1px solid #eee;
+}
+
+.detail .detail-down .side .shop-search .con {
+  padding: 15px;
+  display: flex;
+}
+
+.detail .detail-down .side .shop-search .text {
+  height: 26px;
+  line-height: 26px;
+  vertical-align: top;
+  border: 1px solid #ddd;
+  background: #fff;
+  border-right: none;
+  font-size: 12px;
+  padding: 0 10px;
+  flex: 1;
+}
+
+.detail .detail-down .side .shop-search .btn {
+  width: 30px;
+  height: 28px;
+  position: relative;
+  background: #e1251b;
+}
+
+.detail .detail-down .side .shop-search .btn::before {
+  position: absolute;
+  left: 8px;
+  top: 6px;
+  display: block;
+  width: 14px;
+  height: 14px;
+  content: ' ';
+  font-size: 0;
+  background: url(../images/icons.png) no-repeat;
+  background-position: 0 -58px;
+}
+
+.detail .detail-down .side .shop-search .btn:hover {
+  opacity: 0.8;
+}
+
+/* 店内搜索 end */
+
+/* 店内分类 */
+
+.detail .detail-down .side .shop-category {
+  margin-top: 20px;
+  border: 1px solid #eee;
+}
+
+.detail .detail-down .side .shop-category .con {
+  padding: 10px 15px;
+  line-height: 30px;
+}
+
+.detail .detail-down .side .shop-category .con .items .item-main {
+  position: relative;
+  padding-left: 15px;
+  cursor: pointer;
+  height: 30px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -moz-transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  transition: all 0.2s;
+}
+
+.detail .detail-down .side .shop-category .con .items .item-main .arrow {
+  position: absolute;
+  left: 0;
+  top: 12px;
+  width: 0;
+  height: 0;
+  border: 4px solid transparent;
+  border-left: 5px solid #333;
+  border-radius: 2px;
+}
+
+.detail .detail-down .side .shop-category .con .items.active .item-main .arrow {
+  border-left: 4px solid transparent;
+  border-top: 4px solid #333;
+  top: 15px;
+}
+
+.detail .detail-down .side .shop-category .con .items .item-main:hover,
+.detail .detail-down .side .shop-category .con .items.active .item-main {
+  text-decoration: underline;
+}
+
+.detail .detail-down .side .shop-category .con .items .item-con {
+  display: none;
+}
+
+.detail .detail-down .side .shop-category .con .items.active .item-con {
+  display: block;
+}
+
+.detail .detail-down .side .shop-category .con .items .item-con .item {
+  padding-left: 15px;
+  color: #999;
+  height: 30px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  -moz-transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  transition: all 0.2s;
+}
+
+.detail .detail-down .side .shop-category .con .items .item-con .item:hover {
+  color: #e1251b;
+}
+
+/* 店内分类 end */
+
+/* 热卖商品 */
+
+.detail .detail-down .side .sale-well {
+  margin-top: 20px;
+  border: 1px solid #eee;
+}
+
+.detail .detail-down .side .sale-well .con {
+  padding: 15px;
+}
+
+.detail .detail-down .side .sale-well .con .item {
+  position: relative;
+  margin: 15px auto 0;
+  cursor: pointer;
+  -moz-transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  transition: all 0.2s;
+}
+
+.detail .detail-down .side .sale-well .con .item:hover {
+  opacity: 0.8;
+}
+
+.detail .detail-down .side .sale-well .con .item:first-child {
+  margin-top: 0;
+}
+
+.detail .detail-down .side .sale-well .con .item .goods-img {
+  width: 210px;
+  height: 210px;
+  line-height: 210px;
+  text-align: center;
+  font-size: 0;
+}
+
+.detail .detail-down .side .sale-well .con .item .goods-img img {
+  max-width: 100%;
+  max-height: 100%;
+  vertical-align: middle;
+}
+
+.detail .detail-down .side .sale-well .con .item .goods-msg {
+  text-align: center;
+  padding-top: 10px;
+  padding-bottom: 5px;
+}
+
+.detail .detail-down .side .sale-well .con .item .goods-msg .goods-name {
+  height: 14px;
+  line-height: 14px;
+  font-size: 14px;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.detail .detail-down .side .sale-well .con .item .goods-msg .goods-price {
+  display: flex;
+  justify-content: center;
+  height: 16px;
+  line-height: 16px;
+  margin: 10px 0;
+  overflow: hidden;
+}
+
+.detail
+  .detail-down
+  .side
+  .sale-well
+  .con
+  .item
+  .goods-msg
+  .goods-price
+  .old-price {
+  margin-left: 10px;
+  color: #999;
+  font-family: arial;
+  text-decoration: line-through;
+  height: 12px;
+  line-height: 12px;
+  margin-top: 4px;
+}
+
+/* 热卖商品 end */
+
+/* 详情下部分 end */
+
+/* 滑动导航 */
+
+.scroll-tab {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: #fff;
+  animation: hdnav2-show 0.3s;
+  -webkit-animation: hdnav2-show 0.3s;
+  -moz-animation: hdnav2-show 0.3s;
+  -o-animation: hdnav2-show 0.3s;
+  z-index: 10;
+  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+}
+
+.scroll-tab .content {
+  position: relative;
+}
+
+.scroll-tab .content .tab {
+  display: flex;
+  background: #f9f9f9;
+  border: 1px solid #eee;
+  border-bottom-color: #e1251b;
+  border-top-color: #f9f9f9;
+  border-right-color: #f9f9f9;
+}
+
+.scroll-tab .content .tab .item {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 30px;
+  font-size: 14px;
+  -moz-transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  margin-left: -1px;
+  margin-top: -1px;
+}
+
+.scroll-tab .content .tab .item:hover {
+  color: #e1251b;
+}
+
+.scroll-tab .content .tab .item.active {
+  background: #e1251b;
+  color: #fff;
+}
+
+.scroll-tab .content .tab .item .number {
+  color: #e1251b;
+  font-family: arial;
+}
+
+.scroll-tab .content .tab .item.active .number {
+  color: #fff;
+}
+
+.scroll-tab .content .shop-search {
+  position: absolute;
+  right: 120px;
+  top: 6px;
+  display: flex;
+}
+
+.scroll-tab .content .shop-search .text {
+  height: 26px;
+  line-height: 26px;
+  vertical-align: top;
+  border: 1px solid #ddd;
+  background: #fff;
+  border-right: none;
+  font-size: 12px;
+  padding: 0 10px;
+}
+
+.scroll-tab .content .shop-search .btn {
+  width: 30px;
+  height: 28px;
+  position: relative;
+  background: #e1251b;
+}
+
+.scroll-tab .content .shop-search .btn::before {
+  position: absolute;
+  left: 8px;
+  top: 6px;
+  display: block;
+  width: 14px;
+  height: 14px;
+  content: ' ';
+  font-size: 0;
+  background: url(../images/icons.png) no-repeat;
+  background-position: 0 -58px;
+}
+
+.scroll-tab .content .shop-search .btn:hover {
+  opacity: 0.8;
+}
+
+.scroll-tab .content .add-cart-btn {
+  position: absolute;
+  right: 15px;
+  top: 6px;
+  height: 28px;
+  line-height: 28px;
+  padding: 0 15px;
+  background: #e1251b;
+  color: #fff;
+  -moz-transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.scroll-tab .content .add-cart-btn:hover {
+  opacity: 0.8;
+}
+
+/* 滑动导航 end */
+
+/* 商品数量-input: 去除input标签type='number' 的默认加减箭头 */
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+/* 秒杀/拼团未开始时的样式禁用样式 */
+.disabled-gray {
+  cursor: not-allowed !important;
+  background-color: #f7f7f7 !important;
+  color: #999 !important;
+}
+
+/* 评论 */
+.buyer-comment .text{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  /* -webkit-line-clamp: 3; */
+  -webkit-box-orient: vertical;
+  position: relative;
+  line-height: 1.5;
+  word-wrap: break-word;
+  word-break: break-all;
+  width: 816px;
+}
+
+/* 客服按钮 */
+.btn-im{
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin: 0 5px 3px 8px;
+  overflow: hidden;
+  background: url('../images/chat/sprite-im.png') no-repeat;
+  vertical-align: middle;
+}
+/* 客服按钮 */
+.im-chat:hover .btn-im{
+  background: url('../images/chat/sprite-im-hover.png') no-repeat;
+}
+.shop-box .im-chat:hover{
+  color: #e1251b;
+}
+.params {
+  display: flex;
+  border-bottom: 1px dashed #DCDCDC;
+}
+.params:last-child {
+  border: none;
+}
+.introduce .params-box {
+  width: 280px;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-right: 40px;
+}
+.introduce .params-box:nth-child(3n) {
+  margin-right: 0;
+}
+.introduce .params-box .key {
+  color: #999999;
+  float: left;
+  margin-left: 10px;
+}
+.introduce .params-box .value {
+  text-indent: 10px;
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+}

assets/css/discount-detail.css

@@ -0,0 +1,152 @@
+
+/* 特惠专场 */
+
+.discount-detail {
+    width: 1200px;
+    margin: 0 auto;
+}
+
+.discount-detail .banner {
+    width: 100%;
+    height: 360px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-top: 40px;
+    cursor: pointer;
+}
+
+.discount-detail .banner .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.discount-detail .banner .text-box {
+    position: relative;
+    margin-left: 50px;
+    width: 440px;
+    height: 300px;
+    background: #fff;
+    border-radius: 4px;
+}
+
+.discount-detail .banner .text-box .time {
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #0166b3;
+    color: #fff;
+    border-radius: 4px 4px 0 0;
+    padding: 20px 0;
+}
+
+.discount-detail .banner .text-box .time .time-icon {
+    width: 22px;
+    height: 22px;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    position: relative;
+    margin-right: 10px;
+}
+
+.discount-detail .banner .text-box .time .time-icon::before,
+.discount-detail .banner .text-box .time .time-icon::after {
+    position: absolute;
+    display: block;
+    content: " ";
+    background: #fff;
+}
+
+.discount-detail .banner .text-box .time .time-icon::before {
+    width: 2px;
+    height: 8px;
+    top: 6px;
+    left: 9px; 
+}
+
+.discount-detail .banner .text-box .time .time-icon::after {
+    width: 8px;
+    height: 2px;
+    top: 12px;
+    right: 5px;
+}
+
+.discount-detail .banner .text-box .time .much-time .day {
+    font-family: arial;
+    margin: 0 5px;
+}
+
+.discount-detail .banner .text-box .time .number-box {
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+}
+
+.discount-detail .banner .text-box .time .number-box .number {
+    padding: 3px 5px;
+    background: #fff;
+    border-radius: 4px;
+    font-family: arial;
+    color: #0166b3;
+}
+
+.discount-detail .banner .text-box .time .number-box .colon {
+    margin: 0 10px;
+}
+
+.discount-detail .banner .text-box .shop-logo {
+    width: 80px;
+    height: 80px;
+    font-size: 0;
+    margin: 20px auto;
+}
+
+.discount-detail .banner .text-box .shop-logo img {
+    width: 100%;
+    height: 100%;
+}
+
+.discount-detail .banner .text-box .shop-name {
+    margin: 0 20px 15px;
+    text-align: center;
+    font-size: 24px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.discount-detail .banner .text-box .info {
+    margin: 0 20px;
+    font-size: 30px;
+    font-weight: 600;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.discount-detail .discount-prod {
+    padding-top: 20px;
+}
+
+.discount-detail .discount-prod .activity-price {
+    display: flex;
+    height: 16px;
+    line-height: 16px;
+    margin-top: 10px;
+    color: #e1251b;
+    align-items: flex-end;
+    flex-wrap: wrap;
+}
+
+.discount-detail .discount-prod .old-price {
+    color: #999;
+    margin-left: 5px;
+    text-decoration: line-through;
+}
+
+/* 特惠专场 end */

assets/css/discount.css

@@ -0,0 +1,137 @@
+
+/* 限时特惠 */
+
+.discount-list {
+    width: 1200px;
+    margin: 0 auto;
+}
+
+.discount-list .list-con {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding-top: 20px;
+}
+
+.discount-list .list-con .item {
+    width: 590px;
+    height: 240px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    cursor: pointer;
+}
+
+.discount-list .list-con .item.no-bg {
+    background: #c8ab8b;
+}
+
+.discount-list .list-con .item.no-bg .bg {
+    display: none;
+}
+
+.discount-list .list-con .item .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.discount-list .list-con .item .text-box {
+    position: relative;
+    margin-left: 30px;
+    width: 220px;
+    height: 180px;
+    background: #fff;
+    border-radius: 4px;
+}
+
+.discount-list .list-con .item .text-box .time {
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f7f7f7;
+    border-radius: 4px 4px 0 0;
+    padding: 12px 0;
+}
+
+.discount-list .list-con .item .text-box .time .time-icon {
+    width: 12px;
+    height: 12px;
+    border: 1px solid #333;
+    border-radius: 50%;
+    position: relative;
+    margin-right: 5px;
+}
+
+.discount-list .list-con .item .text-box .time .time-icon::before,
+.discount-list .list-con .item .text-box .time .time-icon::after {
+    position: absolute;
+    display: block;
+    content: " ";
+    background: #333;
+}
+
+.discount-list .list-con .item .text-box .time .time-icon::before {
+    width: 1px;
+    height: 5px;
+    top: 3px;
+    left: 5px;   
+}
+
+.discount-list .list-con .item .text-box .time .time-icon::after {
+    width: 4px;
+    height: 1px;
+    top: 7px;
+    right: 3px; 
+}
+
+.discount-list .list-con .item .text-box .time .much-time .number {
+    font-family: arial;
+    color: #e1251b;
+    margin: 0 3px;
+}
+
+.discount-list .list-con .item .text-box .time .number-box {
+    margin-left: 5px;
+    display: flex;
+    align-items: center;
+}
+
+.discount-list .list-con .item .text-box .time .number-box .number {
+    padding: 1px 3px;
+    background: #444;
+    border-radius: 2px;
+    font-family: arial;
+    color: #fff;
+}
+
+.discount-list .list-con .item .text-box .time .number-box .colon {
+    margin: 0 3px;
+}
+
+.discount-list .list-con .item .text-box .logo {
+    width: 70px;
+    height: 70px;
+    font-size: 0;
+    margin: 15px auto;
+}
+
+.discount-list .list-con .item .text-box .logo img {
+    width: 100%;
+    height: 100%;
+}
+
+.discount-list .list-con .item .text-box .info {
+    font-size: 16px;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 10px;
+}
+
+/* 限时特惠 end */

assets/css/home.css

@@ -0,0 +1,354 @@
+
+/* 首页头部 */
+
+.home {
+    padding-bottom: 40px;
+}
+
+.home .up {
+  margin-top: 10px !important;
+}
+.home .head {
+    box-shadow: none;
+}
+
+.home .head .menu .item {
+    padding: 0 30px;
+}
+
+.home .head .menu-en .item {
+    padding: 0 20px;
+}
+
+.home .head .search {
+    display: none;
+}
+
+/* 首页头部 end */
+
+/* 首页轮播 */
+.banner .el-carousel.el-carousel--horizontal ul.el-carousel__indicators--horizontal .el-carousel__button {
+    background: #e1251b!important;
+}
+.el-carousel, .el-carousel-item, .el-carousel__container {
+    width: 100%;
+    height: 100%;
+}
+.banner .el-carousel.el-carousel--horizontal ul.el-carousel__indicators--horizontal {
+    bottom: 45px!important;
+}
+
+/* 首页搜索 */
+
+.home .home-search {
+    width: 1140px;
+    height: 40px;
+    padding: 20px 30px;
+    margin: -40px auto 0;
+    background: #fff;
+    position: relative;
+    box-shadow: 0 2px 8px rgba(0,0,0,.1);
+    -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.1);
+    display: flex;
+    z-index: 2;
+}
+
+.home .home-search .hot-word {
+    flex: 1;
+    display: flex;
+    line-height: 40px;
+    margin-left: auto;
+}
+
+.home .home-search .hot-word .tit {
+    font-size: 14px;
+    width: 95px;
+    word-break: keep-all;
+}
+
+.home .home-search .hot-word .con {
+    flex: 1;
+    overflow: hidden;
+    color: #999;
+    max-width: 430px;
+}
+
+.home .home-search .hot-word .con-en {
+    width: 340px;
+}
+
+.home .home-search .hot-word .con .item {
+    display: inline-block;
+    padding: 0 10px;
+    max-width: 20%;
+    text-align: center;
+    transition: all .2s;
+    -webkit-transition: all .2s;
+    cursor: pointer;
+    overflow: hidden;
+text-overflow:ellipsis;
+white-space: nowrap;
+
+}
+
+.home .home-search .hot-word .con .item:hover {
+    color: #e1251b;
+}
+
+.home .home-search .search-msg {
+    position: relative;
+    height: 40px;
+}
+
+.home .home-search .search-msg .search-input-box {
+    display: inline-block;
+    border: 2px solid #e1251b;
+    width: 450px;
+    height: 36px;
+}
+
+.home .home-search .search-msg .search-input-box .search-input {
+    display: inline-block;
+    width: 60%;
+    border: 0;
+    height: 35px;
+    padding: 0 10px;
+}
+
+.home .home-search .search-msg .search-input-box .select-search {
+    display: inline-block;
+    width: 10%;
+    line-height: 37px;
+    text-align: center;
+    cursor: pointer;
+    color: #e1251b;
+    position: relative;
+}
+
+.home .home-search .search-msg .search-input-box .select-search .select-box {
+    position: absolute;
+    top: -22px;
+    left: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.home .home-search .search-msg .search-input-box .select-search .switch-icon {
+    width: auto;
+    height: auto;
+    max-width: 10px;
+    max-height: 12px;
+    margin-left: 3px;
+}
+.search-msg .search-input-box .select-list {
+    display: inline-block;
+    width: 45px;
+    position: absolute;
+    top: 38px;
+    right: 95px;
+    background: #ffffff;
+    border: 2px solid #e1251b;
+    padding: 5px 0;
+}
+
+.select-list .select-item {
+    line-height: 1.5em;
+    text-align: center;
+    padding: 5px 0;
+    cursor: pointer;
+}
+
+.home .home-search .search-msg .search-btn {
+    border: 0;
+    background: #e1251b;
+    color: #fff;
+    height: 40px;
+    width: 90px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.home .home-search .cart-btn {
+    position: relative;
+    margin-left: 20px;
+    padding: 0 20px 0 47px;
+    background-color: #e1251b;
+    height: 40px;
+    line-height: 40px;
+    color: #fff;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all .2s;
+    -webkit-transition: all .2s;
+    position: relative;
+}
+
+.home .home-search .cart-btn::before {
+    position: absolute;
+    left: 17px;
+    top: 12px;
+    display: block;
+    width: 17px;
+    height: 15px;
+    content: " ";
+    background: url(../images/icons.png) no-repeat -44px -38px;
+}
+
+.home .home-search .cart-btn .number {
+    font-size: 12px;
+    font-family: arial;
+    display: inline-block;
+    padding: 0 5px;
+    background: #fff;
+    color: #e1251b;
+    height: 16px;
+    line-height: 16px;
+    min-width: 16px;
+    border-radius: 20px;
+    vertical-align: top;
+    margin-top: 12px;
+    margin-left: 10px;
+    text-align: center;
+    box-sizing: border-box;
+}
+
+.home .home-search .search-msg .search-btn:hover,
+.home .home-search .cart-btn:hover {
+    opacity: 0.9;
+}
+
+/* 首页搜索 end */
+
+/* banner */
+
+.banner {
+    width: 100%;
+    height: 450px;
+    position: relative;
+    overflow: hidden;
+}
+.banner-item{
+    width: 1920px; /*图片宽度*/
+    position: absolute;
+    left: 50%;
+    margin-left: -960px; /*图片宽度的一半*/
+}
+  /* .banner .item {
+    position: relative;
+    max-width: 100%;
+    height: 100%;
+    font-size: 0;
+} */
+.banner img {
+   background-color: #fff;
+}
+
+/* banner end  */
+
+/* 快捷入口 */
+
+.home .shortcut {
+    display: flex;
+    margin-top: 40px;
+}
+
+.home .shortcut .item {
+    width: 224px;
+    height: 224px;
+    margin-right: 20px;
+    cursor: pointer;
+}
+
+.home .shortcut .item:last-child {
+    margin-right: 0;
+}
+
+.home .shortcut .item.item01 {
+    background: #f7f7f9;
+}
+
+.home .shortcut .item.item02 {
+    background: #f8f7f9;
+}
+
+.home .shortcut .item.item03 {
+    background: #f7f9f8;
+}
+
+.home .shortcut .item.item04 {
+    background: #f7f8f9;
+}
+
+.home .shortcut .item.item05 {
+    background: #f8f7f9;
+}
+
+.home .shortcut .item .text {
+    margin: 20px 20px 0;
+}
+
+.home .shortcut .item .text .cn {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 600;
+}
+
+.home .shortcut .item .text .en {
+    font-size: 12px;
+    line-height: 15px;
+    color: #999;
+    margin-top: 5px;
+}
+
+.home .shortcut .item .img {
+    display: flex;
+    justify-content: flex-end;
+    -webkit-justify-content: flex-end;
+    align-items: flex-end;
+    -webkit-align-items: flex-end;
+    height: 144px;
+    padding: 0 20px 20px 0;
+    font-size: 0;
+}
+
+.home .shortcut .item .img img {
+    max-width: 140px;
+    max-height: 140px;
+    transition: all .2s;
+    -webkit-transition: all .2s;
+}
+
+.home .shortcut .item:hover .img img {
+    opacity: 0.8;
+}
+
+/* 快捷入口 end */
+
+/* 长条广告 */
+
+.home .adv {
+    margin-top: 40px;
+    cursor: pointer;
+    font-size: 0;
+    max-height: 300px;
+    display: block;
+}
+
+.home .adv img {
+    width: 100%;
+    height: 100%;
+}
+
+/* 长条广告 end */
+
+/* 首页列表 */
+
+  .goods-list {
+    margin-top: 40px;
+}
+
+/* 首页列表 end */

assets/css/integral-mall.css

@@ -0,0 +1,80 @@
+
+/* 购买会员 */
+
+.member-center .my-integral {
+    width: 1200px;
+    margin: 40px auto;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 20px;
+}
+
+.member-center .my-integral .my-img {
+    width: 60px;
+    height: 60px;
+    font-size: 0;
+    margin-left: 30px;
+}
+
+.member-center .my-integral .my-img img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    box-shadow: 0 2px 3px rgba(0,0,0,.08);
+}
+
+.member-center .my-integral .item {
+    padding: 0 50px;
+    border-right: 1px solid #eee;
+    color: #999;
+    text-align: center;
+}
+
+.member-center .my-integral .item .number {
+    font-family: arial;
+    font-size: 22px;
+    margin: 5px 0;
+}
+
+.member-center .my-integral .item.current .number {
+    color: #000;
+}
+
+.member-center .my-integral .item.current .text {
+    padding-left: 19px;
+    background: url(../images/memberPic/my-integral.png) no-repeat left center;
+    background-size: 14px;
+    display: inline-block;
+}
+
+.member-center .my-integral .record {
+    margin-left: 50px;
+    color: #999;
+    display: flex;
+    align-items: center;
+}
+
+.member-center .my-integral .record .icon {
+    width: 18px;
+    height: 23px;
+    background: url(../images/memberPic/record-icon.png) no-repeat center;
+    background-position: 0 0;
+    margin-right: 10px;
+}
+
+.member-center .my-integral .record .arr {
+    font-family: Consolas;
+    margin-left: 5px;
+}
+
+.member-center .my-integral .record:hover {
+    color: #e1251b;
+}
+
+.member-center .my-integral .record:hover .icon {
+    background-position: -23px 0;
+}
+
+/* 购买会员 end */

assets/css/invoice-detail.css

@@ -0,0 +1,347 @@
+
+/* 订单详情 */
+
+.order-detail {
+  background: #f9f9f9;
+}
+
+/* 订单状态 */
+
+.order-detail .status-process {
+  padding: 20px;
+  border-top: 2px solid #e1251b;
+  box-shadow: 0 1px 4px rgba(0,0,0,.05);
+  display: flex;
+  background: #fff;
+}
+
+
+/* 订单状态 end */
+
+
+/* 订单信息 */
+
+.order-detail .info-box .invoice-info {
+  margin-bottom: 30px;
+  padding: 20px;
+  box-shadow: 0 1px 4px rgba(0,0,0,.05);
+  display: flex;
+  background: #fff;
+}
+.order-detail .info-box .invoice-info:first-child {
+  border-top: 2px solid #e1251b;
+  margin-bottom: 30px;
+  padding: 20px;
+  box-shadow: 0 1px 4px rgba(0,0,0,.05);
+  display: flex;
+  background: #fff;
+}
+
+.order-detail .invoice-info .item {
+  width: 25%;
+  /* border-left: 1px solid #f5f5f5; */
+  line-height: 20px;
+  padding: 0 30px;
+}
+
+.order-detail .invoice-info .item:first-child {
+  padding-left: 10px;
+  border: 0;
+}
+
+.order-detail .invoice-info .item .tit {
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.order-detail .invoice-info .item .con {
+  padding-top: 10px;
+}
+
+.order-detail .invoice-info .item .con-item {
+  margin-top: 5px;
+  display: flex;
+}
+
+.order-detail .invoice-info .item .con-item .download{
+  cursor:pointer;
+}
+
+.order-detail .invoice-info .item .con-item .item-tit {
+  min-width: 70px;
+  color: #999;
+}
+.order-detail .invoice-info .item .con-item .item-tit.invoice-en {
+  width: 120px;
+  color: #999;
+}
+.order-detail .invoice-info .item .con-item .item-con {
+  flex: 1;
+  font-family: arial;
+  word-break:break-word;
+}
+
+.order-detail .invoice-info .item .con-item .item-con.invoice-status {
+  color: #E03B32
+}
+
+.order-detail .invoice-info .item .con-item .item-con.invoice-update {
+  color: #E03B32;
+  cursor:pointer;
+}
+
+/* 订单信息 end */
+
+/* 商品信息 */
+
+.order-detail .goods-box {
+  margin-top: 30px;
+}
+
+.order-detail .goods-box .shop {
+  height: 14px;
+  line-height: 14px;
+  padding: 0 10px 0;
+  margin-bottom: 15px;
+}
+
+.order-detail .goods-box .shop .shop-icon {
+  display: inline-block;
+  vertical-align: top;
+  width: 14px;
+  height: 14px;
+  margin-right: 3px;
+  background: url(../images/icons.png) no-repeat -28px -458px;
+}
+
+.order-detail .goods-box .shop:hover .shop-icon {
+  background-position: -9px -458px;
+}
+
+.order-detail .goods-box .shop .name {
+  display: inline-block;
+  vertical-align: top;
+  font-weight: bold;
+  color: #333333;
+}
+
+.order-detail .goods-box .goods-con {
+  background: #fff;
+  padding: 25px 20px 15px;
+  box-shadow: 0 1px 4px rgba(0,0,0,.05);
+}
+
+.order-detail .goods-box .order-table {
+  margin-bottom: 20px;
+}
+
+.order-detail .goods-box .order-table .box {
+  width: 100%;
+  text-align: center;
+}
+
+.order-detail .goods-box .order-table .box-tit th {
+  background: #f9f9f9;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  font-weight: 400;
+  border: 1px solid #f9f9f9;
+}
+
+.order-detail .goods-box .order-table .box-tit .tal {
+  text-align: left;
+}
+
+.order-detail .goods-box .order-table .box-tr td {
+  padding: 15px 0;
+  border-bottom: 1px solid #eee;
+  text-align: center;
+}
+
+.order-detail .goods-box .order-table .box-tr .goods-info {
+  /* max-width: 100%; */
+  max-width: 635px;
+  padding-left: 15px;
+  padding-right: 20px;
+  text-align: left;
+  display: flex;
+  box-sizing: border-box;
+}
+.order-detail .goods-box .order-table .box-tr .goods-info .name-sku {
+  max-width: 80%;
+  box-sizing: border-box;
+}
+.order-detail .goods-box .order-table .box-tr .goods-info .img {
+  display: block;
+  width: 60px;
+  height: 60px;
+  max-width: 60px;
+  height: 60px;
+  font-size: 0;
+  margin-right: 15px;
+}
+
+.order-detail .goods-box .order-table .box-tr .goods-info .img img {
+  width: 100%;
+  height: 100%;
+}
+
+.order-detail .goods-box .order-table .box-tr .goods-info .name-sku .name {
+  max-height: 36px;
+  line-height: 18px;
+  /* display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word; */
+}
+
+.order-detail .goods-box .order-table .box-tr .goods-info .name-sku .name:hover {
+  color: #e1251b;
+}
+
+.order-detail .goods-box .order-table .box-tr .goods-info .name-sku .sku .activity-logo {
+display: inline-block;
+background: #fc1b35;
+color: #fff;
+padding: 4px;
+line-height: 1em;
+border-radius: 3px;
+}
+
+.order-detail .goods-box .order-table .box-tr .goods-info .name-sku .sku {
+  display: block;
+  line-height: 18px;
+  margin-top: 6px;
+  color: #999;
+  word-break: break-word;
+}
+.order-detail .goods-box .order-table .box-tr .goods-info .name-sku .sku > span:first-child{
+margin-right: 10px;
+}
+
+.order-detail .goods-box .order-table .box-tr .goods-number {
+  text-align: left;
+}
+
+.order-detail .goods-box .order-table .box-tr .goods-number {
+  font-family: arial;
+}
+
+.order-detail .goods-box .order-table .box-tr .price {
+  font-family: verdana;
+  color: #000;
+}
+
+.order-detail .goods-box .order-table .box-tr .action-btn {
+  display: block;
+  border-radius: 2px;
+  min-width: 85px;
+  height: 18px;
+  line-height: 18px;
+  padding: 2px 0;
+  margin: 3px auto;
+  text-align: center;
+  background: #fff;
+  color: #e1251b;
+  border: 1px solid #e1251b;
+}
+
+.order-detail .goods-box .order-table .box-tr .action-btn:hover {
+  background: #e1251b;
+  color: #fff;
+}
+
+.order-detail .goods-box .goods-total {
+  background: #fff;
+  padding-right: 10px;
+  text-align: right;
+}
+
+.order-detail .goods-box .goods-total .item {
+  margin-bottom: 10px;
+}
+
+.order-detail .goods-box .goods-total .item .price.weak {
+color: #888;
+}
+
+.order-detail .goods-box .goods-total .item.refund-btn {
+margin-bottom: 30px;
+}
+
+/* 整单退款按钮 */
+.order-detail .goods-box .goods-total .item .action-btn {
+  display: inline-block;
+  border-radius: 2px;
+  width: 85px;
+  height: 18px;
+  line-height: 18px;
+  padding: 2px 0;
+  margin: 3px auto;
+  text-align: center;
+  background: #fff;
+  color: #e1251b;
+  border: 1px solid #e1251b;
+  margin-right: 15px;
+  cursor: pointer;
+}
+.order-detail .goods-box .goods-total .item .action-btn:hover {
+  background: #e1251b;
+  color: #fff;
+}
+
+
+.order-detail .goods-box .goods-total .item .tit,
+.order-detail .goods-box .goods-total .item .price {
+  display: inline-block;
+  vertical-align: top;
+  line-height: 20px;
+}
+
+.order-detail .goods-box .goods-total .item .price {
+  width: 120px;
+  color: #000;
+  font-family: verdana;
+}
+
+.order-detail .goods-box .goods-total .item .price.big {
+  color: #e1251b;
+  font-size: 16px;
+  font-weight: 600;
+  display: inline-block;
+  width: auto;
+}
+
+/* 商品信息 end */
+
+/* 订单详情 end */
+
+/* 常见问题 */
+.order-detail .questions-info {
+  margin-top: 30px;
+  padding: 20px;
+  /* border-top: 2px solid #e1251b; */
+  box-shadow: 0 1px 4px rgba(0,0,0,.05);
+  background: #fff;
+}
+.order-detail .questions-info .title{
+  font-size: 12px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  line-height: 24px;
+  color: #333333;
+}
+
+.order-detail .questions-info .text{
+  font-size: 12px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  line-height: 24px;
+  color:  #999999;
+}
+
+
+/* 常见问题 end */

assets/css/list.css

@@ -0,0 +1,277 @@
+
+/* 列表页 */
+
+.list {
+    background: #f9f9f9;
+}
+
+.list.list.search-list {
+    padding-bottom: 40px;
+    min-height: 535px;
+}
+
+.list .goods-list {
+    padding-bottom: 30px;
+}
+
+.list.search-list .goods-list .pages {
+    margin: 30px 30px 0 0;
+}
+
+.list.search-list .goods-list {
+    padding: 0 20px 30px;
+  }
+
+
+/* 列表页 end */
+
+/* 筛选 */
+
+.list .goods-sort {
+    background: #fff;
+    padding: 0 20px;
+    margin-bottom: 20px;
+}
+
+.list .goods-sort .sort-con {
+    display: flex;
+    padding: 20px 0 0 10px;
+    border-bottom: 1px dashed #ddd
+}
+
+.list .goods-sort .sort-con:last-child {
+    border: 0;
+}
+
+.list .goods-sort .sort-con .name {
+    color: #999;
+    margin-right: 20px;
+}
+
+.list .goods-sort .sort-con .group {
+    flex: 1;
+    margin-bottom: 4px;
+}
+
+.list .goods-sort .sort-con .group .item {
+    display: inline-block;
+    padding: 0 30px 16px 0;
+    transition: all .2s;
+    -webkit-transition: all .2s;
+    cursor: pointer;
+}
+
+.list .goods-sort .sort-con .group .item.active,
+.list .goods-sort .sort-con .group .item:hover {
+    color: #e1251b;
+}
+
+.list .goods-sort .sorts .arrow-down,
+.list .goods-sort .sorts .arrow-up {
+    display: inline-block;
+    vertical-align: top;
+    margin-left: 5px;
+    width: 0;
+    height: 0;
+    border: 5px solid transparent;
+    border-radius: 2px;
+}
+
+.list .goods-sort .sorts .arrow-down {
+    border-top: 5px solid #999;
+    margin-top: 5px;
+}
+
+.list .goods-sort .sorts .arrow-up {
+    border-bottom: 5px solid #999;
+}
+
+.list .goods-sort .sorts .item:hover .arrow-up,
+.list .goods-sort .sorts .item.active .arrow-up {
+    border-bottom-color: #e1251b;
+}
+
+.list .goods-sort .sorts .item:hover .arrow-down,
+.list .goods-sort .sorts .item.active .arrow-down {
+    border-top-color: #e1251b;
+}
+
+/* 筛选 */
+
+/* 拼团专区 */
+
+
+.list.group-buy {
+    background: #fff;
+}
+
+.list.group-buy .goods-list {
+    margin-top: 10px;
+    padding-bottom: 0;
+}
+
+.list .list-banner {
+    margin-top: 35px;
+    font-size: 0;
+}
+
+
+/* 拼团专区 end */
+
+/* 秒杀专场 */
+
+.list.flash-sale {
+    background: #fff;
+    /* min-height: 540px; */
+}
+
+.flash-sale .goods-list {
+    margin-top: 10px;
+    padding-bottom: 0;
+}
+
+/* .flash-sale .goods-list .list-con {
+    min-height: 427px;
+} */
+
+.flash-sale .goods-list .list-con .item .time-box {
+    background: #f9f9f9;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    position: absolute;
+    left: 0;
+    top: 240px;
+    height: 45px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.flash-sale .goods-list .list-con .item .time-box .text {
+    margin-right: 10px;
+}
+
+.flash-sale .goods-list .list-con .item .time-box .time {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+}
+
+.flash-sale .goods-list .list-con .item .time-box .time .time-item {
+    padding: 2px 5px;
+    background: #333;
+    color: #fff;
+    border-radius: 2px;
+    font-family: arial;
+}
+
+.flash-sale .goods-list .list-con .item .time-box .time-text {
+    margin: 0 5px;
+    color: #666;
+    font-family: arial;
+}
+
+.flash-sale .goods-list .list-con .item .goods-name {
+    font-size: 14px;
+    line-height: 20px;
+    padding: 0 10px;
+    margin-top: 12px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.flash-sale .goods-list .list-con .item .rest-number {
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+}
+
+.flash-sale .goods-list .list-con .item .rest-number .number-box {
+    flex: 1;
+    border: 1px solid #ee5e57;
+    background: #fff;
+    height: 10px;
+    border-radius: 20px;
+    overflow: hidden;
+}
+
+.flash-sale .goods-list .list-con .item .rest-number .number-box .percent {
+    background: #ffd8d8;
+    display: block;
+    height: 10px;
+}
+
+.flash-sale .goods-list .list-con .item .rest-number .number-text {
+    color: #999;
+    width: 60px;
+    margin-left: 10px;
+    font-family: arial;
+}
+
+.flash-sale .goods-list .list-con .item .goods-price {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    padding: 0 10px;
+}
+
+.flash-sale .goods-list .list-con .item .goods-price .price {
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.flash-sale .goods-list .list-con .item .goods-price .price .big {
+    font-size: 20px
+}
+
+.flash-sale .goods-list .list-con .item .goods-price .old-price {
+    color: #999;
+    text-decoration: line-through;
+    margin-left: 5px;
+    margin-top: 3px;
+    font-family: arial;
+}
+
+.flash-sale .goods-list .list-con .item .sellout-text {
+    position: absolute;
+    left: 90px;
+    top: 90px;
+    display: none;
+    width: 95px;
+    height: 95px;
+    /* line-height: 95px; */
+    border-radius: 50%;
+    background: rgba(0,0,0,.4);
+    color: #fff;
+    text-align: center;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+}
+
+.flash-sale .goods-list .list-con .item.sell-out .sellout-text {
+    display: block;
+}
+
+/* 秒杀专场 end */
+
+/* 优选好店 */
+
+
+/* 优选好店 end */
+
+.list-empty {
+    display: block;
+    font-size: 18px;
+    color: #bbb;
+    width: 100%;
+    line-height: 212px;
+    text-align: center;
+    letter-spacing: 1px;
+}
+

assets/css/login.css

@@ -0,0 +1,464 @@
+/* 登录 */
+
+.login {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1000;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.login .login-box {
+    position: relative;
+    z-index: 10000;
+    background: #fff;
+    padding: 10px 10px 50px;
+}
+
+.login .login-box .close {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    width: 20px;
+    height: 20px;
+    background: url(../images/icons.png) no-repeat;
+    background-position: 4px -228px;
+    cursor: pointer;
+}
+
+.login .login-box .login-header {
+    margin-top: 20px;
+    padding: 0 20px;
+    display: flex;
+    width: 316px;
+}
+
+.login .login-box .login-header .item {
+    flex: 1;
+    text-align: center;
+    font-size: 18px;
+    color: #666;
+    cursor: pointer;
+    position: relative;
+}
+
+.login .login-box .login-header .item:first-child {
+    padding: 10px 10px 10px 10px;
+}
+
+.login .login-box .login-header .item:last-child {
+    padding: 10px 10px 10px 10px;
+}
+
+.login .login-box .login-header .item:first-child::after {
+    position: absolute;
+    right: 0;
+    top: 12px;
+    bottom: 12px;
+    width: 1px;
+    height: auto;
+    display: block;
+    content: " ";
+    font-size: 0;
+    background: #eee;
+}
+
+.login .login-box .login-header .item.active {
+    color: #e1251b;
+}
+
+.login .login-box .login-con {
+    padding: 40px 30px;
+}
+
+.login .login-box .login-con .item {
+    position: relative;
+    margin-top: 15px;
+    border-radius: 2px;
+}
+
+.login .login-box .login-con .item:first-child {
+    margin-top: 0;
+}
+
+.login .login-box .login-con .item .icon {
+    position: absolute;
+    left: 0;
+    top: 1px;
+    width: 44px;
+    text-align: center;
+    height: 34px;
+}
+
+.login .login-box .login-con .item .icon::before {
+    position: absolute;
+    top: 8px;
+    left: 15px;
+    display: block;
+    width: 14px;
+    height: 18px;
+    content: " ";
+    background: url(../images/icons.png) no-repeat;
+}
+
+.login .login-box .login-con .item.phone .icon::before {
+    background-position: -38px -513px;
+}
+
+.login .login-box .login-con .item.account .icon::before {
+    background-position: 0 -513px;
+}
+
+.login .login-box .login-con .item.code .icon::before,
+.login .login-box .login-con .item.password .icon::before {
+    background-position: -19px -513px;
+}
+
+.login .login-box .login-con .item .input {
+    border: 1px solid #e8e8e8;
+    width: 206px;
+    height: 34px;
+    padding: 0 44px;
+}
+
+.login .login-box .login-con .cancel {
+    position: absolute;
+    right: 0;
+    top: 1px;
+    width: 44px;
+    height: 34px;
+    cursor: pointer;
+}
+
+.login .login-box .login-con .cancel::before {
+    position: absolute;
+    top: 9px;
+    left: 14px;
+    display: block;
+    width: 16px;
+    height: 16px;
+    content: " ";
+    background: url(../images/icons.png) no-repeat -56px -515px;
+}
+
+.login .login-box .login-con .item.code .input {
+    padding-right: 10px;
+    width: 150px;
+}
+
+.login .login-box .login-con .send-code {
+    position: absolute;
+    right: 0;
+    top: 0;
+    background: #f9f9f9;
+    border: 1px solid #eee;
+    border-left: 0;
+    width: 89px;
+    height: 34px;
+    line-height: 34px;
+    text-align: center;
+}
+
+.login .login-box .login-con .send-code:hover {
+    color: #e1251b;
+}
+
+.login .login-box .login-con .msg-error .input {
+    border-color: #e1251b;
+}
+
+.login .login-box .login-con .item.img-code .input {
+    padding-left: 10px;
+    padding-right: 10px;
+    width: 183px;
+}
+
+.login .login-box .login-con .item.img-code .code-img {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 91px;
+    height: 36px;
+    font-size: 0;
+}
+
+.login .login-box .login-con .item.img-code .code-img img {
+    width: 100%;
+    height: 100%;
+}
+
+.login .login-box .login-con .error {
+    margin-top: 10px;
+    padding-left: 23px;
+    position: relative;
+    color: #e1251b;
+    height: 16px;
+    line-height: 16px;
+}
+
+.login .login-box .login-con .error::before {
+    position: absolute;
+    left: 2px;
+    top: 1px;
+    display: block;
+    width: 14px;
+    height: 14px;
+    content: " ";
+    background: url(../images/icons.png) no-repeat -77px -517px;
+}
+
+.login .login-box .login-con .login-button {
+    display: block;
+    margin-top: 35px;
+    background: #e1251b;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+    height: 48px;
+    line-height: 48px;
+    font-size: 18px;
+    letter-spacing: 5px;
+}
+
+.login .login-box .login-con .login-button:hover {
+    opacity: 0.9;
+}
+
+.login .login-box .login-con .agree-box {
+    margin-top: 11px;
+    height: 14px;
+    line-height: 14px;
+    color: #999;
+    padding-left: 2px;
+}
+
+.login .login-box .login-con .agree-box-en {
+    width: 290px !important;
+    line-height: 20px !important;
+}
+
+.login .login-box .login-con .agree-box .text {
+    margin-left: 5px;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.login .login-box .login-con .agree-box .text .agreement {
+    color: #000;
+}
+
+.login .login-box .login-con .agree-box .text .agreement:hover {
+    text-decoration: underline;
+}
+
+.login .login-box .login-footer {
+    height: 51px;
+    background: #fcfcfc;
+    border-top: 1px solid #eee;
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    padding: 0 32px;
+    box-sizing: border-box;
+}
+
+.login .login-box .login-footer .other-login {
+    flex: 1;
+    display: flex;
+    align-items: center;
+}
+
+.login .login-box .login-footer .other-login .item {
+    display: block;
+    height: 18px;
+    line-height: 18px;
+    margin-left: 25px;
+    padding-left: 24px;
+    position: relative;
+    color: #999;
+}
+
+.login .login-box .login-footer .other-login .item:hover {
+    color: #000;
+}
+
+.login .login-box .login-footer .other-login .item:first-child {
+    margin-left: 10px;
+}
+
+.login .login-box .login-footer .other-login .item::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: " ";
+    font-size: 0;
+    display: block;
+    width: 18px;
+    height: 18px;
+    background: url(../images/icons.png) no-repeat;
+}
+
+.login .login-box .login-footer .other-login .item.qq-login::before {
+    background-position: 0 -536px;
+}
+
+.login .login-box .login-footer .other-login .item.weixin-login::before {
+    background-position: -23px -536px;
+}
+
+.login .login-box .login-footer .other-login .item::after {
+    position: absolute;
+    top: 3px;
+    right: -13px;
+    content: " ";
+    font-size: 0;
+    display: block;
+    width: 1px;
+    height: 14px;
+    background: #ddd;
+}
+
+.login .login-box .login-footer .other-login .item:last-child::after {
+    width: 0;
+}
+
+.login .login-box .login-footer .footer-a {
+    display: block;
+    line-height: 50px;
+    margin-right: 10px;
+    color: #999;
+}
+
+.login .login-box .login-footer .footer-a:hover {
+    color: #000;
+}
+
+
+/* 登录 end */
+
+
+/* 页面登录 */
+
+.login-page .l-header {
+    background: #fff;
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
+}
+
+.login-page .l-header .content {
+    display: flex;
+    padding: 20px 0;
+    align-items: center;
+}
+
+.login-page .l-header .logo {
+    cursor: pointer;
+    flex: 1;
+    display: flex;
+    margin-right: 60%;
+}
+
+.login-page .l-header .logo .img {
+    display: inline-block;
+    vertical-align: top;
+    width: 190px;
+    height: 48px;
+    /*background: url(../images/register-logo.png) no-repeat;*/
+    background-size: 100%;
+}
+
+.login-page .l-header .logo .text {
+    font-size: 0;
+    display: inline-block;
+    vertical-align: top;
+    line-height: 48px;
+    margin-left: 5px;
+}
+
+.login-page .l-header .go-register {
+    font-size: 14px;
+}
+
+.login-page .l-header .go-register .register-btn {
+    font-size: 13px;
+    display: inline-block;
+    padding: 6px 22px;
+    background: #e1251b;
+    color: #fff;
+    border-radius: 30px;
+    margin-left: 7px;
+}
+
+.login-page .l-content {
+    width: 100%;
+    height: 600px;
+    /*background: url(../images/login-bg.jpg) no-repeat center center;*/
+    position: relative;
+}
+
+.login-page .l-content .login {
+    width: 1200px;
+    height: 100%;
+    margin: auto;
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    position: relative;
+}
+
+.login-page .l-content .login .login-box .login-con {
+    padding: 30px 30px 40px;
+}
+
+.login-page .l-footer {
+    text-align: center;
+    color: #999;
+    padding-bottom: 30px;
+    margin-top: 30px;
+}
+
+.login-page .l-footer .links {
+    height: 20px;
+    line-height: 20px;
+    margin-bottom: 10px;
+}
+
+.login-page .l-footer .links .item {
+    display: inline-block;
+    vertical-align: top;
+    padding: 0 11px 0 10px;
+    position: relative;
+}
+
+.login-page .l-footer .links .item::after {
+    position: absolute;
+    right: -1px;
+    top: 4px;
+    bottom: 4px;
+    display: block;
+    width: 1px;
+    height: auto;
+    content: " ";
+    background: #ddd;
+}
+
+.login-page .l-footer .links .item:last-child::after {
+    width: 0;
+}
+
+.login-page .l-footer .links .item:hover {
+    text-decoration: underline;
+}
+
+.login-page .l-footer .copyright {
+    font-family: arial;
+}
+
+
+/* 页面登录 end */

assets/css/member-center.css

@@ -0,0 +1,705 @@
+/* 会员中心 */
+
+.member-center {
+  background: #f9f9f9;
+  margin-bottom: -40px;
+  padding-bottom: 40px;
+  min-height: 82vh;
+}
+
+/* 头部 */
+
+.member-center .member-head {
+  background: #fff;
+  width: 100%;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
+}
+
+.member-center .member-head .content {
+  display: flex;
+  align-items: center;
+  height: 50px;
+  padding: 20px 0;
+}
+
+.member-center .member-head .content .logo {
+  display: block;
+  height: 50px;
+  width: 146px;
+  background: url(../images/memberPic/member-logo.png) no-repeat center;
+}
+
+.member-center .member-head .content .nav {
+  flex: 1;
+  display: flex;
+  margin: 0 80px;
+}
+
+.member-center .member-head .content .nav .item {
+  padding: 0 25px;
+  font-size: 14px;
+  line-height: 50px;
+}
+
+.member-center .member-head .content .nav .item.active,
+.member-center .member-head .content .nav .item:hover {
+  color: #e1251b;
+}
+
+.member-center .member-head .content .user {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.member-center .member-head .content .user .user-box {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.member-center .member-head .content .user .img {
+  width: 35px;
+  height: 35px;
+  font-size: 0;
+}
+
+.member-center .member-head .content .user .img img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
+}
+
+.member-center .member-head .content .user .name {
+  margin: 0 20px 0 15px;
+  max-width: 80px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.member-center .member-head .content .user .out {
+  color: #999;
+  margin-right: 10px;
+}
+
+.member-center .member-head .content .user .out:hover {
+  color: #e1251b;
+}
+
+.member-center .member-head .content .user .grow-date {
+  position: absolute;
+  top: 50px;
+  right: 0;
+  background: #fff;
+  padding: 6px 15px 15px;
+  border-radius: 5px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  min-height: 30px;
+  display: none;
+}
+
+.member-center .member-head .content .user .user-box:hover .grow-date {
+  display: block;
+}
+
+.member-center .member-head .content .user .grow-date::before {
+  position: absolute;
+  right: 27%;
+  top: -14px;
+  display: block;
+  width: 0;
+  height: 0;
+  content: ' ';
+  border: 7px solid transparent;
+  border-bottom: 7px solid #eee;
+}
+
+.member-center .member-head .content .user .grow-date::after {
+  position: absolute;
+  right: 27%;
+  top: -13px;
+  display: block;
+  width: 0;
+  height: 0;
+  content: ' ';
+  border: 7px solid transparent;
+  border-bottom: 7px solid #fff;
+}
+
+.member-center .member-head .content .user .grow-date .growth-box,
+.member-center .member-head .content .user .grow-date .date {
+  display: flex;
+  margin-top: 10px;
+  align-items: center;
+}
+
+.member-center .member-head .content .user .grow-date .date {
+  width: 200px;
+}
+
+
+.member-center .member-head .content .user .grow-date .growth-box .text,
+.member-center .member-head .content .user .grow-date .date .text {
+  width: 50px;
+  white-space: nowrap;
+  font-family: arial;
+}
+
+.member-center .member-head .content .user .en .date {
+  width: 300px;
+}
+
+
+.member-center .member-head .content .user .en .growth-box .text,
+.member-center .member-head .content .user .en .date .text {
+  width: 100px;
+}
+
+.member-center .member-head .content .user .grow-date .growth-box .growth {
+  flex: 1;
+  min-width: 110px;
+  margin-left: 5px;
+  height: 12px;
+  background: #f0f2f5;
+  border-radius: 12px;
+  text-align: center;
+  position: relative;
+}
+
+.member-center
+  .member-head
+  .content
+  .user
+  .grow-date
+  .growth-box
+  .growth
+  .number {
+  font-family: arial;
+  display: block;
+  height: 12px;
+  line-height: 12px;
+  position: relative;
+}
+
+.member-center
+  .member-head
+  .content
+  .user
+  .grow-date
+  .growth-box
+  .growth
+  .percent {
+  height: 12px;
+  border-radius: 12px 0 0 12px;
+  background: #e6d0b7;
+  position: absolute;
+  left: 0;
+}
+
+.member-center .member-head .content .user .grow-date .growth-box .rank {
+  font-family: arial;
+  height: 14px;
+  line-height: 14px;
+  padding: 0 3px;
+  margin-left: 10px;
+  color: #fff;
+  background: -webkit-linear-gradient(left, #edae76, #863e00);
+  background: -o-linear-gradient(right, #edae76, #863e00);
+  background: -moz-linear-gradient(right, #edae76, #863e00);
+  background: linear-gradient(to right, #edae76, #863e00);
+  white-space: nowrap;
+  border-radius: 2px;
+}
+
+.grow-date .rank{
+  font-family: arial;
+  width: 45px;
+  height: 14px;
+  line-height: 14px;
+  padding: 0 3px;
+  color: #fff;
+  background: linear-gradient(to right, #edae76, #863e00);
+  border-radius: 2px;
+}
+
+.member-center .member-head .content .user .grow-date .date .time {
+  margin-left: 5px;
+  font-family: arial;
+}
+
+/* 头部 end */
+
+/* banner */
+
+.member-center .member-banner {
+  height: 380px;
+  background: url(../images/memberPic/member-banner.jpg) no-repeat center;
+}
+
+.member-center .member-banner .banner-box {
+  width: 1200px;
+  height: 100%;
+  margin: auto;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.member-center .member-banner .banner-box .login-box {
+  background: #fff;
+  padding: 20px;
+  width: 270px;
+  height: 290px;
+  border-radius: 3px;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
+}
+
+.member-center .member-banner .banner-box .login-box .head-portrait {
+  width: 60px;
+  height: 60px;
+  font-size: 0;
+  margin: auto;
+}
+
+.member-center .member-banner .banner-box .login-box .head-portrait img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
+}
+
+.member-center .member-banner .banner-box .login-box .user-name {
+  /* display: flex;
+  flex-direction: column; */
+  text-align: center;
+  margin-top: 10px;
+  max-width: 270px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.member-center .member-banner .banner-box .login-box .user-name.red {
+  color: #e1251b;
+}
+
+.member-center .member-banner .banner-box .login-box .btn {
+  display: block;
+  background: #e1251b;
+  color: #fff;
+  width: 150px;
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  border-radius: 36px;
+  font-size: 12px;
+  margin: 20px auto 35px;
+}
+
+.member-center .member-banner .banner-box .login-box .btn:hover {
+  opacity: 0.9;
+}
+
+.member-center .member-banner .banner-box .login-box .growth-box {
+  display: flex;
+  margin-top: 10px;
+  align-items: center;
+}
+
+.member-center .member-banner .banner-box .login-box .growth-box .growth {
+  flex: 1;
+  max-width: 138px;
+  margin-left: 5px;
+  height: 12px;
+  background: #f0f2f5;
+  border-radius: 12px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.member-center
+  .member-banner
+  .banner-box
+  .login-box
+  .growth-box
+  .growth
+  .number {
+  font-family: arial;
+  display: block;
+  height: 12px;
+  line-height: 12px;
+  position: relative;
+}
+
+.member-center
+  .member-banner
+  .banner-box
+  .login-box
+  .growth-box
+  .growth
+  .percent {
+  height: 12px;
+  border-radius: 12px 0 0 12px;
+  background: #e6d0b7;
+  position: absolute;
+  left: 0;
+}
+
+.member-center .member-banner .banner-box .login-box .growth-box .rank {
+  font-family: arial;
+  height: 14px;
+  line-height: 14px;
+  padding: 0 3px;
+  margin-left: 10px;
+  color: #fff;
+  background: -webkit-linear-gradient(left, #edae76, #863e00);
+  background: -o-linear-gradient(right, #edae76, #863e00);
+  background: -moz-linear-gradient(right, #edae76, #863e00);
+  background: linear-gradient(to right, #edae76, #863e00);
+  border-radius: 2px;
+}
+
+.member-center .member-banner .banner-box .login-box .user-name .rank {
+  font-family: arial;
+  width: 42px;
+  height: 14px;
+  line-height: 14px;
+  padding: 0 3px;
+  margin: auto;
+  margin-top: 10px;
+  color: #fff;
+  background: -webkit-linear-gradient(left, #edae76, #863e00);
+  background: -o-linear-gradient(right, #edae76, #863e00);
+  background: -moz-linear-gradient(right, #edae76, #863e00);
+  background: linear-gradient(to right, #edae76, #863e00);
+  border-radius: 2px;
+}
+
+.member-center .member-banner .banner-box .login-box .shortcut {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-around;
+  text-align: center;
+}
+
+.member-center .member-banner .banner-box .login-box .shortcut .item .icon {
+  display: block;
+  margin: auto;
+  width: 50px;
+  height: 50px;
+  font-size: 0;
+  -moz-transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  transition: all 0.2s;
+}
+
+.member-center
+  .member-banner
+  .banner-box
+  .login-box
+  .shortcut
+  .item:hover
+  .icon {
+  opacity: 0.8;
+}
+
+.member-center .member-banner .banner-box .login-box .shortcut .item .icon img {
+  width: 100%;
+  height: 100%;
+}
+
+.member-center .member-banner .banner-box .login-box .shortcut .item .text {
+  display: block;
+  margin-top: 5px;
+}
+
+/* banner end */
+
+.member-center .member-tit {
+  margin-top: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.member-center .member-tit .text {
+  position: relative;
+  font-size: 16px;
+  padding-left: 10px;
+}
+
+.member-center .member-tit .text::before {
+  position: absolute;
+  left: 0;
+  top: 20%;
+  bottom: 18%;
+  display: block;
+  width: 3px;
+  height: auto;
+  content: ' ';
+  border-radius: 3px;
+  background: #e1251b;
+}
+
+.member-center .member-tit .more {
+  display: flex;
+  color: #999;
+}
+
+.member-center .member-tit .more .arr {
+  font-family: Consolas;
+  margin-left: 5px;
+}
+
+.member-center .member-tit .more:hover {
+  color: #e1251b;
+}
+
+/* 会员权益 */
+
+.member-center .member-equity .con {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.member-center .member-equity .con .item {
+  background: #fff;
+  width: 285px;
+  height: 130px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 20px;
+}
+
+.member-center .member-equity .con .item .icon {
+  width: 80px;
+  height: 80px;
+  font-size: 0;
+  margin-left: 5px;
+  border-radius: 50%;
+  box-shadow: 0 5px 8px rgba(243, 188, 141, 0.3);
+}
+
+.member-center .member-equity .con .item .icon img {
+  width: 100%;
+  height: 100%;
+}
+
+.member-center .member-equity .con .item .text-box {
+  margin-left: 25px;
+  width: 140px;
+}
+
+.member-center .member-equity .con .item .text-box .text {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.member-center .member-equity .con .item .text-box .des {
+  color: #999;
+  margin-top: 15px;
+}
+
+/* 会员权益 end */
+
+/* 签到&任务 */
+
+.member-center .sign-mission .tit-box {
+  display: flex;
+  justify-content: space-between;
+}
+
+.member-center .sign-mission .tit-box .mission-tit {
+  width: 400px;
+}
+
+.member-center .sign-mission .con {
+  display: flex;
+  margin-top: 20px;
+}
+
+.member-center .sign-mission .con .sign {
+  flex: 1;
+  background: #fff;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 20px;
+}
+
+.member-center .sign-mission .con .sign .item {
+  text-align: center;
+  font-size: 14px;
+}
+
+.member-center .sign-mission .con .sign .item .number {
+  border: 1px solid #e1251b;
+  width: 58px;
+  height: 58px;
+  line-height: 58px;
+  border-radius: 50%;
+  color: #e1251b;
+  font-family: arial;
+  cursor: pointer;
+}
+
+.member-center .sign-mission .con .sign .item .number.active {
+  color: #fff;
+  border-color: #e1251b;
+  background: #e1251b;
+}
+
+.member-center .sign-mission .con .sign .item .text {
+  margin-top: 15px;
+}
+
+.member-center .sign-mission .con .mission {
+  width: 360px;
+  padding: 20px;
+  margin-left: 20px;
+  background: #fff;
+}
+
+.member-center .sign-mission .con .mission .item {
+  display: flex;
+  align-items: center;
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid #eee;
+}
+
+.member-center .sign-mission .con .mission .item:first-child {
+  margin-top: 0;
+  padding-top: 0;
+  border: 0;
+}
+
+.member-center .sign-mission .con .mission .item .text-box {
+  flex: 1;
+  margin-right: 20px;
+}
+
+.member-center .sign-mission .con .mission .item .text-box .text,
+.member-center .sign-mission .con .mission .item .text-box .des {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.member-center .sign-mission .con .mission .item .text-box .text {
+  font-size: 14px;
+}
+
+.member-center .sign-mission .con .mission .item .text-box .des {
+  font-size: 12px;
+  color: #999;
+  margin-top: 10px;
+}
+
+.member-center .sign-mission .con .mission .item .btn {
+  padding: 5px 18px;
+  background: #e1251b;
+  color: #fff;
+  border-radius: 30px;
+}
+
+.member-center .sign-mission .con .mission .item .btn:hover {
+  opacity: 0.9;
+}
+
+.member-center .sign-mission .con .mission .item .btn.default {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
+.member-center .sign-mission .con .mission .item .btn.default:hover {
+  opacity: 1;
+}
+
+/* 签到&任务 end */
+
+/* 兑换列表 */
+
+.member-center .goods-list.integral-list {
+  background: #f9f9f9;
+  margin-top: 20px;
+  padding: 0 20px 20px;
+  background: #fff;
+}
+
+.member-center .goods-list.integral-list .list-con .item {
+  width: 275px;
+}
+
+.member-center .goods-list.integral-list .list-con .item .goods-img {
+  width: 275px;
+  height: 275px;
+  line-height: 275px;
+}
+
+.member-center
+  .goods-list.integral-list
+  .list-con
+  .item
+  .goods-msg
+  .goods-price
+  .icon {
+  width: 14px;
+  height: 14px;
+  font-size: 0;
+  margin-right: 5px;
+}
+
+.member-center
+  .goods-list.integral-list
+  .list-con
+  .item
+  .goods-msg
+  .goods-price
+  .icon
+  img {
+  width: 100%;
+  height: 100%;
+}
+
+.member-center
+  .goods-list.integral-list
+  .list-con
+  .item
+  .goods-msg
+  .goods-price
+  .integral-price {
+  color: #e1251b;
+  font-family: arial;
+}
+
+.member-center
+  .goods-list.integral-list
+  .list-con
+  .item
+  .goods-msg
+  .goods-price
+  .add {
+  margin: 0 5px;
+  color: #e1251b;
+  font-family: arial;
+}
+
+.member-center .goods-list.integral-list .list-con .item .goods-msg .old-price {
+  margin-top: 3px;
+  color: #999;
+  text-decoration: line-through;
+}
+
+/* 兑换列表 */
+
+/* 会员中心 end */

assets/css/member-equity.css

@@ -0,0 +1,265 @@
+
+/* 会员权益 */
+
+.member-center.equity {
+    background: #fff;
+}
+
+/* 会员成长体系 */
+
+.member-center.equity .member-equity {
+    width: 1200px;
+    margin: 50px auto 0;
+}
+
+.member-center.equity .member-equity .tit {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.member-center.equity .member-equity .tit .tit-bg {
+    width: 44px;
+    height: 10px;
+    background: url(../images/memberPic/member-tit-bg.png) no-repeat;
+}
+
+.member-center.equity .member-equity .tit .tit-bg.tit-r {
+    transform: rotate(180deg);
+}
+
+.member-center.equity .member-equity .tit .text {
+    margin: 0 20px;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.member-center.equity .member-equity .growth-system {
+    background: #f9f9f9;
+    padding: 50px 40px 40px;
+    margin: 40px auto;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+}
+
+.member-center.equity .member-equity .growth-system .item {
+    width: 100px;
+    margin-right: 80px;
+    position: relative;
+}
+
+.member-center.equity .member-equity .growth-system .item::after {
+    position: absolute;
+    left: 0;
+    bottom: 29px;
+    display: block;
+    width: 180px;
+    height: 1px;
+    content: " ";
+    background: #dedede;
+}
+
+.member-center.equity .member-equity .growth-system .item:last-child::after {
+    width: 100%;
+}
+
+.member-center.equity .member-equity .growth-system .item:last-child {
+    margin-right: 0;
+}
+
+.member-center.equity .member-equity .growth-system .item .condition {
+    color: #999;
+    margin-bottom: 10px;
+    line-height: 18px;
+}
+
+.member-center.equity .member-equity .growth-system .item .lv {
+    position: relative;
+    width: 100%;
+}
+
+.member-center.equity .member-equity .growth-system .item .lv1 {
+    height: 40px;
+    background: #dedede;
+}
+
+.member-center.equity .member-equity .growth-system .item .lv1::before {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: block;
+    width: 640px;
+    height: 1px;
+    content: " ";
+    background: #dedede;
+}
+
+.member-center.equity .member-equity .growth-system .item .lv2 {
+    height: 120px;
+    background: #c9b485;
+}
+
+.member-center.equity .member-equity .growth-system .item .lv2::before {
+    position: absolute;
+    left: -180px;
+    top: 0;
+    display: block;
+    width: 640px;
+    height: 1px;
+    content: " ";
+    background: #dedede;
+}
+
+.member-center.equity .member-equity .growth-system .item .lv3 {
+    height: 200px;
+    background: #b79271;
+}
+
+.member-center.equity .member-equity .growth-system .item .lv3::before {
+    position: absolute;
+    left: -360px;
+    top: 0;
+    display: block;
+    width: 640px;
+    height: 1px;
+    content: " ";
+    background: #dedede;
+}
+
+.member-center.equity .member-equity .growth-system .item .lv4 {
+    height: 280px;
+    background: #6d543e;
+}
+
+.member-center.equity .member-equity .growth-system .item .lv4::before {
+    position: absolute;
+    left: -540px;
+    top: 0;
+    display: block;
+    width: 640px;
+    height: 1px;
+    content: " ";
+    background: #dedede;
+}
+
+.member-center.equity .member-equity .growth-system .item .text {
+    text-align: center;
+    font-size: 14px;
+    font-weight: 600;
+    margin-top: 10px;
+    height: 20px;
+}
+
+/* 会员成长体系 end */
+
+/* 会员福利体系 */
+
+.member-center.equity .member-equity .welfare-system {
+    width: 700px;
+    margin: 40px auto;
+}
+
+.member-center.equity .member-equity .welfare-system .w-tit {
+    display: flex;
+    background: #dedede;
+}
+
+.member-center.equity .member-equity .welfare-system .w-tit .item {
+    flex: 1;
+    text-align: center;
+    padding: 15px 0;
+    font-size: 14px;
+    font-family: arial;
+    border: 1px solid #dedede;
+}
+
+.member-center.equity .member-equity .welfare-system .w-tit .item:first-child {
+    background: #000;
+    color: #fff;
+    border-color: #000;
+    font-weight: 600;
+}
+
+.member-center.equity .member-equity .welfare-system .w-tit.vip-tit {
+    background: #6d543e;
+}
+
+.member-center.equity .member-equity .welfare-system .w-tit.vip-tit .item {
+    border-color: #6d543e;
+    color: #fff;
+}
+
+.member-center.equity .member-equity .welfare-system .w-tit.vip-tit .item:first-child {
+    background: #c3ab7d;
+    border-color: #c3ab7d;
+}
+
+.member-center.equity .member-equity .welfare-system .w-con {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    border-bottom: 1px solid #eee;
+    margin-bottom: -1px;
+    color: #999;
+}
+
+.member-center.equity .member-equity .welfare-system .w-con .item {
+    flex: 1;
+    padding: 20px 0;
+    border-right: 1px solid #eee;
+}
+
+.member-center.equity .member-equity .welfare-system .w-con .item:last-child {
+    border: 0;
+}
+
+.member-center.equity .member-equity .welfare-system .w-con .item.big-item {
+    flex: 4;
+}
+
+/* 会员福利体系 end */
+
+/* 会员福利说明 */
+
+.member-center.equity .member-equity .welfare-explain {
+    margin: 40px auto 20px;
+    width: 700px;
+}
+
+.member-center.equity .member-equity .welfare-explain .item {
+    display: flex;
+    margin-top: 40px;
+}
+
+.member-center.equity .member-equity .welfare-explain .item .img {
+    width: 75px;
+    height: 75px;
+    font-size: 0;
+}
+
+.member-center.equity .member-equity .welfare-explain .item .img img {
+    width: 100%;
+    height: 100%;
+}
+
+.member-center.equity .member-equity .welfare-explain .item .text-box {
+    margin-left: 40px;
+    flex: 1;
+}
+
+.member-center.equity .member-equity .welfare-explain .item .text-box .text {
+    margin-top: 5px;
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.member-center.equity .member-equity .welfare-explain .item .text-box .des {
+    margin-top: 10px;
+    line-height: 18px;
+    color: #999;
+}
+
+/* 会员福利说明 end */
+
+/* 会员权益 end */

assets/css/notice-detail.css

@@ -0,0 +1,188 @@
+
+/* 公告详情 */
+
+.notice-detail {
+    background: #f9f9f9;
+    padding-bottom: 40px;
+}
+
+.notice-detail .notic-box {
+    display: flex;
+    align-items: flex-start;
+}
+
+.notice-detail .notic-box .det {
+    flex: 1;
+    background: #fff;
+    padding: 30px;
+    /* margin-right: 20px; */
+    min-height: 420px;
+}
+
+.notice-detail .notic-box .det .tit {
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 20px;
+}
+
+.notice-detail .notic-box .det .time-box {
+    display: flex;
+    align-items: center;
+    color: #999;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #eee;
+}
+
+.notice-detail .notic-box .det .time-box .time {
+    font-family: arial;
+}
+
+.notice-detail .notic-box .det .con {
+    margin-top: 20px;
+    font-size: 12px;
+    color: #999;
+    line-height: 20px;
+    word-break: break-word;
+}
+
+.notice-detail .notic-box .list-box {
+    background: #fff;
+    width: 350px;
+}
+
+.notice-detail .notic-box .list-box .more {
+    display: flex;
+    align-items: center;
+    height: 20px;
+    padding: 20px;
+    background: #f2f2f2;
+    cursor: pointer;
+}
+
+.notice-detail .notic-box .list-box .more:hover {
+    background: #eee;
+}
+
+.notice-detail .notic-box .list-box .more .text {
+    font-size: 16px;
+    flex: 1;
+}
+
+.notice-detail .notic-box .list-box .more .arrow {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #333;
+    position: relative;
+    margin-top: 3px;
+}
+
+.notice-detail .notic-box .list-box .more .arrow::after {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    display: block;
+    content: " ";
+    font-size: 0;
+    width: 4px;
+    height: 4px;
+    border: 1px solid #fff;
+    border-width: 1px 1px 0 0;
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+.notice-detail .notic-box .list-box .list .item {
+    padding: 20px 30px;
+    cursor: pointer;
+    position: relative;
+}
+
+.notice-detail .notic-box .list-box .list .item::after {
+    position: absolute;
+    bottom: 0;
+    left: 30px;
+    right: 30px;
+    display: block;
+    width: auto;
+    height: 1px;
+    content: " ";
+    font-size: 0;
+    background: #eee;
+}
+
+.notice-detail .notic-box .list-box .list .item:hover {
+    background: #fcfcfc;
+}
+
+.notice-detail .notic-box .list-box .list .item:last-child::after {
+    height: 0;
+}
+
+.notice-detail .notic-box .list-box .list .item .tit {
+    font-weight: 600;
+    font-size: 14px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.notice-detail .notic-box .list-box .list .item .time {
+    color: #999;
+    margin-top: 10px;
+}
+
+.notice-detail .notic-box .list-box .list .item.arrow-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 26px;
+}
+
+.notice-detail .notic-box .list-box .list .item .prev-arrow,
+.notice-detail .notic-box .list-box .list .item .next-arrow {
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    background: #eee;
+    position: relative;
+    margin: 0 15px;
+    cursor: pointer;
+}
+
+.notice-detail .notic-box .list-box .list .item .prev-arrow.disable,
+.notice-detail .notic-box .list-box .list .item .next-arrow.disable {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.notice-detail .notic-box .list-box .list .item .prev-arrow::after,
+.notice-detail .notic-box .list-box .list .item .next-arrow::after {
+    position: absolute;
+    display: block;
+    content: " ";
+    font-size: 0;
+    width: 6px;
+    height: 6px;
+    border: 1px solid #333;
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+.notice-detail .notic-box .list-box .list .item .prev-arrow::after {
+    left: 11px;
+    top: 9px;
+    border-width: 0 0 1px 1px;
+}
+
+.notice-detail .notic-box .list-box .list .item .next-arrow::after {
+    left: 9px;
+    top: 9px;
+    border-width: 1px 1px 0 0;
+}
+
+/* 公告详情 end */

assets/css/notice-list.css

@@ -0,0 +1,72 @@
+
+/* 公告列表 */
+
+.notice-list {
+    background: #f7f7f7;
+    padding-bottom: 40px;
+}
+
+.notice-list .list {
+    background: #fff;
+}
+
+.notice-list .list .item {
+    padding: 25px 30px;
+    cursor: pointer;
+    display: flex;
+    position: relative;
+}
+
+.notice-list .list .item::after {
+    position: absolute;
+    bottom: 0;
+    left: 30px;
+    right: 30px;
+    display: block;
+    width: auto;
+    height: 1px;
+    content: " ";
+    font-size: 0;
+    background: #eee;
+}
+
+.notice-list .list .item:last-child::after {
+    height: 0;
+}
+
+.notice-list .list .item .tit {
+    flex: 1;
+    font-size: 14px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.notice-list .list .item:hover .tit {
+    font-weight: 600;
+}
+
+.notice-list .list .item .time {
+    color: #999;
+}
+
+.notice-list .list .item:hover .time {
+    color: #000;
+}
+
+.notice-list .pages {
+    justify-content: center;
+}
+
+.empty-tips {
+    text-align: center;
+    color: #999;
+}
+
+.empty-tips > img {
+    width: 250px;
+    height: 200px;
+}
+/* 公告列表 end */

assets/css/order-detail.css

@@ -0,0 +1,839 @@
+/* 订单详情 */
+
+.order-detail {
+  background: #f9f9f9;
+}
+
+/* 订单状态 */
+
+.order-detail .status-process {
+  padding: 20px;
+  border-top: 2px solid #e1251b;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  display: flex;
+  background: #fff;
+}
+
+.order-detail .status-process .status-box {
+  padding: 20px 30px 20px 20px;
+  text-align: center;
+  position: relative;
+  border-right: 1px solid #f5f5f5;
+}
+
+.order-detail .status-process .status-box .order-number {
+  width: 190px;
+  color: #999;
+}
+
+.order-detail .status-process .status-box .status {
+  font-size: 18px;
+  padding: 25px 0 20px;
+  font-weight: 600;
+  color: #e1251b;
+}
+.order-detail .status-process .invoice-detail {
+  width: 99px;
+  height: 24px;
+  background: #F9F9F9;
+  border: 1px solid #DCDCDC;
+  line-height: 24px;
+  text-align: center;
+  color: #333333;
+  font-size: 12px;
+  border-radius: 2px;
+  cursor:pointer;
+  padding: 0 2px;
+  margin: 5px auto;
+}
+.order-detail .status-process .status-box .description {
+  color: #999;
+}
+
+.order-detail .status-process .status-box .action {
+  margin-top: 30px;
+}
+
+.order-detail .status-process .status-box .action .action-a.red {
+  margin-right: 20px;
+  color: #e1251b;
+}
+
+.order-detail .status-process .status-box .action .action-a.btn {
+  background: #f5f5f5;
+  height: 18px;
+  line-height: 18px;
+  border: 1px solid #ddd;
+  padding: 4px 15px;
+}
+
+.order-detail .status-process .status-box .action .action-a.btn:hover {
+  color: #e1251b;
+  border-color: #e1251b;
+  background: #fff;
+}
+
+.order-detail .status-process .status-box .action .action-a:hover {
+  color: #e1251b;
+}
+
+.order-detail .status-process .process-box {
+  padding: 20px;
+  margin-left: 20px;
+}
+
+.order-detail .status-process .process-box .tip {
+  color: #999;
+}
+
+.order-detail .status-process .process-box .process {
+  display: flex;
+  text-align: center;
+}
+
+.order-detail .status-process .process-box .item {
+  margin-right: 20px;
+  padding-right: 110px;
+}
+
+.order-detail-en .status-process .process-box .item {
+  padding-right: 80px;
+}
+
+.order-detail .status-process .process-box .item:last-child {
+  margin: 0;
+  padding: 0;
+}
+
+.order-detail .status-process .process-box .item .img {
+  width: 30px;
+  height: 30px;
+  margin: 30px auto 25px;
+  background: url(../images/icons.png) no-repeat;
+  position: relative;
+}
+
+.order-detail .status-process .process-box .item .img.process01 {
+  background-position: 0 -711px;
+}
+
+.order-detail .status-process .process-box .item .img.process02 {
+  background-position: -35px -676px;
+}
+
+.order-detail .status-process .process-box .item.active .img.process02 {
+  background-position: -35px -711px;
+}
+
+.order-detail .status-process .process-box .item .img.process03 {
+  background-position: -70px -676px;
+}
+
+.order-detail .status-process .process-box .item.active .img.process03 {
+  background-position: -70px -711px;
+}
+
+.order-detail .status-process .process-box .item .img.process04 {
+  background-position: -105px -676px;
+}
+
+.order-detail .status-process .process-box .item.active .img.process04 {
+  background-position: -105px -711px;
+}
+
+.order-detail .status-process .process-box .item .img.process05 {
+  background-position: -140px -676px;
+}
+
+.order-detail .status-process .process-box .item.active .img.process05 {
+  background-position: -140px -711px;
+}
+
+.order-detail .status-process .process-box .item .img:after {
+  position: absolute;
+  top: 10px;
+  right: -115px;
+  display: block;
+  content: ' ';
+  width: 88px;
+  height: 10px;
+  background: url(../images/icons.png) no-repeat -175px -686px;
+}
+
+.order-detail .status-process .process-box .item.active .img:after {
+  background-position: -175px -721px;
+}
+
+.order-detail .status-process .process-box .item:last-child .img:after {
+  width: 0;
+}
+
+.order-detail .status-process .process-box .item .text {
+  margin-bottom: 10px;
+  color: #999;
+}
+
+.order-detail .status-process .process-box .item.active .text {
+  color: #000;
+}
+
+.order-detail .status-process .process-box .item .time {
+  color: #999;
+  font-family: arial;
+  width: 68px;
+}
+
+/* 订单状态 end */
+
+/* 配送信息 */
+
+.order-detail .delivery-box {
+  margin-top: 30px;
+}
+
+.order-detail .delivery-box .box-tab {
+  display: flex;
+  align-items: center;
+  margin-left: -1px;
+  overflow-x: auto;
+}
+
+.order-detail .delivery-box .box-tab .item {
+  position: relative;
+  padding: 9px 25px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.order-detail .delivery-box .box-tab .item.active {
+  background: #fff;
+  color: #000;
+  font-weight: 600;
+  border-radius: 2px 2px 0 0;
+  border: 1px solid #f2f2f2;
+  border-bottom: 0;
+}
+
+.order-detail .delivery-box .box-con {
+  padding: 20px;
+  background: #fff;
+  display: flex;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+}
+
+.order-detail .delivery-box .box-con .deliver-msg {
+  width: 460px;
+}
+
+.order-detail .delivery-box .box-con .deliver-msg .d-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.order-detail .delivery-box .box-con .deliver-msg .d-item .text {
+  width: 80px;
+}
+
+.order-detail .delivery-box .box-con .deliver-msg .d-item .res {
+  word-break: break-word;
+  max-width: 370px;
+}
+
+.order-detail .delivery-box .box-con .deliver-msg .d-goods {
+  position: relative;
+  width: 340px;
+  margin: 30px 0 0;
+}
+
+.order-detail .delivery-box .box-con .deliver-msg .d-goods.over {
+  margin: 30px 32px 0;
+}
+
+.order-detail .delivery-box .box-con .deliver-msg .d-goods .arrow {
+  position: absolute;
+  top: 28px;
+  width: 22px;
+  height: 22px;
+  background: #eee;
+  border-radius: 50%;
+  cursor: pointer;
+  display: none;
+}
+
+.order-detail .delivery-box .box-con .deliver-msg .d-goods .arrow.disable {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.order-detail .delivery-box .box-con .deliver-msg .d-goods.over .arrow {
+  display: block;
+}
+
+.order-detail .delivery-box .box-con .deliver-msg .d-goods .arrow.prev {
+  left: -32px;
+}
+
+.order-detail .delivery-box .box-con .deliver-msg .d-goods .arrow.next {
+  right: -32px;
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+.order-detail .delivery-box .box-con .deliver-msg .d-goods .arrow::before {
+  position: absolute;
+  left: 9px;
+  top: 8px;
+  display: block;
+  width: 5px;
+  height: 5px;
+  content: ' ';
+  font-size: 0;
+  border: 1px solid #666;
+  border-width: 1px 1px 0 0;
+  -webkit-transform: rotate(225deg);
+  -moz-transform: rotate(225deg);
+  transform: rotate(225deg);
+}
+
+.order-detail .delivery-box .box-con .deliver-msg .d-goods .item-goods {
+  position: relative;
+  width: 340px;
+  height: 80px;
+  overflow: hidden;
+}
+
+.order-detail .delivery-box .box-con .deliver-msg .d-goods .goods-box {
+  position: absolute;
+  left: 0;
+  display: flex;
+  margin-top: 0;
+  -webkit-transition: all 0.3s;
+  -moz-transition: all 0.3s;
+  transition: all 0.3s;
+}
+
+.order-detail .delivery-box .box-con .deliver-msg .d-goods .goods-box .item {
+  margin-right: 10px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.order-detail
+  .delivery-box
+  .box-con
+  .deliver-msg
+  .d-goods
+  .goods-box
+  .item:last-child {
+  margin: 0;
+}
+
+.order-detail
+  .delivery-box
+  .box-con
+  .deliver-msg
+  .d-goods
+  .goods-box
+  .item
+  .img {
+  width: 60px;
+  height: 60px;
+  font-size: 0;
+  margin-bottom: 4px;
+  position: relative;
+}
+
+.order-detail
+  .delivery-box
+  .box-con
+  .deliver-msg
+  .d-goods
+  .goods-box
+  .item
+  .img
+  img {
+  width: 100%;
+  height: 100%;
+}
+
+.order-detail
+  .delivery-box
+  .box-con
+  .deliver-msg
+  .d-goods
+  .goods-box
+  .item
+  .img
+  .number {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.3);
+  color: #fff;
+  border-radius: 6px 0 6px 0;
+  font-size: 12px;
+  height: 16px;
+  line-height: 16px;
+  padding: 0 5px;
+}
+
+.order-detail
+  .delivery-box
+  .box-con
+  .deliver-msg
+  .d-goods
+  .goods-box
+  .item
+  .name {
+  width: 60px;
+  height: 16px;
+  line-height: 16px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #999;
+}
+
+.order-detail .delivery-box .box-con .logistics {
+  flex: 1;
+}
+
+.order-detail .delivery-box .box-con .logistics .l-tit {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.order-detail .delivery-box .box-con .logistics .l-tit .l-state {
+  color: #c00;
+}
+
+.order-detail .delivery-box .box-con .logistics .logistics-box {
+  height: 175px;
+  overflow-y: scroll;
+  position: relative;
+  margin-top: 5px;
+}
+
+.order-detail .delivery-box .box-con .logistics .logistics-box::before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: block;
+  width: 12px;
+  height: 12px;
+  content: ' ';
+  font-size: 0;
+  background: #fff;
+  z-index: 1;
+}
+
+.order-detail .delivery-box .box-con .logistics .logistics-box::after {
+  position: absolute;
+  left: 6px;
+  top: 0;
+  display: block;
+  /* width: 1px; */
+  height: 100%;
+  content: ' ';
+  font-size: 0;
+  background: #eee;
+  z-index: 0;
+}
+
+.order-detail .delivery-box .box-con .logistics .logistics-box .item {
+  padding: 0px 0 40px 25px;
+  position: relative;
+  margin-left: 6px;
+  border-left: 1px solid #eee;
+}
+
+.order-detail .delivery-box .box-con .logistics .logistics-box .item::before {
+  width: 5px;
+  height: 5px;
+  border: 3px solid #fff;
+  position: absolute;
+  left: -6px;
+  top: 0px;
+  display: block;
+  border-radius: 50%;
+  content: " ";
+  font-size: 0;
+  background: #ccc;
+  z-index: 2;
+}
+
+.order-detail .left-line {
+  border-left: 1px solid #fff !important;
+}
+
+.order-detail
+  .delivery-box
+  .box-con
+  .logistics
+  .logistics-box
+  .item:first-child:before {
+  background: #e1251b;
+  border-color: #fed1d4;
+}
+
+.order-detail .delivery-box .box-con .logistics .logistics-box .item .time {
+  color: #999;
+}
+
+.order-detail .delivery-box .box-con .logistics .logistics-box .item .text {
+  margin-top: 5px;
+  max-width: 590px;
+  line-height: 20px;
+}
+
+/* 配送信息 end */
+
+/* 订单信息 */
+
+.order-detail .order-info {
+  margin-top: 30px;
+  padding: 20px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  display: flex;
+  background: #fff;
+}
+
+.order-detail .order-info .item {
+  width: 25%;
+  border-left: 1px solid #f5f5f5;
+  line-height: 20px;
+  padding: 0 30px;
+}
+
+.order-detail .order-info .item:first-child {
+  padding-left: 10px;
+  border: 0;
+}
+
+.order-detail .order-info .item .tit {
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.order-detail .order-info .item .con {
+  padding-top: 10px;
+}
+
+.order-detail .order-info .item .con-item {
+  margin-top: 8px;
+  display: flex;
+}
+
+.order-detail .order-info .item .con-item .item-tit {
+  width: 70px;
+  color: #999;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.order-detail-en .order-info .item .con-item .item-tit {
+  width: 120px;
+  color: #999;
+}
+
+.order-detail .order-info .item .con-item .item-con {
+  flex: 1;
+  font-family: arial;
+  width: 100%;
+  word-break: break-word;
+}
+
+/**** 虚拟商品 ****/
+.order-detail .order-info .item.virtual-goods-code .item-tit {
+  display: inline-block;
+}
+
+.order-detail .order-info .item.virtual-goods-code .con-item:first-child {
+  margin-top: 0;
+}
+.order-detail .order-info .item.virtual-goods-code .con-item .used .code {
+  text-decoration: line-through;
+  color: #999;
+}
+.order-detail .order-info .item.virtual-goods-code .con-item .used .grey {
+  color: #999;
+  font-size: 12px;
+}
+/* 滚动条 */
+.order-detail .order-info .item.virtual-goods-code .con,
+.order-detail .order-info .item.all-msg .con {
+  max-height: 220px;
+  overflow-y: auto;
+  padding-right: 10px;
+}
+/* 留言 */
+.order-detail .order-info .item.all-msg .con-item .item-tit {
+  min-width: 70px;
+}
+.order-detail .order-info .item.all-msg .con-item .msg-con {
+  margin-left: 10px;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+/**** / 虚拟商品 ****/
+
+/* 订单信息 end */
+
+/* 商品信息 */
+
+.order-detail .goods-box {
+  margin-top: 30px;
+}
+
+.order-detail .goods-box .shop {
+  height: 14px;
+  line-height: 14px;
+  padding: 0 10px 0;
+  margin-bottom: 15px;
+}
+
+.order-detail .goods-box .shop .shop-icon {
+  display: inline-block;
+  vertical-align: top;
+  width: 14px;
+  height: 14px;
+  margin-right: 3px;
+  background: url(../images/icons.png) no-repeat -28px -458px;
+}
+
+.order-detail .goods-box .shop:hover .shop-icon {
+  background-position: -9px -458px;
+}
+
+.order-detail .goods-box .shop .name {
+  display: inline-block;
+  vertical-align: top;
+  font-weight: bold;
+  color: #333333;
+}
+
+
+
+.order-detail .goods-box .goods-con {
+  background: #fff;
+  padding: 25px 20px 15px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+}
+
+.order-detail .goods-box .order-table {
+  margin-bottom: 20px;
+}
+
+.order-detail .goods-box .order-table .box {
+  width: 100%;
+  text-align: center;
+}
+
+.order-detail .goods-box .order-table .box-tit th {
+  background: #f9f9f9;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  font-weight: 400;
+  border: 1px solid #f9f9f9;
+}
+
+.order-detail .goods-box .order-table .box-tit .tal {
+  text-align: left;
+}
+
+.order-detail .goods-box .order-table .box-tr td {
+  padding: 15px 0;
+  border-bottom: 1px solid #eee;
+  text-align: center;
+}
+
+.order-detail .goods-box .order-table .box-tr .goods-info {
+  width: 450px;
+  padding-left: 15px;
+  text-align: left;
+  display: flex;
+}
+
+.order-detail .goods-box .order-table .box-tr .goods-info .img {
+  width: 60px;
+  height: 60px;
+  font-size: 0;
+  margin-right: 15px;
+}
+
+.order-detail .goods-box .order-table .box-tr .goods-info .img img {
+  width: 100%;
+  height: 100%;
+}
+
+.order-detail .goods-box .order-table .box-tr .goods-info .name-sku {
+  flex: 1;
+}
+
+.order-detail .goods-box .order-table .box-tr .goods-info .name-sku .name {
+  max-height: 36px;
+  line-height: 18px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.order-detail .goods-box .order-table .box-tr .goods-info .name-sku .sku .gift-icon {
+  display: inline-block;
+  font-size: 12px;
+  color: #fff;
+  background: #e43130;
+  padding: 3px;
+  border-radius: 3px;
+  box-sizing: border-box;
+  margin-right: 5px;
+  line-height: 1em;
+}
+
+.order-detail
+  .goods-box
+  .order-table
+  .box-tr
+  .goods-info
+  .name-sku
+  .name:hover {
+  color: #e1251b;
+}
+
+.order-detail .goods-box .order-table .box-tr .goods-info .name-sku .sku {
+  display: block;
+  line-height: 18px;
+  margin-top: 6px;
+  color: #999;
+}
+
+.order-detail .goods-box .order-table .box-tr .goods-number {
+  font-family: arial;
+  text-align: left;
+}
+
+.order-detail .goods-box .order-table .box-tr .price {
+  font-family: verdana;
+  color: #000;
+  justify-content: center;
+}
+
+.order-detail .goods-box .order-table .box-tr .action-btn {
+  display: block;
+  border-radius: 2px;
+  width: 85px;
+  height: 18px;
+  line-height: 18px;
+  padding: 2px 0;
+  margin: 12px auto;
+  /* margin-left: 54px; */
+  text-align: center;
+  background: #fff;
+  color: #e1251b;
+  border: 1px solid #e1251b;
+}
+.order-detail-en .goods-box .order-table .box-tr .action-btn {
+  width: 120px;
+}
+.order-detail .goods-box .order-table .box-tr .action-btn:first-child {
+  margin-top: 0;
+}
+.order-detail .goods-box .order-table .box-tr .action-btn:last-child {
+  margin-bottom: 0;
+}
+
+.order-detail .goods-box .order-table .box-tr .action-btn:hover {
+  background: #e1251b;
+  color: #fff;
+}
+
+.order-detail .goods-box .goods-total {
+  background: #fff;
+  padding-right: 10px;
+  text-align: right;
+}
+
+.order-detail .goods-box .goods-total .item {
+  margin-bottom: 10px;
+}
+
+.order-detail .goods-box .goods-total .item .price.gray {
+  color: #999;
+}
+
+.total-return {
+  text-align: right;
+  margin-top: 20px;
+  /* margin-right: 26px; */
+}
+
+.order-detail-en .total-return .action-btn {
+  width: 150px;
+  /* margin-right: -26px; */
+}
+
+.total-return .action-btn {
+  display: inline-block;
+  color: #e1251b;
+  border: 1px solid #e1251b;
+  width: 85px;
+  height: 18px;
+  line-height: 18px;
+  padding: 2px 0;
+  text-align: center;
+}
+
+.total-return .action-btn:hover {
+  background: #e1251b;
+  color: #fff;
+}
+
+.order-detail .goods-box .goods-total .item .tit,
+.order-detail .goods-box .goods-total .item .price {
+  display: inline-block;
+  vertical-align: top;
+  line-height: 20px;
+}
+
+.order-detail .goods-box .goods-total .item .price {
+  min-width: 200px;
+  color: #000;
+  font-family: verdana;
+}
+
+.order-detail .goods-box .goods-total .item .price.big {
+  color: #e1251b;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+/* 商品信息 end */
+
+/* 赠品 */
+.gift-info .gift-item {
+  text-align: left;
+  margin-top: 5px;
+  color: #333;
+  cursor: pointer;
+}
+.gift-info .gift-item:hover {
+  color: #e1251b;
+}
+.gift-info .gift-item .name,
+.gift-info .gift-item .num {
+  display: inline-block;
+  vertical-align: middle;
+}
+.gift-info .gift-item .name {
+  max-width: 500px;
+  margin-right: 10px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* 订单详情 end */

assets/css/payment.css

@@ -0,0 +1,263 @@
+
+/* 订单支付 */
+
+.payment .step-box .left .img {
+    background: url(../images/icons.png) no-repeat -86px -249px;
+}
+
+.payment .step-box .left .text {
+    line-height: 40px;
+}
+
+.payment .payment-con .pay-box {
+    background: #f9f9f9;
+    padding: 20px;
+}
+
+.payment .payment-con .pay-box .pay-info {
+    padding-left: 52px;
+    position: relative;
+}
+
+.payment .payment-con .pay-box .pay-info .tag {
+    width: 32px;
+    height: 32px;
+    position: absolute;
+    left: 0;
+    top: 5px;
+}
+
+.payment .payment-con .pay-box .pay-info .tag.success {
+    background: url(../images/icons.png) no-repeat 0 -476px;
+}
+
+.time {
+    margin-top: 20px;
+}
+.payment .payment-con .pay-box .pay-info .item {
+    display: flex;
+    justify-content:space-between;
+}
+
+.payment .payment-con .pay-box .pay-info .item .tit {
+    font-size: 14px;
+    height: 20px;
+    line-height: 20px;
+    flex: 1;
+    font-weight: 600;
+}
+
+.payment .payment-con .pay-box .pay-info .item .total-pay {
+    height: 20px;
+    line-height: 20px;
+}
+
+.payment .payment-con .pay-box .pay-info .item .total-pay .price {
+    font-size: 18px;
+    display: inline-block;
+    vertical-align: top;
+    line-height: 20px;
+    margin-right: 3px;
+}
+
+.payment .payment-con .pay-box .pay-info .item .rest-time {
+    height: 12px;
+    line-height: 12px;
+    margin-top: 10px;
+    flex: 1;
+    color: #999;
+    display: flex;
+}
+
+.payment .payment-con .pay-box .pay-info .item .rest-time .time {
+    color: #e1251b;
+    margin: 0 3px;
+}
+
+.payment .payment-con .pay-box .pay-info .item .order-det {
+    height: 12px;
+    line-height: 12px;
+    margin-top: 10px;
+    position: relative;
+    padding-right: 15px;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;
+    cursor: pointer;
+    color: #999;
+}
+
+.payment .payment-con .pay-box .pay-info .item .order-det:hover {
+    color: #e1251b;
+}
+
+.payment .payment-con .pay-box .pay-info .item .order-det::before,
+.payment .payment-con .pay-box .pay-info .item .order-det::after {
+    position: absolute;
+    right: 0;
+    display: block;
+    content: " ";
+    width: 0;
+    height: 0;
+    border: 5px solid transparent;
+    border-radius: 2px;
+}
+
+.payment .payment-con .pay-box .pay-info .item .order-det::before {
+    border-top: 5px solid #777;
+    top: 4px;
+}
+
+.payment .payment-con .pay-box .pay-info .item .order-det:hover::before {
+    border-top: 5px solid #e1251b;
+    top: 4px;
+}
+
+.payment .payment-con .pay-box .pay-info .item .order-det::after {
+    border-top: 5px solid #fff;
+    top: 3px;
+}
+
+.payment .payment-con .pay-box .order-info {
+    margin-top: 30px;
+    padding-top: 20px;
+    border-top: 1px solid #eee;
+    margin-left: 52px;
+}
+
+.payment .payment-con .pay-box .order-info .text {
+    display: flex;
+    line-height: 24px;
+    margin-bottom: 8px;
+}
+
+.payment .payment-con .pay-box .order-info .text:last-child {
+    margin-bottom: 0;
+}
+
+.payment .payment-con .pay-box .order-info .text .label {
+    width: 70px;
+}
+
+.payment .payment-con .pay-box .order-info .text .con {
+    margin-right: 20px;
+}
+
+.payment .payment-con .pay-box .order-info .text .con.con-items {
+    flex: 1;
+}
+
+.payment .payment-con .section-payment {
+    margin-top: 30px;
+}
+
+.payment .payment-con .section-payment .item-balance {
+    width: auto !important;
+    position: static !important;
+}
+.payment .payment-con .section-payment .item-balance .item-balance-img {
+    margin: 0 auto;
+    width: 36px !important;
+    float: left;
+    position: static !important;
+    padding: 3px 0px 0 25px;
+}
+.payment .payment-con .section-payment .item-balance .item-balance-div {
+    float: left;
+    padding-right: 32px;
+}
+.payment .payment-con .section-payment .item-balance .item-balance-div .item-balance-span {
+    color: #999
+}
+
+.payment .payment-con .section-payment .tit {
+    margin-bottom: 20px;
+    font-size: 14px;
+    padding: 0 20px;
+    font-weight: 600;
+}
+
+.payment .payment-con .section-payment .con {
+    display: flex;
+}
+
+.payment .payment-con .section-payment .con .item {
+    width: 174px;
+    height: 60px;
+    line-height: 60px;
+    margin-left: 20px;
+    margin-bottom: 20px;
+    border: 1px solid #e0e0e0;
+    text-align: center;
+    cursor: pointer;
+    overflow: hidden;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+}
+.payment .payment-con .section-payment .con .item img {
+    display: block;
+    width: 28px;
+    height: 28px;
+    margin-right: 10px;
+}
+
+.payment .payment-con .section-payment .con .item:hover {
+    border-color: #e1251b;
+}
+.payment .payment-con .section-payment .con .item.active{
+    border-color: #e1251b;
+}
+
+.payment .payment-con .section-payment .con .item.paypal{
+    display: flex;
+    position: relative;
+}
+
+.payment .payment-con .section-payment .con .item .paypal-logo {
+    width: 30px;
+    height: 34px;
+    position: absolute;
+    top: 14px;
+    left: 28px;
+}
+
+.payment .payment-con .section-payment .con .item .paypal-text {
+    width: 80px;
+    height: 26px;
+    position: absolute;
+    top: 20px;
+    left: 62px;
+}
+
+.payment .payment-con .section-payment .btn {
+    margin-top: 10px;
+    margin-left: 20px;
+    display: block;
+    font-size: 15px;
+    font-weight: 600;
+    width: 174px;
+    height: 42px;
+    line-height: 42px;
+    background: #e1251b;
+    text-align: center;
+    color: #fff;
+    border-radius: 2px;
+}
+
+.payment .payment-con .section-payment .btn:hover {
+    opacity: 0.9;
+}
+
+.payment .payment-con .section-payment .btn.no-pay {
+    cursor: not-allowed;
+    background: #ccc;
+}
+
+/* 订单支付 end  */
+

assets/css/register.css

@@ -0,0 +1,340 @@
+/* 注册 */
+
+.register .r-header {
+    background: #fff;
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
+}
+
+.register .r-header .content {
+    display: flex;
+    padding: 20px 0;
+    align-items: center;
+}
+
+.register .r-header .logo {
+    cursor: pointer;
+    /* flex: 1; */
+    display: flex;
+    margin-right: auto;
+}
+
+.register .r-header .logo .img {
+    display: inline-block;
+    vertical-align: top;
+    width: 190px;
+    height: 48px;
+    /*background: url(../images/register-logo.png) no-repeat;*/
+    background-size: 100%;
+}
+
+.register .r-header .logo .text {
+    font-size: 0;
+    display: inline-block;
+    vertical-align: top;
+    line-height: 48px;
+    margin-left: 5px;
+}
+
+.register .r-header .go-login {
+    font-size: 14px;
+}
+
+.register .r-header .go-login .login-btn {
+    font-size: 13px;
+    display: inline-block;
+    padding: 6px 22px;
+    background: #146ef7;
+    color: #fff;
+    border-radius: 30px;
+    margin-left: 7px;
+}
+
+.register .r-con {
+    width: 600px;
+    margin: 100px auto;
+    min-height: 550px;
+}
+
+.register .r-con .steps {
+    display: flex;
+    width: 600px;
+    margin: auto;
+    text-align: center;
+}
+
+.register .r-con .steps .item {
+    flex: 1;
+    position: relative;
+    font-size: 14px;
+    color: #ddd;
+}
+
+.register .r-con .steps .item::after {
+    position: absolute;
+    right: -50px;
+    top: 15px;
+    display: block;
+    width: 100px;
+    height: 1px;
+    content: " ";
+    background: #eee;
+}
+
+.register .r-con .steps .item:last-child::after {
+    width: 0;
+}
+
+.register .r-con .steps .item .number {
+    font-size: 16px;
+    font-family: arial;
+    border: 1px solid #ddd;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    margin: auto;
+    border-radius: 40px;
+}
+
+.register .r-con .steps .item .text {
+    margin-top: 10px;
+}
+
+.register .r-con .steps .item.active {
+    color: #146ef7;
+}
+
+.register .r-con .steps .item.active::after {
+    background: #146ef7;
+}
+
+.register .r-con .steps .item.active .number {
+    border-color: #146ef7;
+}
+
+.register .r-con .con-box {
+    width: 460px;
+    margin: 40px auto;
+    text-align: center;
+}
+
+.register .r-con .con-box .item {
+    position: relative;
+    padding-bottom: 35px;
+}
+
+.register .r-con .con-box .item .input-box {
+    width: 100%;
+    position: relative;
+}
+
+.register .r-con .con-box .item .input-box .input {
+    border: 1px solid #e8e8e8;
+    font-size: 14px;
+    line-height: 44px;
+    height: 44px;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 10px;
+    border-radius: 2px;
+}
+
+.register .r-con .con-box .item .input-box .input:hover,
+.register .r-con .con-box .item .input-box.phone:hover .input {
+    border-color: #146ef7;
+}
+
+.register .r-con .con-box .item .input-box.phone .input {
+    padding-left: 70px;
+    padding-right: 10px;
+}
+
+.register .r-con .con-box .item .input-box .ic {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 50px;
+    height: 44px;
+    line-height: 44px;
+    font-family: arial;
+    color: #666;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.register .r-con .con-box .item .input-box .ic::after {
+    position: absolute;
+    right: -7px;
+    top: 20px;
+    display: block;
+    content: " ";
+    width: 0;
+    height: 0;
+    border: 5px solid transparent;
+    border-top: 5px solid #ccc;
+}
+
+.register .r-con .con-box .item .input-box.code {
+    text-align: left;
+}
+
+.register .r-con .con-box .item .input-box.code .input {
+    padding: 0 10px;
+    width: 309px;
+    border-radius: 2px 0 0 2px;
+}
+
+.register .r-con .con-box .item .input-box.code .send-code {
+    position: absolute;
+    right: 0;
+    top: 0;
+    background: #f9f9f9;
+    width: 150px;
+    height: 42px;
+    line-height: 42px;
+    border: 1px solid #e8e8e8;
+    border-left: 0;
+    font-size: 14px;
+    color: #666;
+    text-align: center;
+    border-radius: 0 2px 2px 0;
+}
+
+.register .r-con .con-box .item .input-box.code .send-code:hover {
+    color: #333;
+}
+
+.register .r-con .con-box .item .error-text {
+    text-align: left;
+    color: #e1251b;
+    height: 14px;
+    line-height: 14px;
+    font-family: "微软雅黑";
+    padding-left: 19px;
+    display: none;
+    position: absolute;
+    bottom: 15px;
+    left: 10px;
+}
+
+.register .r-con .con-box .item .error-text::before {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: block;
+    width: 14px;
+    height: 14px;
+    content: " ";
+    font-size: 0;
+    background: url(../images/icons.png) no-repeat -77px -517px;
+}
+
+.register .r-con .con-box .item.error .error-text {
+    display: block;
+}
+
+.register .r-con .con-box .item.error .input-box .input,
+.register .r-con .con-box .item.error .input-box.phone:hover .input {
+    border-color: #e1251b;
+}
+
+.register .r-con .con-box .next {
+    display: block;
+    height: 44px;
+    line-height: 44px;
+    background-color: #146ef7;
+    width: 100%;
+    margin-top: 10px;
+    border-radius: 2px;
+    color: #fff;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+.register .r-con .con-box .next:hover {
+    opacity: 0.9;
+}
+
+.register .r-con .con-box .register-success {
+    display: flex;
+    justify-content: center;
+    padding: 100px 0 60px;
+}
+
+.register .r-con .con-box .register-success .img {
+    font-size: 0;
+    margin-right: 20px;
+    margin-top: 7px;
+}
+
+.register .r-con .con-box .register-success .text {
+    line-height: 20px;
+    text-align: left;
+}
+
+.register .r-con .con-box .register-success .text .text-div {
+    font-size: 16px;
+}
+
+.register .r-con .con-box .register-success .text .text-span {
+    display: block;
+    font-size: 12px;
+    color: #999;
+    margin-top: 5px;
+}
+
+.register .r-con .con-box .next.suc-btn {
+    margin: 10px auto;
+    width: 70%;
+}
+
+.register .r-footer {
+    text-align: center;
+    color: #999;
+    padding-bottom: 30px;
+}
+
+.register .r-footer .links {
+    height: 20px;
+    line-height: 20px;
+    margin-bottom: 10px;
+}
+
+.register .r-footer .links .item {
+    display: inline-block;
+    vertical-align: top;
+    padding: 0 11px 0 10px;
+    position: relative;
+}
+
+.register .r-footer .links .item::after {
+    position: absolute;
+    right: -1px;
+    top: 4px;
+    bottom: 4px;
+    display: block;
+    width: 1px;
+    height: auto;
+    content: " ";
+    background: #ddd;
+}
+
+.register .r-footer .links .item:last-child::after {
+    width: 0;
+}
+
+.register .r-footer .links .item:hover {
+    text-decoration: underline;
+}
+
+/* 新增条款 */
+.agree{
+    display: flex;
+}
+.agree .text{
+    color: #999;
+}
+
+.agree .text a:hover{
+    text-decoration: underline;
+}
+/* 注册 end */

assets/css/return-detail.css

@@ -0,0 +1,423 @@
+/* 退款详情 */
+
+/* 退款步骤 */
+
+.return-detail {
+  min-height: 535px;
+}
+
+.return-detail .return-step {
+  background: #f9f9f9;
+  border: 1px solid #eee;
+  display: flex;
+  text-align: center;
+}
+
+.return-detail .return-step .item {
+  padding: 20px 0 15px;
+  position: relative;
+  flex: 1;
+}
+
+.return-detail .return-step .item::before {
+  position: absolute;
+  left: 0;
+  top: 31px;
+  display: block;
+  height: 3px;
+  width: 100%;
+  background: #ccc;
+  content: ' ';
+  font-size: 0;
+}
+
+.return-detail .return-step .item:first-child::before {
+  width: 50%;
+  left: 50%;
+}
+
+.return-detail .return-step .item:last-child::before {
+  width: 50%;
+  right: 50%;
+}
+
+.return-detail .return-step .item.active::before {
+  background: #e1251b;
+}
+.return-detail .return-step .item.fail::before {
+  background: #999;
+}
+
+.return-detail .return-step .item .number {
+  background: #ccc;
+  width: 25px;
+  height: 25px;
+  margin: auto;
+  border-radius: 50%;
+  line-height: 25px;
+  font-family: arial;
+  font-weight: 600;
+  color: #fff;
+  position: relative;
+}
+
+.return-detail .return-step .item.active .number {
+  background: #e1251b;
+}
+.return-detail .return-step .item.fail .number {
+  background: #999;
+}
+
+.return-detail .return-step .item .text {
+  color: #999;
+  margin-top: 10px;
+}
+
+.return-detail .return-step .item.active .text {
+  color: #000;
+}
+.return-detail .return-step .item.fail .text {
+  color: #999;
+}
+
+.return-detail .return-step .item .time {
+  color: #999;
+  font-family: arial;
+  margin-top: 5px;
+}
+
+/* 退款步骤 end */
+
+/* 退款订单 */
+
+.return-detail .return-order {
+  margin-top: 20px;
+}
+
+.return-detail .return-order .order-box {
+  width: 100%;
+  border: 1px solid #eee;
+}
+
+.return-detail .return-order .order-box .box-tit th {
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  background: #f9f9f9;
+  font-weight: 400;
+}
+
+.return-detail .return-order .order-box .box-space td {
+  height: 14px;
+  border-top: 1px solid #eee;
+  border-left: 1px solid #fff;
+  border-right: 1px solid #fff;
+}
+
+.return-detail .return-order .order-box .box-hd td {
+  background: #f9f9f9;
+  height: 32px;
+  border-top: 1px solid #eee;
+}
+
+.return-detail .return-order .order-box .box-hd .order-number,
+.return-detail .return-order .order-box .box-hd .return-number {
+  float: left;
+  margin-left: 15px;
+  color: #999;
+}
+
+.return-detail .return-order .order-box .box-hd .order-number .num,
+.return-detail .return-order .order-box .box-hd .return-number .num {
+  color: #000;
+  font-family: arial;
+  margin-right: 35px;
+}
+
+.return-detail .return-order .order-box .box-hd .shop {
+  float: left;
+  margin-left: 15px;
+}
+
+.return-detail .return-order .order-box .box-hd .shop .shop-icon {
+  width: 14px;
+  height: 14px;
+  vertical-align: bottom;
+  display: inline-block;
+  /* margin-top: 3px; */
+  margin-right: 5px;
+  background: url(../images/icons.png) no-repeat -28px -458px;
+}
+
+.return-detail .return-order .order-box .box-hd .shop:hover .shop-icon {
+  background-position: -9px -458px;
+}
+
+.return-detail .return-order .order-box .box-hd .shop:hover {
+  color: #e1251b;
+}
+
+.return-detail .return-order .order-box .box-tr td {
+  padding: 15px 5px;
+  text-align: center;
+  border-top: 1px solid #eee;
+  border-right: 1px solid #eee;
+  line-height: 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.return-detail .return-order .order-box .box-tr .goods-info {
+  width: 100%;
+  text-align: left;
+  display: flex;
+  float: left;
+  margin-right: 15px;
+}
+
+.return-detail .return-order .order-box .box-tr .goods-info .img {
+  width: 60px;
+  height: 60px;
+  font-size: 0;
+  margin-right: 15px;
+}
+
+.return-detail .return-order .order-box .box-tr .goods-info .img img {
+  width: 100%;
+  height: 100%;
+}
+
+.return-detail .return-order .order-box .box-tr .goods-info .name-sku {
+  flex: 1;
+}
+
+.return-detail .return-order .order-box .box-tr .goods-info .name-sku a.name {
+  max-height: 36px;
+  line-height: 18px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* .return-detail .return-order .order-box .box-tr .goods-info .name-sku .name:hover {
+    color: #e1251b;
+} */
+
+.return-detail .return-order .order-box .box-tr .goods-info .name-sku .sku {
+  display: block;
+  line-height: 18px;
+  margin-top: 6px;
+  color: #999;
+}
+.return-detail .return-order .order-box .box-tr .goods-info .name-sku .sku .gift-icon {
+  display: inline-block;
+  font-size: 12px;
+  color: #fff;
+  background: #e43130;
+  padding: 3px;
+  border-radius: 3px;
+  line-height: 1em;
+  box-sizing: border-box;
+}
+.return-detail .return-order .order-box .box-tr .goods-info .name-sku .sku span {
+  margin-right: 5px;
+}
+
+.goods-info.gift-goods-info {
+  cursor: pointer;
+}
+.goods-info.gift-goods-info:hover .name {
+  color: #e1251b;
+}
+
+.return-detail .return-order .order-box .box-tr .deal-time,
+.return-detail .return-order .order-box .box-tr .apply-number,
+.return-detail .return-order .order-box .box-tr .price-box {
+  font-family: arial;
+  color: #999;
+}
+
+.return-detail .return-order .order-box .box-tr .deal-time {
+  word-wrap: break-word;
+  text-align: center;
+}
+
+.return-detail .return-order .order-box .box-tr .price-box .return-price {
+  color: #000;
+}
+
+.return-detail .return-order .order-box .box-tr .status-box {
+  color: #999;
+}
+
+.return-detail .return-order .order-box .box-tr .price-box .return-price,
+.return-detail .return-order .order-box .box-tr .status-box .status {
+  color: #000;
+  margin-top: 5px;
+}
+
+.return-detail .return-order .order-box .box-tr .price-box .action-a {
+  cursor: pointer;
+  margin-top: 10px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.return-detail .return-order .order-box .box-tr .action-a {
+  /* display: block; */
+  background: #fff;
+  border-radius: 2px;
+  min-width: 85px;
+  height: 18px;
+  line-height: 18px;
+  padding: 2px 0;
+  margin: 3px auto;
+  text-align: center;
+  display:inline-block;
+  color: #e1251b;
+  border: 1px solid #e1251b;
+}
+
+.return-detail .return-order .order-box .box-tr .action-b {
+  display: block;
+  color: #aaa;
+  line-height: 1.5em;
+  padding-top: 4px;
+  border: 1px solid #aaa;
+}
+.return-detail .return-order .order-box .box-tr .action-b:hover {
+  color: #000;
+}
+
+.return-detail .return-order .order-box .box-tr .action-a.cannotuse {
+  color: #bbb;
+  border: 1px solid #bbb;
+  cursor: not-allowed;
+}
+
+.return-detail .return-order .order-box .box-tr .action-b.cannotuse {
+  color: #bbb;
+  cursor: not-allowed;
+}
+
+.return-detail .en .order-box .box-tr .action-a.cannotuse,
+.return-detail .en .order-box .box-tr .action-b.cannotuse {
+  width: 130px;
+}
+
+/* 退款订单 end */
+
+/* 退款过程 */
+
+.return-detail .return-progress {
+  margin-top: 20px;
+  padding-bottom: 20px;
+  border: 1px solid #eee;
+}
+
+.return-detail .return-progress .tit {
+  padding: 10px 15px;
+  background: #f9f9f9;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.return-detail .return-progress .item {
+  margin-top: 20px;
+  padding: 0 20px;
+  display: flex;
+  line-height: 20px;
+}
+
+.return-detail .return-progress .item .time {
+  margin-right: 50px;
+  color: #999;
+  width: 120px;
+  font-family: arial;
+}
+
+.return-detail .return-progress .item .text-box {
+  flex: 1;
+  margin-right: 30px;
+}
+
+.return-detail .return-progress .item .text-box .name {
+  font-weight: 600;
+}
+
+.return-detail .return-progress .item .text-box .acceptStation {
+  font-weight: normal;
+}
+
+.return-detail .return-progress .item .text-box .text {
+  margin-top: 5px;
+  color: #999;
+}
+.return-detail .return-progress .item .text-box .text .distance {
+  padding: 0 15px;
+}
+.return-detail .return-progress .item .text-box .text .distance.ft {
+  padding-right: 15px;
+  padding-left: 0;
+}
+.return-detail
+  .return-progress
+  .item
+  .text-box
+  .text
+  .distance:not(:first-child) {
+  border-left: 1px solid #e6e6e6;
+}
+.return-detail .return-progress .item .text-box p {
+  margin-bottom: 8px;
+  word-break: break-word;
+}
+.return-detail .return-progress .item .text-box .text .ref-voucher {
+  display: flex;
+  align-items: flex-start;
+  margin-top: 10px;
+}
+.return-detail .return-progress .item .text-box .text .ref-img {
+  width: 100px;
+  height: 100px;
+  padding: 3px;
+  margin-right: 10px;
+}
+
+/* 退款过程 end */
+
+/* 退款详情 end */
+.empty {
+  display: block;
+  margin-top: 30px;
+  color: #aaa;
+  font-size: 18px;
+  line-height: 2em;
+  text-align: center;
+}
+
+/* 赠品 */
+.gift-info .gift-item {
+  text-align: left;
+  margin-top: 0px;
+  color: #333;
+  cursor: pointer;
+  padding: 0 5px;
+  box-sizing: border-box;
+}
+.gift-info .gift-item:hover {
+  color: #e1251b;
+}
+.gift-info .gift-item .name,
+.gift-info .gift-item .num {
+  display: inline-block;
+  vertical-align: middle;
+}
+.gift-info .gift-item .name {
+  max-width: 500px;
+  margin-right: 10px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}

assets/css/shop-index.css

@@ -0,0 +1,342 @@
+
+/* 店铺首页 */
+
+.shop-index .shop-head {
+    margin: 10px auto;
+    display: flex;
+    justify-content: flex-start;
+    max-width: 1200px;
+}
+
+.shop-index .shop-head .shop-logo {
+    /* width: 1200px; */
+    height: 116px;
+    /* margin: auto; */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-right: 4px;
+    margin-right: 40px;
+}
+
+.shop-index .shop-head .shop-logo .img {
+    line-height: 116px;
+    font-size: 0;
+}
+
+.shop-index .shop-head .shop-logo .img img {
+    max-width: 420px;
+    max-height: 80px;
+    vertical-align: middle;
+}
+
+.shop-index .shop-head .shop-logo .text {
+    margin-left: 20px;
+    border-right: 1px solid #eee;
+    padding-right: 40px;
+}
+
+.shop-index .shop-head .shop-logo .text .name {
+    font-size: 24px;
+}
+
+.shop-index .shop-head .shop-logo .text .operation {
+    display: flex;
+    margin-top: 10px;
+    align-items: center;
+}
+
+.shop-index .shop-head .shop-logo .text .operation .self {
+    background: #e1251b;
+    padding: 1px 3px;
+    color: #fff;
+    font-family: "微软雅黑";
+    border-radius: 2px;
+    margin-right: 15px;
+}
+
+.shop-index .shop-head .shop-logo .text .operation .favourite {
+    height: 16px;
+    line-height: 16px;
+    cursor: pointer;
+    position: relative;
+    font-family: "微软雅黑";
+    color: #666;
+    display: flex;
+    align-items: center;
+}
+
+.shop-index .shop-head .shop-logo .text .operation .favourite:hover {
+    color: #e1251b;
+}
+
+.shop-index .shop-head .shop-logo .text .operation .favourite .icon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background: url(../images/icons.png) no-repeat 0 -135px;
+    margin-right: 5px;
+}
+
+.shop-index .shop-head .shop-logo .text .operation .favourite:hover .icon {
+    background-position: -80px -135px;
+}
+
+.shop-index .shop-head .shop-logo .text .operation .favourite.active .icon {
+    background-position: -21px -135px;
+}
+
+/* 店铺公告 */
+.shop-index .shop-head .shop-news {
+    display: flex;
+    flex-direction: column;
+    width: 340px;
+    padding: 20px 0;
+    height: 116px;
+    box-sizing: border-box;
+}
+.shop-index .shop-head .shop-news .news-tit {
+    display: flex;
+    margin-bottom: 10px;
+    justify-content: space-between;
+}
+.shop-index .shop-head .shop-news .news-tit .tit {
+    font-size: 14px;
+    font-weight: bold;
+}
+.shop-index .shop-head .shop-news .news-tit .more {
+    color: #666;
+    position: relative;
+}
+.shop-index .shop-head .shop-news .news-tit .more::after {
+    position: absolute;
+    top: 5px;
+    content: '';
+    display: inline-block;
+    height: 4px;
+    width: 4px;
+    border-top: 1px solid #666;
+    border-right: 1px solid #666;
+    transform: rotate(45deg);
+}
+.shop-index .shop-head .shop-news .news-tit .more:hover,
+.shop-index .shop-head .shop-news .news-tit .more:hover::after{
+    border-color: #e43130;
+    cursor: pointer;
+    color: #e43130;
+}
+.shop-index .shop-head .shop-news .news-list-con {
+    display: flex;
+    flex-direction: column;
+}
+.shop-index .shop-head .shop-news .news-list-con .news-item {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: 10px;
+    width: auto;
+    max-width: 100%;
+}
+.shop-index .shop-head .shop-news .news-list-con .news-item:hover {
+    color: #e43130;
+    cursor: pointer;
+}
+.shop-index .shop-head .shop-news .news-empty {
+    color: #666;
+    margin-top: 10px;
+}
+
+.shop-index .shop-menu {
+    background: #000;
+    color: #fff;
+}
+
+.shop-index .shop-menu .menu-box {
+    display: flex;
+    width: 990px;
+    height: 40px;
+    margin: auto;
+    position: relative;
+}
+
+.shop-index .shop-menu .menu-box .menu-list {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+    flex-wrap: wrap;
+}
+
+.shop-index .shop-menu .menu-box .menu-list .menu .menu-link {
+    display: block;
+    padding: 0 20px;
+    line-height: 40px;
+    font-weight: 600;
+    color: #ffffff;
+    font-size: 14px;
+}
+
+.shop-index .shop-menu .menu-box .menu-list .menu:hover .menu-link {
+    background: #777;
+}
+
+.shop-index .shop-menu .menu-box .menu-list .menu.all-category .menu-link {
+    padding-right: 38px;
+    position: relative;
+}
+
+.shop-index .shop-menu .menu-box .menu-list .menu.all-category .menu-link:after {
+    position: absolute;
+    right: 17px;
+    top: 19px;
+    display: block;
+    width: 0;
+    height: 0;
+    content: " ";
+    border: 5px solid transparent;
+    border-top: 5px solid #fff;
+    border-radius: 2px;
+}
+
+.shop-index .shop-menu .menu-box .menu-list .menu .menu-wrap {
+    position: absolute;
+    left: 0;
+    top: 40px;
+    right: 0;
+    z-index: 88;
+    padding: 0 10px 15px;
+    background-color: #fff;
+    color: #000;
+    box-shadow: 0 0 10px rgba(0,0,0,.1);
+    display: none;
+}
+
+.shop-index .shop-menu .menu-box .menu-list .menu:hover .menu-wrap {
+    display: block;
+}
+
+.shop-index .shop-menu .menu-box .menu-list .menu .menu-wrap .wrap-item {
+    margin: 15px 35px 0;
+    float: left;
+}
+
+.shop-index .shop-menu .menu-box .menu-list .menu .menu-wrap .wrap-item .item-tit {
+    padding-bottom: 5px;
+    font-weight: 600;
+}
+.shop-index .shop-menu .menu-box .menu-list .menu .menu-wrap .item-tit-no {
+    font-size: 18px;
+    font-weight: 400;
+    margin-left:450px;
+    margin-top:10px
+}
+
+.shop-index .shop-menu .menu-box .menu-list .menu .menu-wrap .wrap-item .wrap-con {
+    margin-top: 5px;
+}
+
+.shop-index .shop-menu .menu-box .menu-list .menu .menu-wrap .wrap-item .wrap-con .item-a {
+    display: block;
+    line-height: 16px;
+    padding: 3px 0;
+    color: #777;
+}
+
+.shop-index .shop-menu .menu-box .menu-list .menu .menu-wrap .wrap-item .wrap-con .item-a:hover {
+    color: #e1251b;
+}
+
+.shop-index .shop-menu .menu-box .shop-search {
+    display: flex;
+    align-items: center;
+}
+
+.shop-index .shop-menu .menu-box .shop-search .s-input {
+    width: 85px;
+    height: 22px;
+    padding: 0 5px;
+    font-family: arial;
+}
+
+.shop-index .shop-menu .menu-box .shop-search .s-btn {
+    padding: 0 10px;
+    border: 0;
+    height: 22px;
+    background-color: #666;
+    color: #fff;
+    font-family: arial;
+}
+
+.shop-index .shop-banner {
+    font-size: 0;
+    height: 450px;
+}
+
+.shop-index .shop-content {
+    margin-top: 40px;
+}
+
+.shop-index .shop-content .tit {
+    font-size: 18px;
+    text-align: center;
+    height: 22px;
+    line-height: 22px;
+    font-weight: 600;
+    padding-bottom: 5px;
+}
+
+.shop-index .shop-content .tit .bg-l,
+.shop-index .shop-content .tit .bg-r {
+    display: inline-block;
+    width: 35px;
+    height: 18px;
+    background: url(../images/icons.png) no-repeat;
+    background-position: 0 -763px;
+    margin-top: 4px;
+    vertical-align: top;
+}
+
+.shop-index .shop-content .tit .bg-l {
+    margin-right: 15px;
+}
+
+.shop-index .shop-content .tit .bg-r {
+    margin-left: 15px;
+}
+
+/* 店铺首页 end */
+
+/* 首页轮播 */
+.banner .el-carousel.el-carousel--horizontal ul.el-carousel__indicators--horizontal .el-carousel__button {
+    background: #e1251b!important;
+}
+.el-carousel, .el-carousel-item, .el-carousel__container {
+    width: 100%;
+    height: 100%;
+}
+.banner .el-carousel.el-carousel--horizontal ul.el-carousel__indicators--horizontal {
+    bottom: 45px!important;
+}
+
+/* banner */
+  
+.banner {
+    width: 100%;
+    height: 450px;
+}
+  .banner .item {
+    position: relative;
+    max-width: 100%;
+    height: 100%;
+    font-size: 0;
+}
+  .banner .item img {
+    display: block;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+}
+  
+/* banner end  */
+
+

assets/css/submit-order.css

@@ -0,0 +1,1045 @@
+/* 提交订单 */
+
+.submit-order .step-box .left .img {
+    background: url(../images/icons.png) no-repeat -43px -249px;
+}
+
+.submit-order .submit-box {
+    margin-top: 20px;
+    padding-bottom: 30px;
+}
+.submit-order .submit-box-border {
+    border-bottom: 1px solid #eee;
+}
+
+.submit-order .submit-box:last-child {
+    border: 0;
+    padding-bottom: 0;
+}
+
+.submit-order .submit-box .tit {
+    padding: 10px 0;
+    display: flex;
+    height: 14px;
+    line-height: 14px;
+}
+
+.submit-order .submit-box .remarks-con {
+    padding-bottom: 36px;
+    align-items: center;
+}
+
+.submit-order .submit-box .tit .text {
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.submit-order .submit-box .tit .text.shop-remark {
+    font-size: 12px;
+    font-weight: normal;
+}
+
+.submit-order .submit-box .tit .action {
+    font-size: 12px;
+    color: #999;
+    line-height: 16px;
+    margin-left: 20px;
+    cursor: pointer;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;
+}
+
+.submit-order .submit-box .tit .action:hover {
+    color: #e1251b;
+}
+
+.submit-order .submit-box .con {
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+}
+
+.submit-order .submit-box .item {
+    border: 1px solid #eee;
+    margin-left: 20px;
+    margin-top: 20px;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;
+    cursor: pointer;
+    position: relative;
+}
+
+.submit-order .submit-box .item:hover,
+.submit-order .submit-box .item.active {
+    border-color: #e1251b;
+}
+
+.submit-order .submit-box .item:first-child {
+    margin-left: 0;
+}
+
+/* 全部留言（虚拟商品） */
+.submit-order .virtual-goods-msg {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 10px 20px 10px 20px;
+}
+.submit-order .virtual-goods-msg .msg-tit {
+    display: block;
+    min-width: 70px;
+    line-height: 32px;
+}
+.submit-order .virtual-goods-msg .msg-tit.msg-tit-en {
+    min-width: 95px;
+}
+.submit-order .virtual-goods-msg .msg-item {
+    display: inline-block;
+    position: relative;
+    margin-bottom: 15px;
+}
+.submit-order .virtual-goods-msg .msg-item:not(:last-child) {
+    margin-right: 15px;
+}
+.submit-order .virtual-goods-msg .msg-item .red-stress {
+    vertical-align: top;
+    color: #e1251b;
+    font-weight: bold;
+    font-size: 13px;
+}
+.submit-order .virtual-goods-msg .msg-item .msg-int-item {
+    height: 30px;
+    line-height: 1em;
+    padding: 0 10px;
+    border: 1px solid #eee;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;
+}
+.submit-order .virtual-goods-msg .msg-int-item:hover,
+.submit-order .virtual-goods-msg .msg-int-item.active {
+    border-color: initial;
+}
+
+/* 发票信息 */
+.submit-order .invoice-title {
+    margin: 0 20px;
+}
+.submit-order .invoice-box {
+    display: flex;
+    justify-content: flex-start;
+}
+.submit-order .invoice-box .invoice-box-item{
+    margin-right: 20px;
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.submit-order .invoice-box .invoice-operation{
+    color: #005ea7;
+    cursor:pointer;
+}
+/* 发票信息end */
+/* 收货地址 */
+
+.submit-order .submit-box .address-box .item {
+    padding: 20px 15px 20px;
+    width: 242px;
+    min-height: 75px;
+}
+
+.submit-order .submit-box .address-box .item:nth-child(4n-3) {
+    margin-left: 0;
+}
+
+.submit-order .submit-box .address-box .item .name-phone {
+    margin: 5px 0 10px;
+    display: flex;
+    align-items: center;
+}
+
+.submit-order .submit-box .address-box .item .name-phone .name {
+    max-width: 100px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.submit-order .submit-box .address-box .item .name-phone .phone {
+    margin-left: 10px;
+    font-family: arial;
+}
+
+.submit-order .submit-box .address-box .item .default-tag {
+    display: none;
+    background: #e1251b;
+    color: #fff;
+    padding: 0 3px;
+    border-radius: 2px;
+    font-size: 10px;
+    margin-left: 10px;
+}
+
+.submit-order .submit-box .address-box .item.default-address .default-tag {
+    display: inline-block;
+}
+
+.submit-order .submit-box .address-box .item .set-default {
+    color: #005ea7;
+    vertical-align: top;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;
+    margin-left: 10px;
+    display: none;
+}
+
+.submit-order .submit-box .address-box .item:hover .set-default,
+.submit-order .submit-box .address-box .item.active .set-default {
+    display: inline-block;
+}
+
+.submit-order .submit-box .address-box .item.default-address .set-default {
+    display: none;
+}
+
+.submit-order .submit-box .address-box .item .set-default:hover {
+    color: #e1251b;
+}
+
+.submit-order .submit-box .address-box .item .address-detail {
+    color: #999;
+    line-height: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    /* display: -webkit-box; */
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    position: relative;
+}
+
+.submit-order .submit-box .address-box .item .del-edit {
+    position: absolute;
+    bottom: 0px;
+    right: 8px;
+    display: none;
+}
+
+.submit-order .submit-box .address-box .item:hover .del-edit {
+    display: block;
+}
+
+.submit-order .submit-box .address-box .item .del-edit .del,
+.submit-order .submit-box .address-box .item .del-edit .edit {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    background: url(../images/icons.png) no-repeat;
+    cursor: pointer;
+}
+
+.submit-order .submit-box .address-box .item .del-edit .edit {
+    background-position: 0 -434px;
+}
+
+.submit-order .submit-box .address-box .item .del-edit .del {
+    margin-left: 5px;
+    background-position: 0 -415px;
+}
+
+.submit-order .submit-box .address-box .item .del-edit .edit:hover {
+    background-position: -19px -434px;
+}
+
+.submit-order .submit-box .address-box .item .del-edit .del:hover {
+    background-position: -19px -415px;
+}
+
+.submit-order .submit-box .address-box .item.default-address .del-edit .del {
+    display: none;
+}
+
+.submit-order .submit-box .address-box .item.add-address:hover {
+    border-color: #ddd;
+}
+
+.submit-order .submit-box .address-box .item.add-address .add-box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    -o-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: #999;
+}
+
+.submit-order .submit-box .address-box .item.add-address .img {
+    width: 30px;
+    height: 30px;
+    font-family: arial;
+    background: #efefef;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+    font-size: 22px;
+    border-radius: 50%;
+    margin-bottom: 7px;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;
+}
+
+.submit-order .submit-box .address-box .item.add-address .text {
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;
+}
+
+.submit-order .submit-box .address-box .item.add-address:hover .img {
+    background: #e1251b;
+    color: #fff;
+}
+
+.submit-order .submit-box .address-box .item.add-address:hover .text {
+    color: #e1251b;
+}
+
+
+/* 收货地址 end */
+
+
+/* 支付方式 */
+
+.submit-order .submit-box .pay-way .item,
+.submit-order .submit-box .delivery-way .item {
+    padding: 8px 30px;
+}
+
+
+/* 支付方式 end */
+
+
+/* 积分抵扣 */
+
+.integral-box .integral-item {
+    font-size: 12px;
+    padding: 10px;
+    cursor: pointer;
+    margin-top: 10px;
+}
+
+.integral-box .integral-item.integral-input-box {
+    color: #999999;
+}
+
+.integral-box .integral-item.integral-input-box .text {
+    width: 60px;
+    border: 1px solid #ddd;
+    padding: 2px 5px;
+    font-size: 12px;
+    font-family: arial;
+}
+
+
+/* 去除 type="number" 箭头 */
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+}
+
+input[type='number'] {
+    -moz-appearance: textfield;
+}
+
+
+/* 去除number箭头 end */
+
+.integral-box .integral-item .integral-money {
+    color: #e43130;
+}
+
+.integral-box .integral-item.integral-text {
+    width: 50%;
+    background-color: #f6f6f6;
+    margin-top: 5px;
+}
+
+.integral-box .integral-item.integral-text .text-item {
+    margin-left: 80px;
+}
+
+.font-bold {
+    font-weight: bold;
+}
+
+.font-gray {
+    color: #888888;
+}
+
+
+/* 积分抵扣 end */
+
+
+/* 配送方式 */
+
+.submit-order .submit-box .delivery-way .description {
+    margin-left: 10px;
+    margin-top: 20px;
+    padding: 8px 0;
+    color: #999;
+}
+
+
+/* 配送方式 end */
+
+
+/* 商品信息 */
+
+.submit-order .submit-box.goods-info {
+    padding-bottom: 0;
+}
+
+.submit-order .submit-box .goods-msg {
+    margin-top: 20px;
+}
+
+.submit-order .submit-box .goods-msg .msg-tab {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 44px;
+    font-size: 14px;
+    color: #333333;
+    padding: 10px;
+    border: 1px solid #eee;
+    background: #f8f8f8;
+    box-sizing: border-box;
+}
+
+.submit-order .submit-box .goods-msg .msg-tab .img,
+.submit-order .submit-box .goods-msg .msg-con .img {
+    padding: 0 10px 0 20px;
+    width: 80px;
+}
+.last-box {
+  border-bottom: 1px solid #eee !important;
+}
+.submit-order .submit-box .goods-msg .msg-tab .info {
+    width: 450px;
+}
+
+.submit-order .submit-box .goods-msg .msg-tab .unit-price,
+.submit-order .submit-box .goods-msg .msg-con .unit-price,
+.submit-order .submit-box .goods-msg .msg-tab .number,
+.submit-order .submit-box .goods-msg .msg-con .number,
+.submit-order .submit-box .goods-msg .msg-tab .freight,
+.submit-order .submit-box .goods-msg .msg-con .freight,
+.submit-order .submit-box .goods-msg .msg-tab .total,
+.submit-order .submit-box .goods-msg .msg-con .total {
+    width: 220px;
+    text-align: center;
+}
+
+.submit-order .submit-box .goods-msg .msg-con {
+    /* background: #f9f9f9; */
+    border-top: 1px solid #eee;
+    border-left: 1px solid #eee;
+    border-right: 1px solid #eee;
+    margin-top: 20px;
+}
+
+.submit-order .submit-box .goods-msg .shop-msg {
+    display: flex;
+    align-items: center;
+    height: 42px;
+    padding-left: 20px;
+    background: #f8f8f8;
+    border-bottom: 1px solid #eee;
+}
+
+.submit-order .submit-box .goods-msg .shop-msg .self {
+    background: #e1251b;
+    color: #fff;
+    padding: 1px 3px;
+    display: inline-block;
+    height: 14px;
+    line-height: 14px;
+    border-radius: 2px;
+    margin-left: 5px;
+    vertical-align: top;
+}
+
+.submit-order .submit-box .goods-msg .shop-msg .shop-name {
+    display: inline-block;
+    vertical-align: top;
+    font-weight: 700;
+    line-height: 16px;
+}
+
+.submit-order .submit-box .goods-msg .msg-con .goods-box {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid #eee;
+}
+.submit-order .submit-box .goods-msg .msg-con .prod-row {
+    padding: 15px 0;
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+/* 赠品 */
+.gift-con {
+    width: 100%;
+    padding: 0 0 10px 20px;
+    box-sizing: border-box;
+}
+.gift-item {
+  max-width: 468px;
+  margin-bottom: 4px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.gift-item:last-child {
+  margin-bottom: 0;
+}
+.gift-item-name:hover {
+  color: #e1251b;
+}
+
+.gift-item-name .gift-item-sku-name {
+  color: #999;
+  margin-left: 10px;
+}
+
+.gift-item:last-child {
+    margin-bottom: 0;
+}
+.gift-item-name:hover {
+    color: #e1251b;
+}
+
+.submit-order .submit-box .goods-msg .msg-con .img-box {
+    line-height: 80px;
+    display: block;
+    width: 80px;
+    height: 80px;
+    font-size: 0;
+    cursor: pointer;
+}
+
+.submit-order .submit-box .goods-msg .msg-con .img-box img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.submit-order .submit-box .goods-msg .msg-con .info {
+    line-height: 20px;
+    align-self: flex-start;
+    width: 450px;
+}
+
+.submit-order .submit-box .goods-msg .msg-con .info .name {
+    max-width: 380px;
+    max-height: 36px;
+    line-height: 18px;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+}
+
+.submit-order .submit-box .goods-msg .msg-con .info .name:hover {
+    color: #e1251b;
+    cursor: pointer;
+}
+
+.submit-order .submit-box .goods-msg .msg-con .info .sku {
+    max-width: 380px;
+    height: 20px;
+    display: block;
+    margin-top: 10px;
+    color: #999;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.submit-order .submit-box .goods-msg .msg-con .unit-price,
+.submit-order .submit-box .goods-msg .msg-con .freight,
+.submit-order .submit-box .goods-msg .msg-con .number {
+    font-family: verdana;
+}
+
+.submit-order .submit-box .goods-msg .msg-con .total {
+    font-family: verdana;
+    font-weight: 600;
+    color: #e1251b;
+}
+
+.submit-order .submit-box .goods-msg .msg-con .remake-box {
+    display: flex;
+    align-items: center;
+    height: 59px;
+    padding-left: 20px;
+}
+
+.submit-order .submit-box .goods-msg .msg-con .remake-box .text {
+    border: 1px solid #eee;
+    padding: 5px 10px;
+    height: 20px;
+    width: 350px;
+    font-size: 12px;
+    font-family: arial;
+}
+
+.submit-order .submit-box .goods-msg .msg-con .coupon-list {
+    margin: 25px 20px 5px;
+}
+
+
+/* 商品信息 end */
+
+
+/* 发票信息 */
+
+.submit-order .submit-box .invoice-msg .invoice-text {
+    margin-top: 20px;
+    margin-right: 20px;
+}
+
+.submit-order .submit-box .invoice-msg .invoice-btn {
+    margin-top: 20px;
+    color: #005ea7;
+}
+
+.submit-order .submit-box .invoice-msg .invoice-btn:hover {
+    color: #e1251b;
+}
+
+
+/* 发票信息 end */
+
+
+/* 优惠信息 */
+
+.submit-order .submit-box .coupon-list {
+    margin-top: 20px;
+    border: 1px solid #eee;
+}
+
+.submit-order .submit-box .coupon-list .coupon-tab {
+    display: flex;
+    background: #f9f9f9;
+    border-bottom: 0;
+}
+
+.submit-order .submit-box .coupon-list .coupon-tab .tab-item {
+    padding: 10px 20px;
+    cursor: pointer;
+}
+
+.submit-order .submit-box .coupon-list .coupon-tab .tab-item.active {
+    color: #e1251b;
+    background: #fff;
+}
+
+.submit-order .submit-box .coupon-list .coupon-box {
+    display: flex;
+    flex-wrap: wrap;
+    padding-bottom: 20px;
+}
+
+.submit-order .submit-box .coupon-list .c-item {
+    margin: 20px 0 0 20px;
+    background: #f9f9f9;
+    width: 215px;
+    position: relative;
+    cursor: pointer;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-type {
+    background: #e1251b;
+    padding: 15px 10px 12px;
+    color: #fff;
+    position: relative;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-type::before,
+.submit-order .submit-box .coupon-list .c-item .coupon-type::after {
+    position: absolute;
+    display: block;
+    width: 10px;
+    height: 10px;
+    content: " ";
+    background: #fff;
+    border-radius: 50%;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-type::before {
+    left: -5px;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-type::after {
+    right: -5px;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-type .coupon-price {
+    display: flex;
+    align-items: center;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-type .coupon-price .price {
+    margin-left: 10px;
+    margin-top: 5px;
+    font-family: arial;
+    color: #fff;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-type .coupon-price .price .big {
+    font-size: 24px;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-type .coupon-price .limit {
+    margin-left: 10px;
+    margin-top: 10px;
+    font-family: arial;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-type .coupon-time {
+    margin: 5px 0 5px 10px;
+    font-family: arial;
+    opacity: 0.7;
+    line-height: 16px;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-info {
+    padding: 5px 15px 12px;
+    position: relative;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-info::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 3px;
+    background: url(../images/icons.png) no-repeat;
+    background-position: -2px -783px;
+    content: " ";
+    z-index: 3;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-info .range-item {
+    margin-top: 10px;
+    color: #999;
+    display: flex;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-info .range-item .label {
+    color: #000;
+}
+
+.submit-order .submit-box .coupon-list .c-item .coupon-info .range-item .text {
+    flex: 1;
+}
+
+.submit-order .submit-box .coupon-list .c-item.check .coupon-type::before,
+.submit-order .submit-box .coupon-list .c-item.check .coupon-type::after {
+    display: none;
+}
+
+.submit-order .submit-box .coupon-list .c-item.check .coupon-info::before {
+    background: none;
+}
+
+.submit-order .submit-box .coupon-list .c-item.check {
+    background: #fff;
+}
+
+.submit-order .submit-box .coupon-list .c-item.check .coupon-info {
+    box-sizing: border-box;
+    border: 1px solid #e1251b;
+    border-top: 0;
+}
+
+.submit-order .submit-box .coupon-list .c-item.check::before {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    display: block;
+    width: 0;
+    height: 0;
+    content: " ";
+    border: 10px solid transparent;
+    border-right: 10px solid #e1251b;
+    border-bottom: 10px solid #e1251b;
+}
+
+.submit-order .submit-box .coupon-list .c-item.check::after {
+    position: absolute;
+    bottom: 2px;
+    right: 1px;
+    display: block;
+    width: 10px;
+    height: 8px;
+    content: " ";
+    background: url(../images/icons.png) no-repeat;
+    background-position: -21px -750px;
+}
+
+.submit-order .submit-box .coupon-list .c-item.useless {
+    cursor: not-allowed;
+}
+
+.submit-order .submit-box .coupon-list .c-item.useless .coupon-type {
+    background: #ccc;
+}
+
+.submit-order .submit-box .coupon-list .c-item.useless .coupon-info::before {
+    background-position: 0 -791px;
+}
+
+
+/* 优惠信息 end */
+
+
+/* 留言 */
+
+.submit-order .submit-box .remakes .text {
+    border: 0;
+    border: 1px solid #eee;
+    padding: 10px;
+    width: 350px;
+    margin-left: 20px;
+}
+
+
+/* 留言 end */
+
+
+/* 未选中样式 */
+
+/deep/ .el-checkbox__inner {
+    border-radius: 50%;
+    border-color: #a8a8a8;
+    width: 16px;
+    height: 16px;
+}
+
+/deep/ .el-checkbox {
+    color: #bbb;
+}
+
+/deep/ .el-checkbox .el-checkbox__input {
+    margin-right: 5px;
+    width: 16px;
+    height: 16px;
+}
+
+/deep/ .el-checkbox__input.is-focus .el-checkbox__inner {
+    border-color: #bbb;
+}
+
+
+/* 选中框样式 */
+
+/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
+    color: #e43130;
+}
+
+/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: #e43130;
+    border-color: #e43130;
+}
+
+
+/* 选中对号 */
+
+/deep/ .el-checkbox__input .el-checkbox__inner::after {
+    /* 对号 */
+    border: 2px solid #fff;
+    /* 不覆盖下面的 会 导致对号变形 */
+    box-sizing: content-box;
+    content: "";
+    border-left: 0;
+    border-top: 0;
+    height: 6px;
+    left: 4px;
+    position: absolute;
+    top: 2px;
+    width: 3px;
+    transform: rotate(45deg) scaleY(1);
+}
+
+
+/* 积分抵现 */
+
+
+/* 结算区 */
+
+.submit-order .statistic-box {
+    margin-top: 30px;
+    margin-bottom: 20px;
+}
+
+.submit-order .statistic-box .item {
+    display: flex;
+    justify-content: flex-end;
+    min-height: 24px;
+    line-height: 24px;
+    margin-bottom: 5px;
+}
+
+.submit-order .statistic-box .item .tit,
+.submit-order .detail-box .item .tit {
+    width: 180px;
+    margin-right: 20px;
+    text-align: right;
+}
+
+.submit-order .statistic-box .item .tit .number {
+    color: #e1251b;
+    margin-right: 3px;
+}
+
+.submit-order .statistic-box .item .con,
+.submit-order .detail-box .item .con {
+    min-width: 125px;
+    text-align: right;
+    margin-right: 20px;
+    font-family: verdana;
+}
+.submit-order .statistic-box .item .con.bright {
+  color: #e1251b;
+}
+
+.submit-order .detail-box {
+    padding: 15px 0;
+    line-height: 20px;
+    text-align: right;
+    border-top: 1px solid #eee;
+    color: #999;
+    background-color: #f9f9f9;
+}
+
+.submit-order .detail-box .item {
+    display: flex;
+    justify-content: flex-end;
+    line-height: 25px;
+}
+
+.submit-order .detail-box .item .tit {
+    color: #000;
+}
+
+.submit-order .detail-box .item .con {
+    color: #e1251b;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.submit-order .detail-box .item .text {
+    margin-right: 20px;
+}
+
+.submit-order .btn-box {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.submit-order .btn-box .btn {
+    display: block;
+    width: 135px;
+    height: 38px;
+    line-height: 38px;
+    text-align: center;
+    background: #e1251b;
+    color: #fff;
+    margin: 20px 20px 0 0;
+    font-size: 15px;
+    font-weight: 600;
+    border-radius: 2px;
+}
+
+.submit-order .btn-box .btn:hover {
+    opacity: 0.8;
+}
+
+
+/* 结算区 end */
+
+
+/* 弹窗 */
+
+.popup-box .con .invoice-tab {
+    display: flex;
+    margin-bottom: 15px;
+}
+
+.popup-box .con .invoice-tab .tab-item {
+    border: 1px solid #ddd;
+    padding: 5px 20px;
+    margin-right: 12px;
+}
+
+.popup-box .con .invoice-tab .tab-item.active {
+    border-color: #e1251b;
+}
+
+.popup-box .con .invoice-tip {
+    padding: 10px;
+    background: #f9f9f9;
+    margin-bottom: 5px;
+}
+
+.popup-box .con .invoice-tip .tip-item {
+    line-height: 20px;
+    color: #666;
+}
+
+.popup-box .con .edit .text-box .invoice-title {
+    display: flex;
+}
+
+.popup-box .con .edit .text-box .invoice-title .tit-item {
+    border: 1px solid #ddd;
+    padding: 5px 20px;
+    margin-right: 12px;
+}
+
+.popup-box .con .edit .text-box .invoice-title .tit-item.active {
+    border-color: #e1251b;
+}
+
+.popup-box .con .edit .item .label,
+.popup-box .con .edit .item .label-btn {
+    width: 100px;
+}
+
+
+/* 弹窗 end */
+
+
+/* 提交订单 end  */

assets/css/uc-address.css

@@ -0,0 +1,120 @@
+
+/* 个人中心-收货地址 */
+
+.user-center .address .add-address {
+    display: flex;
+    padding-top: 5px;
+    align-items: center;
+}
+
+.user-center .address .add-address .add-btn {
+    padding: 5px 15px;
+    background: #e1251b;
+    color: #fff;
+    border-radius: 2px;
+    margin-right: 10px;
+}
+
+.user-center .address .add-address .add-btn:hover {
+    opacity: 0.9;
+}
+
+.user-center .address .add-address .add-limit {
+    color: #999;
+}
+
+.user-center .address .add-address .add-limit .number {
+    color: #e1251b;
+    margin: 0 3px;
+}
+
+.user-center .address .address-list .item {
+    margin-top: 20px;
+    border: 1px solid;
+    border-color: #eee;
+    padding: 15px 20px;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;
+    cursor: pointer;
+}
+
+.user-center .address .address-list .item:hover {
+    border-color: #e1251b;
+}
+
+.user-center .address .address-list .item .item-row {
+    display: flex;
+    align-items: center;
+}
+
+.user-center .address .address-list .item .item-row .name,
+.user-center .address .address-list .item .item-row .phone-number {
+    font-size: 14px;
+    font-family: arial;
+    margin-right: 20px;
+}
+
+.user-center .address .address-list .item .item-row .default-btn {
+    color: #005ea7;
+    display: none;
+}
+
+.user-center .address .address-list .item:hover .item-row .default-btn {
+    display: block;
+}
+
+.user-center .address .address-list .item .item-row .default-btn:hover {
+    color: #e1251b;
+}
+
+.user-center .address .address-list .item.default-address .item-row .default-btn {
+    display: block;
+    background: #e1251b;
+    color: #fff;
+    padding: 0 3px;
+    border-radius: 2px;
+}
+
+.user-center .address .address-list .item .item-row .action-box {
+    flex: 1;
+    text-align: right;
+    opacity: 0;
+}
+
+.user-center .address .address-list .item:hover .item-row .action-box {
+    opacity: 1;
+}
+
+.user-center .address .address-list .item .item-row .action-box .edit,
+.user-center .address .address-list .item .item-row .action-box .delete {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    background: url(../images/icons.png) no-repeat;
+    cursor: pointer;
+}
+
+.user-center .address .address-list .item .item-row .action-box .edit {
+    background-position: 0 -434px;
+    margin-right: 10px;
+}
+
+.user-center .address .address-list .item .item-row .action-box .edit:hover {
+    background-position: -19px -434px;
+}
+
+.user-center .address .address-list .item .item-row .action-box .delete {
+    background-position: 0 -415px;
+}
+
+.user-center .address .address-list .item .item-row .action-box .delete:hover {
+    background-position: -19px -415px;
+}
+
+.user-center .address .address-list .item .address-detail {
+    color: #999;
+    margin-top: 10px;
+}
+/* 个人中心-收货地址 end */

assets/css/uc-balance.css

@@ -0,0 +1,342 @@
+
+/* 个人中心-我的余额 */
+
+/* 我的余额 */
+
+.user-center .balance .uc-serach {
+    padding: 5px 0;
+    color: #777;
+}
+
+.user-center .balance .uc-serach .left .current-balance {
+    margin-left: 10px;
+    margin-right: 10px;
+    /* width: 130px; */
+    color: #000;
+}
+
+.user-center .balance .uc-serach .left .current-balance .number,
+.user-center .balance .uc-serach .left .expired-balance .number {
+    color: #e1251b;
+    font-family: verdana;
+    font-size: 18px;
+}
+
+.user-center .balance .uc-serach .left .expired-balance .number,
+.user-center .balance .uc-serach .left .expired-balance .balance-des {
+    color: #999;
+}
+
+.user-center .balance .uc-serach .right .search {
+    border-radius: 2px;
+    cursor: pointer;
+}
+
+.user-center .balance .balance-detail .box {
+    width: 100%;
+    text-align: center;
+}
+
+.user-center .balance .balance-detail .box th {
+    background: #f9f9f9;
+    padding: 10px 0;
+    padding-left: 10px;
+    text-align: left;
+}
+
+.user-center .balance .balance-detail .box td {
+    padding: 13px 0;
+    padding-left: 10px;
+    color: #999;
+    border-bottom: 1px solid #eee;
+}
+
+.user-center .balance .balance-detail .box td .balance-change {
+    font-family: arial;
+    font-size: 14px;
+}
+
+.user-center .balance .balance-detail .box td .add {
+    color: #e1251b;
+}
+
+.user-center .balance .balance-detail .box td .time {
+    font-family: arial;
+    color: #999;
+}
+
+/* 我的余额 end */
+
+/* 余额充值 */
+
+.topup .step-box .left .text {
+    line-height: 40px;
+}
+
+.text .order-number {
+    margin-left: 10px;
+}
+
+.text .order-number .order-number-con {
+    display: inline-block;
+    vertical-align: top;
+}
+
+.text .order-number .order-number-con .order-number-item {
+    display: block;
+}
+
+.topup .topup-con .pay-box {
+    background: #f9f9f9;
+    padding: 20px;
+}
+
+.topup .topup-con .pay-box .pay-info {
+    /* padding-left: 52px; */
+    position: relative;
+}
+
+.topup .topup-con .pay-box .pay-info .item {
+    display: flex;
+    justify-content:space-between;
+}
+
+.topup .topup-con .pay-box .pay-info .item .tit {
+    font-size: 14px;
+    height: 20px;
+    line-height: 20px;
+    flex: 1;
+    font-weight: 600;
+}
+
+.itemTip {
+    color: #999;
+    margin-top: 1%;
+}
+
+.topup .topup-con .section-topup {
+    margin-top: 30px;
+}
+
+.topup .topup-con .section-topup .tit {
+    margin-bottom: 20px;
+    font-size: 14px;
+    padding: 0 20px;
+    width: 10%;
+    text-align: right;
+    font-weight: 600;
+}
+
+.topup .topup-con .section-topup .con {
+    display: flex;
+}
+
+.topup .topup-con .section-topup .con .unit {
+    font-size: 20px;
+    margin-left: 2%;
+    font-weight: 400;
+}
+
+.topup .topup-con .section-topup .con .item {
+    /* width: 174px; */
+    height: 60px;
+    line-height: 60px;
+    /* margin-left: 20px; */
+    margin-bottom: 20px;
+    border: 1px solid #e0e0e0;
+    text-align: center;
+    cursor: pointer;
+    overflow: hidden;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+}
+
+.topup .topup-con .section-topup .con .item:hover {
+    border-color: #e1251b;
+}
+.topup .topup-con .section-topup .con .item.active{
+    border-color: #e1251b;
+}
+
+.topup .topup-con .section-topup .btn {
+    margin-top: 10px;
+    margin-left: 16.5%;
+    display: block;
+    font-size: 15px;
+    font-weight: 500;
+    width: 130px;
+    height: 30px;
+    line-height: 30px;
+    background: #e1251b;
+    text-align: center;
+    color: #fff;
+    border-radius: 5px;
+}
+
+.topup .topup-con .section-topup .btn:hover {
+    opacity: 0.9;
+}
+
+.topup .topup-con .section-topup .btn.no-pay {
+    cursor: not-allowed;
+    background: #ccc;
+}
+
+.items .text {
+    border: 1px solid #eee;
+    width: 220px;
+    padding: 0 10px;
+    height: 30px;
+    font-size: 12px;
+    box-sizing: border-box;
+}
+  
+
+.section-topup .items {
+    display: flex;
+    margin-top: 10px;
+  }
+  
+  .section-topup .items .tit {
+    margin: 0 15px;
+    color: #000;
+    display: block;
+    line-height: 30px;
+  }
+  
+  .section-topup .items .con {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  .section-topup .items .con .number{
+    color: #e1251b;
+    font-family: verdana;
+    font-size: 20px;
+    font-weight: 600;
+  }
+  
+  .section-topup .items .con .item {
+    display: inline-block;
+    border: 1px solid #ddd;
+    position: relative;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    vertical-align: middle;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;
+    cursor: pointer;
+  }
+  
+  .section-topup .items .con .item.not-optional {
+    border: 1px dashed #bbb;
+    color: #bbb;
+  }
+  
+  .section-topup .items .con .item.active,
+  .section-topup .items .con .item:hover {
+    border: 1px solid #e1251b;
+    color: #e1251b;
+  }
+  
+  .section-topup .items.sku-img .tit {
+    line-height: 52px;
+  }
+  
+  .section-topup .items.sku-img .con .item {
+    width: 50px;
+    height: 50px;
+    font-size: 0;
+    line-height: 50px;
+  }
+  
+  .section-topup .items.sku-img .con .item img {
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+  }
+  
+  .section-topup .items.sku-text .con .item {
+    padding: 0 16px;
+    line-height: 28px;
+    height: 28px;
+  }
+  
+  .section-topup .items .con .goods-number {
+    height: 30px;
+  }
+  
+  .section-topup .items .con .goods-number .reduce,
+  .section-topup .items .con .goods-number .increase {
+    display: inline-block;
+    vertical-align: top;
+    width: 30px;
+    height: 30px;
+    background: #e9e9e9;
+    font-size: 22px;
+    text-align: center;
+    line-height: 26px;
+    color: #999;
+    cursor: pointer;
+  }
+  
+  .section-topup .items .con .goods-number .limit {
+    cursor: not-allowed;
+    color: #ccc;
+  }
+  
+  .section-topup .items .con .goods-number .number {
+    border: 0;
+    width: 60px;
+    height: 30px;
+    text-align: center;
+    font-family: arial;
+    vertical-align: top;
+  }
+
+  .items .con .itemPay {
+    width: 174px;
+    height: 60px;
+    line-height: 60px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    border: 1px solid #e0e0e0;
+    text-align: center;
+    cursor: pointer;
+    overflow: hidden;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+  }
+  .items .con .itemPay img {
+    display: block;
+    width: 28px;
+    height: 28px;
+    margin-right: 10px;
+  }
+  .items .con .itemPay .paypal-logo {
+    width: 30px;
+    height: 34px;
+  }
+  .items .con .itemPay .paypal-text {
+    width: 80px;
+    height: 26px;
+  }
+
+  .items .con .active {
+    border-color: #e1251b;
+  }
+
+/* 余额充值 end */
+
+/* 个人中心-我的余额 end */

assets/css/uc-collection.css

@@ -0,0 +1,428 @@
+
+/* 个人中心-商品收藏 */
+
+.user-center .uc-collection .goods-list .list-con {
+    margin-top: -15px;
+    width: 1080px;
+}
+
+.user-center .uc-collection .goods-list .list-con .item {
+    border: 1px solid #eee;
+    width: 253px;
+}
+
+.user-center .uc-collection .goods-list .list-con .item:hover {
+    opacity: 1;
+    box-shadow: 0 0 8px rgba(0,0,0,.07);
+}
+
+.user-center .uc-collection .goods-list .list-con .item .goods-img {
+    width: 253px;
+    height: 253px;
+    line-height: 253px;
+    
+}
+
+.user-center .uc-collection .goods-list .list-con .item .goods-img div{
+    height: 100%;
+    width: 100%;
+}
+
+.user-center .uc-collection .goods-list .list-con .item .goods-msg {
+    padding: 10px;
+}
+
+.user-center .uc-collection .goods-action {
+    text-align: center;
+    line-height: 35px;
+    background: #f9f9f9;
+    border-top: 1px solid #eee;
+    display: flex;
+}
+
+.user-center .uc-collection .goods-action .action-a {
+    color: #666;
+    text-align: center;
+    width: 50%;
+}
+
+.user-center .uc-collection .goods-action .action-a.a1 {
+    border-right: 1px solid #eee;
+}
+
+.user-center .uc-collection .goods-action .action-a .icon {
+    display: inline-block;
+    vertical-align: top;
+    background: url(../images/icons.png) no-repeat;
+    margin-right: 5px;
+}
+
+.user-center .uc-collection .goods-action .action-a.a1 .icon {
+    width: 17px;
+    height: 15px;
+    margin-top: 10px;
+    background-position: 0 -38px;
+}
+
+.user-center .uc-collection .goods-action .action-a.a2 .icon {
+    width: 14px;
+    height: 14px;
+    margin-top: 10px;
+    background-position: 0 -415px;
+}
+
+.user-center .uc-collection .goods-action .action-a:hover {
+    color: #e1251b;
+}
+
+.user-center .uc-collection .goods-action .action-a.a1:hover .icon {
+    background-position: -22px -38px;
+}
+
+.user-center .uc-collection .goods-action .action-a.a2:hover .icon {
+    background-position: -19px -415px;
+}
+
+.user-center .uc-collection .item-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.2);
+    display: none;
+}
+
+.user-center .uc-collection .batch-edit .item-mask {
+    display: block;
+}
+
+.user-center .uc-collection .goods-list .list-con .item.batch-edit:hover {
+    opacity: 1;
+    box-shadow: none;
+    border-color: #e1251b;
+}
+
+.user-center .uc-collection .goods-list .list-con .item.checked {
+    border-color: #e1251b;
+}
+
+.user-center .uc-collection .item-mask .icon {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 30px;
+    height: 30px;
+    background: rgba(0,0,0,0.2);
+}
+
+.user-center .uc-collection .goods-list .list-con .item.checked .item-mask .icon {
+    background: #e1251b;
+}
+
+.user-center .uc-collection .item-mask .icon::before {
+    position: absolute;
+    top: 9px;
+    left: 7px;
+    display: block;
+    width: 16px;
+    height: 12px;
+    content: " ";
+    background: url(../images/icons.png) no-repeat 0 -746px;
+}
+
+.user-center .uc-collection .pages {
+    margin-top: 20px;
+    margin-right: 10px;
+}
+
+/* 个人中心-商品收藏 end */
+
+/* 个人中心-店铺收藏 */
+
+.user-center .uc-collection .shop-list .item {
+    border: 1px solid #eee;
+    display: flex;
+    margin-bottom: 15px;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;
+    position: relative;
+}
+
+.user-center .uc-collection .shop-list .item:hover {
+    box-shadow: 0 0 8px rgba(0,0,0,.05);
+}
+
+.user-center .uc-collection .shop-list .item .shop-msg {
+    width: 287px;
+    border-right: 1px solid #eee;
+}
+
+.user-center .uc-collection .shop-list .item .shop-msg .shop-logo {
+    display: block;
+    width: 120px;
+    height: 120px;
+    line-height: 120px;
+    margin: 10px auto;
+    font-size: 0;
+}
+
+.user-center .uc-collection .shop-list .item .shop-msg .shop-logo img {
+    max-width: 100%;
+    max-height: 100%;
+    vertical-align: middle;
+}
+
+.user-center .uc-collection .shop-list .item .shop-msg .shop-name {
+    font-size: 14px;
+    display: block;
+    height: 16px;
+    line-height: 14px;
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.user-center .uc-collection .shop-list .item .shop-msg .shop-name .self {
+    background: #e1251b;
+    color: #fff;
+    padding: 0 3px;
+    display: inline-block;
+    height: 16px;
+    line-height: 16px;
+    border-radius: 2px;
+    margin-right: 5px;
+    font-size: 12px;
+    vertical-align: top;
+}
+
+.user-center .uc-collection .shop-list .item .shop-msg .collection-number {
+    display: block;
+    height: 19px;
+    line-height: 19px;
+    color: #999;
+    text-align: center;
+    margin-top: 10px;
+    font-family: arial;
+}
+
+.user-center .uc-collection .shop-list .item .shop-msg .shop-action {
+    text-align: center;
+    line-height: 35px;
+    background: #f9f9f9;
+    border-top: 1px solid #eee;
+    display: flex;
+    margin-top: 20px;
+}
+
+.user-center .uc-collection .shop-list .item .shop-msg .shop-action .action-a {
+    color: #666;
+    text-align: center;
+    width: 50%;
+}
+
+.user-center .uc-collection .shop-list .item .shop-msg .shop-action .action-a.a1 {
+    border-right: 1px solid #eee;
+}
+
+.user-center .uc-collection .shop-list .item .shop-msg .shop-action .action-a .icon {
+    display: inline-block;
+    vertical-align: top;
+    background: url(../images/icons.png) no-repeat;
+    margin-right: 5px;
+}
+
+.user-center .uc-collection .shop-list .item .shop-msg .shop-action .action-a.a1 .icon {
+    width: 14px;
+    height: 13px;
+    margin-top: 11px;
+    background-position: -28px -458px;
+}
+
+.user-center .uc-collection .shop-list .item .shop-msg .shop-action .action-a.a2 .icon {
+    width: 14px;
+    height: 14px;
+    margin-top: 10px;
+    background-position: 0 -415px;
+}
+
+.user-center .uc-collection .shop-list .item .shop-msg .shop-action .action-a:hover {
+    color: #e1251b;
+}
+
+.user-center .uc-collection .shop-list .item .shop-msg .shop-action .action-a.a1:hover .icon {
+    background-position: -9px -458px;
+}
+
+.user-center .uc-collection .shop-list .item .shop-msg .shop-action .action-a.a2:hover .icon {
+    background-position: -19px -415px;
+}
+
+.user-center .uc-collection .shop-list .item .shop-goods {
+    flex: 1;
+}
+
+.user-center .uc-collection .shop-list .item .shop-goods .shop-nav {
+    height: 28px;
+    padding: 15px;
+    display: flex;
+    align-items: center;
+}
+
+.user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-box {
+    flex: 1;
+    display: flex;
+}
+
+.user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-box .nav-item {
+    height: 25px;
+    line-height: 25px;
+    padding: 0 14px;
+    border: 1px solid #eee;
+    margin-left: -1px;
+    position: relative;
+}
+
+.user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-box .nav-item.active,
+.user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-box .nav-item:hover {
+    border-color: #e1251b;
+    z-index: 1;
+    color: #e1251b;
+}
+
+.user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-box .nav-item .number {
+    font-family: arial;
+    margin-left: 3px;
+}
+
+.user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-page {
+    display: flex;
+    align-items: center;
+}
+
+.user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-page .page-number {
+    font-family: arial;
+    margin-right: 15px;
+}
+
+.user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-page .page-number .page-current {
+    color: #e1251b;
+}
+
+.user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-page .page-btn {
+    display: flex;
+}
+
+.user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-page .page-btn .prev,
+.user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-page .page-btn .next {
+    width: 30px;
+    height: 20px;
+    line-height: 18px;
+    border: 1px solid #e4e4e4;
+    margin-left: -1px;
+    text-align: center;
+    font-size: 20px;
+    font-family: Consolas;
+    color: #333;
+    cursor: pointer;
+}
+
+.user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-page .page-btn .limit {
+    color: #ccc;
+    background: #f9f9f9;
+    cursor: not-allowed;
+}
+
+.user-center .uc-collection .shop-list .item .shop-goods .goods-list {
+    display: flex;
+    padding-bottom: 15px;
+}
+
+.user-center .uc-collection .shop-list .item .shop-goods .goods-list .list-item {
+    text-align: center;
+    margin-left: 15px;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;
+}
+
+.user-center .uc-collection .shop-list .item .shop-goods .goods-list .list-item:hover {
+    opacity: 0.8;
+}
+
+.user-center .uc-collection .shop-list .item .shop-goods .goods-list .list-item .img {
+    display: block;
+    width: 140px;
+    height: 140px;
+    line-height: 140px;
+    font-size: 0;
+}
+
+.user-center .uc-collection .shop-list .item .shop-goods .goods-list .list-item .img img {
+    max-width: 100%;
+    max-height: 100%;
+    vertical-align: middle;
+}
+
+.user-center .uc-collection .shop-list .item .shop-goods .goods-list .list-item .price {
+    margin-top: 10px;
+    color: #000;
+}
+
+.user-center .uc-collection .shop-list .item .shop-goods .goods-list .list-item .price .big {
+    font-size: 14px;
+}
+
+.user-center .uc-collection .shop-list .item .item-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.2);
+    z-index: 3;
+    display: none;
+}
+
+.user-center .uc-collection .shop-list .item.batch-edit .item-mask {
+    display: block;
+}
+
+.user-center .uc-collection .shop-list .item.batch-edit:hover {
+    box-shadow: none;
+    border-color: #e1251b;
+}
+
+.user-center .uc-collection .shop-list .item.checked {
+    border-color: #e1251b;
+}
+
+.user-center .uc-collection .shop-list .item .item-mask .icon {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 30px;
+    height: 30px;
+    background: rgba(0,0,0,0.2);
+}
+
+.user-center .uc-collection .shop-list .item.checked .item-mask .icon {
+    background: #e1251b;
+}
+
+.user-center .uc-collection .shop-list .item .icon::before {
+    position: absolute;
+    top: 9px;
+    left: 7px;
+    display: block;
+    width: 16px;
+    height: 12px;
+    content: " ";
+    background: url(../images/icons.png) no-repeat 0 -746px;
+}
+
+/* 个人中心-店铺收藏 end */

assets/css/uc-coupons.css

@@ -0,0 +1,265 @@
+
+/* 个人中心-优惠券 */
+
+.user-center .uc-coupons .coupons-list {
+    display: flex;
+    margin-top: -15px;
+    flex-wrap: wrap;
+    width: 1080px;
+}
+
+.user-center .uc-coupons .coupons-list .item {
+    width: 255px;
+    margin: 20px 20px 0 0;
+    position: relative;
+    overflow: hidden;
+    background: #fff;
+    min-height: 215px;
+    box-shadow: 0 5px 10px rgba(0,0,0,.05);
+}
+
+.user-center .uc-coupons .coupons-list .item.coupon-over-en,
+.user-center .uc-coupons .coupons-list .item.coupon-used-en {
+    width: 255px;
+    margin: 20px 20px 0 0;
+    position: relative;
+    overflow: hidden;
+    background: #fff;
+    min-height: 248px;
+    box-shadow: 0 5px 10px rgba(0,0,0,.05);
+}
+
+.user-center .uc-coupons .coupons-list .item:nth-child(4n) {
+    margin-right: 0;
+}
+
+.user-center .uc-coupons .coupons-list .item .coupon-close {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    right: -30px;
+    top: 0;
+    z-index: 1;
+    cursor: pointer;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;
+}
+
+.user-center .uc-coupons .coupons-list .item:hover .coupon-close {
+    right: 0;
+}
+
+.user-center .uc-coupons .coupons-list .item .coupon-close::before {
+    position: absolute;
+    top: 9px;
+    left: 9px;
+    display: block;
+    width: 12px;
+    height: 12px;
+    content: " ";
+    background: url(../images/icons.png) no-repeat;
+    background-position: -17px -232px;
+}
+
+.user-center .uc-coupons .coupons-list .item .coupon-type {
+    background: #e1251b;
+    padding: 15px 10px 12px;
+    color: #fff;
+    position: relative;
+}
+
+.user-center .uc-coupons .coupons-list .item .coupon-type::before,
+.user-center .uc-coupons .coupons-list .item .coupon-type::after {
+    position: absolute;
+    display: block;
+    width: 10px;
+    height: 10px;
+    content: " ";
+    background: #fff;
+    border-radius: 50%;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.user-center .uc-coupons .coupons-list .item .coupon-type::before {
+    left: -5px;
+}
+
+.user-center .uc-coupons .coupons-list .item .coupon-type::after {
+    right: -5px;
+}
+
+.user-center .uc-coupons .coupons-list .item .coupon-type .coupon-price {
+    display: flex;
+    align-items: center;
+}
+
+.user-center .uc-coupons .coupons-list .item .coupon-type .coupon-price .price {
+    margin-left: 10px;
+    margin-top: 5px;
+    font-family: arial;
+    color: #fff;
+}
+
+.user-center .uc-coupons .coupons-list .item .coupon-type .coupon-price .price .big {
+    font-size: 24px;
+}
+
+.user-center .uc-coupons .coupons-list .item .coupon-type .coupon-price .limit {
+    margin-left: 10px;
+    margin-top: 10px;
+    font-family: arial;
+}
+
+.user-center .uc-coupons .coupons-list .item .coupon-type .coupon-time {
+    margin: 5px 0 5px 10px;
+    font-family: arial;
+    opacity: 0.7;
+}
+
+.user-center .uc-coupons .coupons-list .item .coupon-info {
+    padding: 5px 15px;
+    position: relative;
+}
+
+.user-center .uc-coupons .coupons-list .item .coupon-info::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 3px;
+    background: url(../images/icons.png) no-repeat;
+    background-position: 0 -783px;
+    content: " ";
+    z-index: 3;
+}
+
+.user-center .uc-coupons .coupons-list .item .coupon-info .range-item {
+    margin-top: 10px;
+    color: #999;
+    display: flex;
+}
+
+.user-center .uc-coupons .coupons-list .item .coupon-info .range-item .label {
+    color: #000;
+    min-width: 48px;
+}
+.user-center .uc-coupons .coupons-list .item .coupon-info .range-item .range {
+    width: 100%;
+    flex-grow: 1;
+    word-break: break-all;
+}
+
+.user-center .uc-coupons .coupons-list .item .coupon-info .range-item .text {
+    flex: 1;
+}
+
+.user-center .uc-coupons .coupons-list .item .coupon-info .coupon-btn {
+    display: block;
+    text-align: center;
+    width: 100px;
+    border: 1px solid #e1251b;
+    color: #e1251b;
+    padding: 5px 0;
+    border-radius: 30px;
+    margin: 20px auto 15px;
+}
+
+.user-center .uc-coupons .coupons-list .item .coupon-info .coupon-btn:hover {
+    background: #e1251b;
+    color: #fff;
+}
+
+.user-center .uc-coupons .coupons-list .item.coupon-used .coupon-type,
+.user-center .uc-coupons .coupons-list .item.coupon-over .coupon-type {
+    background: #ccc;
+}
+
+.user-center .uc-coupons .coupons-list .item.coupon-used .coupon-info::before,
+.user-center .uc-coupons .coupons-list .item.coupon-over .coupon-info::before {
+    background-position: 0 -791px;
+}
+
+.user-center .uc-coupons .coupons-list .item.coupon-used .coupon-btn,
+.user-center .uc-coupons .coupons-list .item.coupon-over .coupon-btn {
+    display: none;
+}
+
+.user-center .uc-coupons .coupons-list .item.coupon-used::after,
+.user-center .uc-coupons .coupons-list .item.coupon-over::after {
+    position: absolute;
+    bottom: 15px;
+    right: 15px;
+    display: block;
+    width: 60px;
+    height: 60px;
+    background: url(../images/icons.png) no-repeat;
+    content: " ";
+    z-index: 3;
+}
+
+.user-center .uc-coupons .coupons-list .item.coupon-used::after {
+    background-position: -65px -799px;
+}
+
+.user-center .uc-coupons .coupons-list .item.coupon-over::after {
+    background-position: 0 -799px;
+}
+
+/* 英文 */
+.user-center .uc-coupons .coupons-list .item.coupon-used-en .coupon-type,
+.user-center .uc-coupons .coupons-list .item.coupon-over-en .coupon-type {
+    background: #ccc;
+}
+
+.user-center .uc-coupons .coupons-list .item.coupon-used-en .coupon-info::before,
+.user-center .uc-coupons .coupons-list .item.coupon-over-en .coupon-info::before {
+    background-position: 0 -791px;
+}
+
+.user-center .uc-coupons .coupons-list .item.coupon-used-en .coupon-btn,
+.user-center .uc-coupons .coupons-list .item.coupon-over-en .coupon-btn {
+    display: none;
+}
+
+/* .user-center .uc-coupons .coupons-list .item.coupon-used-en::after,
+.user-center .uc-coupons .coupons-list .item.coupon-over-en::after {
+    position: absolute;
+    bottom: 15px;
+    right: 15px;
+    display: block;
+    width: 60px;
+    height: 60px;
+    background: url(../images/icons.png) no-repeat;
+    content: " ";
+    z-index: 3;
+} */
+
+.user-center .uc-coupons .coupons-list .item.coupon-used-en::after {
+    position: absolute;
+    bottom: 1px;
+    right: 15px;
+    display: block;
+    width: 60px;
+    height: 60px;
+    background: url(../images/coupon-used-en.png) no-repeat;
+    content: " ";
+    z-index: 3;
+}
+
+.user-center .uc-coupons .coupons-list .item.coupon-over-en::after {
+    position: absolute;
+    bottom: 1px;
+    right: 15px;
+    display: block;
+    width: 60px;
+    height: 60px;
+    background: url(../images/coupon-ot-en.png) no-repeat;
+    content: " ";
+    z-index: 3;
+}
+
+/* 个人中心-优惠券 end */

assets/css/uc-edit.css

@@ -0,0 +1,227 @@
+/* 个人中心-编辑 */
+
+.user-center .con-box .box-tit {
+  padding: 0 15px;
+  background: #f9f9f9;
+  font-size: 14px;
+  font-weight: 600;
+  border: 1px solid #eee;
+  border-bottom: 0;
+  height: 36px;
+  line-height: 36px;
+}
+
+.user-center .box-content {
+  border: 1px solid #eee;
+  border-top: 0;
+  padding: 30px 80px 20px;
+}
+
+.user-center .box-content .item {
+  margin-bottom: 30px;
+  display: flex;
+  align-items: center;
+}
+
+.user-center .box-content .item .tit {
+  width: 80px;
+  text-align: right;
+  margin-right: 30px;
+}
+
+.user-center .en .item .tit {
+  width: 140px;
+}
+
+.user-center .box-content .item .tit .asterisk {
+  color: #e1251b;
+  margin-right: 5px;
+}
+
+.user-center .box-content .validcode-box .code-int-box {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.user-center .box-content .item .validcode-box {
+  width: 300px;
+  height: 30px;
+  font-size: 12px;
+}
+
+.code-int {
+  width: 200px;
+  padding: 0 10px;
+  height: 30px;
+  font-size: 12px;
+  border: 1px solid #eee;
+}
+
+.send-code {
+  width: 100px;
+  display: inline-block;
+  padding: 8px 0;
+  border: 1px solid #eee;
+  vertical-align: top;
+  background: #f9f9f9;
+  margin-left: 10px;
+  text-align: center;
+  color: #666;
+  cursor: pointer;
+}
+
+.user-center .box-content .item .text {
+  border: 1px solid #eee;
+  width: 300px;
+  padding: 0 10px;
+  height: 30px;
+  font-size: 12px;
+  box-sizing: border-box;
+}
+
+.user-center .en .item .text {
+  width: 340px;
+}
+
+.user-center .box-content .item.error .text {
+  border-color: #e1251b;
+}
+
+.user-center .box-content .item .error-text {
+  color: #e1251b;
+  margin-left: 10px;
+  padding-left: 19px;
+  position: relative;
+  height: 14px;
+  line-height: 14px;
+  /* display: none; */
+}
+
+.user-center .box-content .item.error .error-text {
+  display: block;
+}
+
+.user-center .box-content .item .error-text::before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: block;
+  width: 14px;
+  height: 14px;
+  content: ' ';
+  font-size: 0;
+  background: url(../images/icons.png) no-repeat -77px -517px;
+}
+
+.user-center .box-content .item .area {
+  border: 1px solid #eee;
+  height: 30px;
+  line-height: 30px;
+  width: 116px;
+  margin-right: 12px;
+  font-size: 12px;
+  padding: 0 20px 0 10px;
+  position: relative;
+}
+
+.user-center .box-content .item .area::before {
+  position: absolute;
+  right: 10px;
+  top: 12px;
+  display: block;
+  width: 0;
+  height: 0;
+  content: ' ';
+  font-size: 0;
+  border: 5px solid transparent;
+  border-top: 5px solid #bcbcbc;
+}
+
+.user-center .box-content .item .shop-description {
+  border: 1px solid #eee;
+  height: 80px;
+  width: 446px;
+  padding: 8px 10px;
+  font-size: 12px;
+  resize: none;
+}
+
+.user-center .box-content .item .img {
+  margin-right: 20px;
+}
+
+.user-center .box-content .item .img .file-img {
+  display: block;
+  border: 1px solid #eee;
+  width: 100px;
+  height: 100px;
+  text-align: center;
+  line-height: 100px;
+  font-size: 24px;
+  font-family: arial;
+  color: #ccc;
+}
+
+.user-center .box-content .item .img .file-img img {
+  width: 100%;
+  height: 100%;
+  vertical-align: top;
+}
+
+.user-center .box-content .item .img .img-text {
+  text-align: center;
+  display: block;
+  line-height: 14px;
+  margin-top: 5px;
+  color: #999;
+}
+
+.user-center .box-content .item .btn {
+  padding: 5px 15px;
+  background: #e1251b;
+  color: #fff;
+  border-radius: 2px;
+}
+
+.user-center .box-content .item .btn:hover {
+  opacity: 0.9;
+}
+
+.user-center .box-content .item .user-img {
+  width: 75px;
+  height: 75px;
+  border: 1px solid #eee;
+  border-radius: 50%;
+  overflow: hidden;
+  font-size: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.user-center .box-content .item .user-img img {
+  max-width: 100%;
+  max-height: 100%;
+  vertical-align: middle;
+}
+
+.user-center .box-content .item .edit-img {
+  margin-left: 20px;
+  color: #999;
+}
+
+.user-center .box-content .item .edit-img:hover {
+  color: #e1251b;
+}
+
+.tips,
+.tips a {
+  color: #999;
+  font-size: 14px;
+}
+.tips a:hover {
+  color: #02a1e9;
+}
+
+/* 个人中心-编辑 end */

assets/css/uc-footprint.css

@@ -0,0 +1,170 @@
+/* 我的足迹 */
+.footprint-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 44px;
+  background: #f8f8f8;
+  padding: 0 20px;
+}
+.footprint-head .head-tit {
+  font-size: 14px;
+  color: #333;
+  font-weight: bold;
+}
+.footprint-head .batch-btn {
+  font-size: 12px;
+  color: #666;
+}
+.footprint-head .batch-btn:hover {
+  color: #e1251b;
+  cursor: pointer;
+}
+.footprint-head .action-btn-box {
+  display: flex;
+  align-items: center;
+  color: #666;
+  cursor: pointer;
+}
+.footprint-head .action-btn-box .batch-box .check:hover .checkbox::before{
+  border-color: #e1251b;
+}
+.footprint-head .action-btn-box .batch-box .check:hover,
+.footprint-head .action-btn-box .batch-box .delete-collection:hover,
+.footprint-head .action-btn-box .cancel-btn:hover {
+  color: #e1251b;
+}
+
+.footprint-head .action-btn-box .batch-box .delete-collection {
+  padding: 0 10px;
+}
+
+.user-center .uc-collection .time {
+  font-size: 20px;
+  margin-top: 14px;
+  font-weight: 600;
+}
+
+.user-center .uc-collection .goods-list .list-con .item {
+  display: inline-block;
+  width: 244px;
+  height: auto;
+  border: 1px solid #eee;
+  box-sizing: border-box;
+  margin-right: 16px;
+  margin-top: 12px;
+}
+
+.user-center .uc-collection .goods-list .list-con .item:nth-child(4n) {
+  margin-right: 0;
+}
+
+.user-center .uc-collection .goods-list .list-con .item .goods-img {
+  width: 242px;
+  height: 242px;
+  line-height: 242px;
+  margin: 0;
+}
+
+.user-center .uc-collection .goods-list .list-con .item .goods-msg {
+  padding-bottom: 20px;
+}
+
+.user-center .uc-collection .goods-action {
+  text-align: center;
+  line-height: 35px;
+  background: #f9f9f9;
+  border-top: 1px solid #eee;
+  display: flex;
+}
+
+.user-center .uc-collection .goods-action .action-a {
+  color: #666;
+  text-align: center;
+  width: 50%;
+}
+
+.user-center .uc-collection .goods-action .action-a.a1 {
+  border-right: 1px solid #eee;
+}
+
+.user-center .uc-collection .goods-action .action-a .icon {
+  display: inline-block;
+  vertical-align: top;
+  background: url(../images/icons.png) no-repeat;
+  margin-right: 5px;
+}
+
+.user-center .uc-collection .goods-action .action-a.a1 .icon {
+  width: 17px;
+  height: 15px;
+  margin-top: 10px;
+  background-position: 0 -38px;
+}
+
+.user-center .uc-collection .goods-action .action-a.a2 .icon {
+  width: 14px;
+  height: 14px;
+  margin-top: 10px;
+  background-position: 0 -415px;
+}
+
+.user-center .uc-collection .goods-action .action-a:hover {
+  color: #e1251b;
+}
+
+.user-center .uc-collection .goods-action .action-a.a1:hover .icon {
+  background-position: -22px -38px;
+}
+
+.user-center .uc-collection .goods-action .action-a.a2:hover .icon {
+  background-position: -19px -415px;
+}
+
+.user-center .uc-collection .item-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.1);
+  display: none;
+}
+.user-center .uc-collection .batch-edit .item-mask {
+  display: block;
+}
+.user-center .uc-collection .goods-list .list-con .item.batch-edit:hover {
+  opacity: 1;
+  box-shadow: none;
+  border-color: #e1251b;
+}
+.user-center .uc-collection .goods-list .list-con .item.checked {
+  border-color: #e1251b;
+}
+.user-center .uc-collection .item-mask .icon {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 30px;
+  height: 30px;
+  background: rgba(0,0,0,0.1);
+}
+.user-center .uc-collection .goods-list .list-con .item.checked .item-mask .icon {
+  background: #e1251b;
+}
+.user-center .uc-collection .item-mask .icon::before {
+  position: absolute;
+  top: 9px;
+  left: 7px;
+  display: block;
+  width: 16px;
+  height: 12px;
+  content: " ";
+  background: url(../images/icons.png) no-repeat 0 -746px;
+}
+
+/* 页码 */
+.user-center .uc-collection .pages {
+  margin-top: 20px;
+  margin-right: 10px;
+}

assets/css/uc-home.css

@@ -0,0 +1,350 @@
+
+/* 个人中心首页 */
+
+/* 用户信息 */
+
+.user-center .home .my-info {
+    padding: 30px;
+    border: 1px solid #eee;
+    display: flex;
+}
+
+.user-center .home .my-info .info-box {
+    padding-right: 30px;
+    border-right: 1px solid #eee;
+    display: flex;
+    align-items: center;
+}
+
+.user-center .home .my-info .info-box .portrait-box {
+    position: relative;
+    width: 75px;
+    height: 75px;
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 0 5px rgba(0,0,0,.05);
+    overflow: hidden;
+    background: #fff;
+}
+
+.user-center .home .my-info .info-box .portrait-box .portrait {
+    width: 100%;
+    height: 100%;
+    line-height: 75px;
+    text-align: center;
+    font-size: 0;
+}
+
+.user-center .home .my-info .info-box .portrait-box .portrait img {
+    max-width: 100%;
+    vertical-align: middle;
+}
+
+.user-center .home .my-info .info-box .portrait-box .edit {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.5);
+    color: #fff;
+    text-align: center;
+    line-height: 75px;
+    display: none;
+}
+
+.user-center .home .my-info .info-box .portrait-box:hover .edit {
+    display: block;
+}
+
+.user-center .home .my-info .info-box .name-box {
+    margin-left: 20px;
+}
+
+.user-center .home .my-info .info-box .name-box .name {
+    margin-bottom: 12px;
+    display: flex;
+    width: 150px;
+    font-weight: 600;
+  }
+  .user-center .home .my-info .info-box .name-box .name .text{
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 115px;
+    font-size: 16px;
+  
+  }
+  .user-center .home .my-info .info-box .name-box .name .vip{
+    margin-left: 5px;
+    width: 28px;
+  }
+  
+  .user-center .home .my-info .info-box .name-box .name .vip img{
+    width: 28px;
+    height: 14px;
+    vertical-align: middle ;
+  }
+
+.user-center .home .my-info .info-box .name-box .level-box {
+    display: flex;
+    align-items: center;
+    margin-top: 5px;
+    line-height: 16px;
+}
+
+.user-center .home .my-info .info-box .name-box .level-box .text {
+    color: #999;
+}
+
+.user-center .home .my-info .info-box .name-box .level {
+    flex: 1;
+    line-height: 16px;
+    padding-left: 19px;
+    position: relative;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.user-center .home .my-info .info-box .name-box .level::before {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: block;
+    width: 14px;
+    height: 14px;
+    content: " ";
+    background: url(../images/icons.png) no-repeat;
+}
+
+.user-center .home .my-info .info-box .name-box .level.v1::before {
+    background-position: 0 -614px;
+}
+
+.user-center .home .my-info .info-box .name-box .level.v2::before {
+    background-position: -19px -614px;
+}
+
+.user-center .home .my-info .info-box .name-box .level.v3::before {
+    background-position: -38px -614px;
+}
+
+.user-center .home .my-info .info-box .name-box .number {
+    font-family: arial;
+}
+
+.user-center .home .my-info .order-tab {
+    flex: 1;
+    display: flex;
+    margin-left: 30px;
+    text-align: center;
+}
+
+.user-center .home .my-info .order-tab .item {
+    flex: 1;
+    cursor: pointer;
+}
+
+.user-center .home .my-info .order-tab .item .img {
+    width: 50px;
+    height: 50px;
+    margin: auto;
+    background: url(../images/icons.png) no-repeat;
+}
+
+.user-center .home .my-info .order-tab .item .img.unpaid {
+    background-position: 0 -559px;
+}
+
+.user-center .home .my-info .order-tab .item .img.no-shipped {
+    background-position: -55px -559px;
+}
+
+.user-center .home .my-info .order-tab .item .img.shipped {
+    background-position: -110px -559px;
+}
+
+.user-center .home .my-info .order-tab .item .img.no-reviewed {
+    background-position: -165px -559px;
+}
+
+.user-center .home .my-info .order-tab .item .text {
+    margin-top: 5px;
+    height: 20px;
+    line-height: 20px;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;
+}
+
+.user-center .home .my-info .order-tab .item:hover .text {
+    color: #e1251b;
+}
+
+.user-center .home .my-info .order-tab .item .text .number {
+    font-weight: 700;
+    font-family: verdana;
+    margin-left: 5px;
+    color: #e1251b;
+}
+
+/* 用户信息 end */
+
+.user-center .home .buy-member {
+    height: 120px;
+    background: url(../images/uc-adv.jpg) no-repeat;
+    background-size: 100% 100%;
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.user-center .home .buy-member .text {
+    margin-left: 320px;
+    color: #fff;
+}
+
+.user-center .home .buy-member .text .big {
+    font-size: 24px;
+    width: 460px;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+}
+
+.user-center .home .buy-member .text .small {
+    margin-top: 10px;
+    font-family: arial;
+}
+
+.user-center .home .buy-member .btn {
+    margin-left: 28px;
+    width: 120px;
+    height: 36px;
+    line-height: 36px;
+    background-size: 100% 100%;
+    font-size: 14px;
+    color: #150f0b;
+    text-align: center;
+    letter-spacing: 1px;
+    font-weight: 600;
+}
+
+.user-center .home .en .btn {
+    margin-left: 0px;
+}
+
+.user-center .home .order-head {
+    padding: 10px 15px;
+    background: #f9f9f9;
+    border: 1px solid #eee;
+    display: flex;
+    margin-top: 20px;
+}
+
+.user-center .home .order-head .text {
+    flex: 1;
+    font-weight: 600;
+}
+
+.user-center .home .order-head .all {
+    color: #999;
+}
+
+.user-center .home .order-head .all:hover {
+    color: #e1251b;
+}
+
+.user-center .home .order-list .order-table {
+    border: 1px solid #eee;
+    border-top: 0;
+}
+
+.user-center .home .order-list .order-table .box {
+    border: 0;
+}
+
+.user-center .home .order-list .order-table .box td {
+    border: 0;
+    padding: 10px 0;
+    border-top: 1px dotted #ddd;
+}
+
+.user-center .home .order-list .order-table .box tr:first-child td {
+    border-top: 0;
+}
+
+.user-center .order-list .order-table .box .multi-good-info {
+    display: block !important;
+    max-width: 600px;
+    white-space: nowrap;
+    overflow-x: auto;
+}
+.user-center .order-list .order-table .box .multi-good-info.hide-scrollbar {
+    -ms-overflow-style: none;
+}
+.user-center .order-list .order-table .box .multi-good-info.hide-scrollbar::-webkit-scrollbar {
+    display: none; 
+}
+.user-center .order-list .order-table .box .multi-good-info .img {
+    margin-right: 10px;
+    display: inline-block;
+}
+
+.user-center .order-list .order-table .box .goods-info .img {
+    position: relative;
+    width: 60px;
+    height: 60px;
+  }
+  
+.user-center .order-list .order-table .box .goods-info .nums-con {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    background-color: rgba(0,0,0,.3);
+    color: #fff;
+    text-align: center;
+    width: 100%;
+    height: 20px;
+    line-height: 20px;
+    z-index: 999;
+    font-size: 12px;
+}
+
+.user-center .home .guess-like .guess-like-tit {
+    height: 37px;
+    line-height: 37px;
+    padding: 0 5px 0 15px;
+    background: #f9f9f9;
+    border: 1px solid #eee;
+}
+
+.user-center .home .guess-like .guess-like-tit .text {
+    font-size: 12px;
+}
+
+.user-center .home .guess-like .guess-like-tit .swiper-controls {
+    margin-right: 0;
+}
+
+.user-center .home .guess-like .list-con {
+    padding: 21px;
+    border: 1px solid #eee;
+    border-top: 0;
+}
+
+.user-center .home .guess-like .list-con .item {
+    width: 244px;
+}
+
+.user-center .home .guess-like .list-con .item .goods-img {
+    width: 244px;
+    height: 244px;
+    line-height: 244px;
+}
+
+/* 个人中心首页 end */

assets/css/uc-integral.css

@@ -0,0 +1,124 @@
+
+/* 个人中心-我的积分 */
+
+/* 积分明细 */
+
+.user-center .integral {
+    min-height: 55vh;
+}
+.user-center .integral .uc-serach {
+    padding: 5px 0;
+    color: #777;
+}
+
+.user-center .integral .uc-serach .left .current-integral {
+    margin-left: 10px;
+    margin-right: 10px;
+    min-width: 130px;
+    max-width: 300px;
+    white-space: nowrap;
+}
+
+.user-center .integral .uc-serach .left .current-integral .number,
+.user-center .integral .uc-serach .left .expired-integral .number {
+    color: #e1251b;
+    font-family: verdana;
+    font-size: 18px;
+}
+
+.user-center .integral .uc-serach .left .expired-integral .number,
+.user-center .integral .uc-serach .left .expired-integral .integral-des {
+    color: #999;
+}
+
+.user-center .integral .uc-serach .right .search {
+    border-radius: 2px;
+}
+
+.user-center .integral .integral-detail .box {
+    width: 100%;
+    text-align: center;
+}
+
+.user-center .integral .integral-detail .box th {
+    background: #f9f9f9;
+    padding: 10px 0;
+    text-align: center;
+}
+
+.user-center .integral .integral-detail .box td {
+    padding: 13px 0;
+    color: #999;
+    border-bottom: 1px solid #eee;
+}
+
+.user-center .integral .integral-detail .box td .integral-change {
+    font-family: arial;
+    font-size: 14px;
+}
+
+.user-center .integral .integral-detail .box td .add {
+    color: #e1251b;
+}
+
+.user-center .integral .integral-detail .box td .time {
+    font-family: arial;
+    color: #999;
+}
+
+/* 积分明细 end */
+
+/* 积分常见问题 */
+
+.detaile-qa{
+    border: 1px solid #eee;
+}
+.integral-qa-tit{
+    font-weight: bold;
+    font-family: arial;
+    padding: 10px 15px;
+    border-bottom: 1px solid #eee;
+    background: #f9f9f9;
+}
+.integral-qa-content{
+    padding: 5px 15px;
+}
+
+/* 积分常见问题 end */
+
+/* 兑换商品 */
+
+.user-center .integral .integral-exchange .list-con {
+    margin-top: -20px;
+}
+
+.user-center .integral .integral-exchange .list-con .item {
+    width: 248px;
+}
+
+.user-center .integral .integral-exchange .list-con .item .goods-img {
+    width: 255px;
+    height: 255px;
+    line-height: 255px;
+}
+
+.user-center .integral .integral-exchange .list-con .item .goods-msg .goods-price .integral-price {
+    color: #e1251b;
+    font-family: arial;
+}
+
+.user-center .integral .integral-exchange .list-con .item .goods-msg .goods-price .add {
+    margin: 0 5px;
+    color: #e1251b;
+    font-family: arial;
+}
+
+.user-center .integral .integral-exchange .list-con .item .goods-msg .old-price {
+    margin-top: 3px;
+    color: #999;
+    text-decoration: line-through;
+}
+
+/* 兑换商品 end */
+
+/* 个人中心-我的积分 end */

assets/css/uc-order.css

@@ -0,0 +1,47 @@
+
+/* 个人中心-我的订单 */
+
+.user-center .uc-order .uc-nav .recycle-bin {
+    position: relative;
+    display: block;
+    line-height: 16px;
+    font-size: 12px;
+    color: #999;
+    cursor: pointer;
+    padding-left: 20px;
+}
+
+.user-center .uc-order .uc-nav .recycle-bin::before {
+    position: absolute;
+    left: 0;
+    top: 1px;
+    content: " ";
+    display: block;
+    width: 14px;
+    height: 14px;
+    background: url(../images/icons.png) no-repeat 0 -633px;
+}
+
+.user-center .uc-order .uc-nav .recycle-bin:hover {
+    color: #e1251b;
+}
+
+.user-center .uc-order .uc-nav .recycle-bin:hover::before {
+    background-position: -19px -633px;
+}
+
+/* 个人中心-我的订单 end */
+.btn-im{
+    float: left;
+    width: 16px;
+    height: 16px;
+    margin: 0 5px 3px 8px;
+    overflow: hidden;
+    background: url('../images/chat/sprite-im.png') no-repeat;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+  /* 客服按钮 */
+  .btn-im:hover {
+    background: url('../images/chat/sprite-im-hover.png') no-repeat;
+  }

assets/css/uc-password.css

@@ -0,0 +1,99 @@
+
+/* 个人中心-修改密码 */
+
+.user-center .box-content.password {
+    min-height: 350px;
+    padding-top: 70px;
+    padding-left: 250px;
+}
+.user-center .en.password {
+    padding-left: 130px;
+}
+
+.user-center .password .phone-number {
+    font-size: 18px;
+    font-family: arial;
+}
+
+.user-center .box-content.password .item {
+    margin-top: 40px;
+}
+
+.user-center .box-content.password .item .text {
+    width: 240px;
+}
+
+.user-center .box-content.password .item .get-code {
+    display: inline-block;
+    line-height: 30px;
+    border: 1px solid #eee;
+    vertical-align: top;
+    padding: 0 15px;
+    background: #f9f9f9;
+    margin-left: 10px;
+    color: #666;
+}
+
+.user-center .box-content.password .item .get-code:hover {
+    color: #000;
+}
+
+.user-center .box-content.password .item.des-box {
+    margin-top: -20px;
+}
+
+.user-center .box-content.password .item .des {
+    color: #999;
+}
+
+.user-center .box-content.password .item .des .time {
+    color: #e1251b;
+    font-family: arial;
+    margin: 0 3px;
+}
+
+.user-center .box-content.password .item .tip-box {
+    margin-left: 60px;
+    text-align: center;
+    margin-top: 30px;
+}
+
+.user-center .box-content.password .item .tip-box .tip {
+    font-size: 18px;
+    padding-left: 42px;
+    height: 32px;
+    line-height: 32px;
+    position: relative;
+}
+
+.user-center .box-content.password .item .tip-box .tip::before {
+    position: absolute;
+    left: 15px;
+    top: 0;
+    display: block;
+    width: 32px;
+    height: 32px;
+    content: " ";
+    font-size: 0;
+    background: url(../images/icons.png) no-repeat 0 -476px;
+}
+
+.user-center .box-content.password .item .tip-box .tip-des {
+    color: #999;
+    margin-top: 10px;
+}
+
+.user-center .box-content.password .item .tip-box .tip-btn {
+    display: inline-block;
+    padding: 5px 15px;
+    background: #e1251b;
+    color: #fff;
+    border-radius: 2px;
+    margin-top: 20px;
+}
+
+.user-center .box-content.password .item .tip-box .tip-btn:hover {
+    opacity: 0.9;
+}
+
+/* 个人中心-修改密码 end */

assets/css/uc-return.css

@@ -0,0 +1,48 @@
+
+/* 个人中心-我的订单 */
+
+.user-center .order-list .order-table .box .box-hd .return-number {
+    float: left;
+    margin-left: 40px;
+    color: #999;
+    text-align: left;
+}
+
+.user-center .order-list .order-table .box .box-hd .return-number .num {
+    font-family: arial;
+    color: #000;
+}
+
+.user-center .order-list .order-table .box .box-hd .order-number .num:hover {
+    color: #000;
+}
+
+.user-center .order-list .order-table .box .box-tr .price {
+    color: #000;
+    justify-content: center;
+}
+
+.user-center .order-list .order-table .box .box-tr .apply-time {
+    font-family: arial;
+}
+
+.user-center .order-list .order-table .box td {
+    border: 1px solid #eee;
+}
+
+/* 个人中心-我的订单 end */
+
+/* 客服小图标 */
+.btn-im{
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin: 0 5px 3px 8px;
+    overflow: hidden;
+    background: url('../images/chat/sprite-im.png') no-repeat;
+    vertical-align: middle;
+  }
+  /* 客服按钮 */
+  .btn-im:hover {
+    background: url('../images/chat/sprite-im-hover.png') no-repeat;
+  }

assets/css/user-center.css

@@ -0,0 +1,737 @@
+/* 个人中心 */
+
+.user-center .flex-box {
+  display: flex;
+  margin-top: 30px;
+  /* min-height: 496px; */
+}
+
+.user-center .foot {
+  margin-top: 30px;
+}
+
+.to-balance {
+  cursor: pointer;
+}
+
+.user-center .flex-box .side-nav-zh {
+  width: 120px;
+}
+
+.user-center .flex-box .side-nav-en {
+  width: 160px;
+}
+
+.user-center .flex-box .side-nav .item {
+  padding-bottom: 15px;
+}
+
+.user-center .flex-box .side-nav .item .tit {
+  height: 28px;
+  line-height: 28px;
+  color: #333;
+  font-weight: 700;
+}
+
+.user-center .flex-box .side-nav .item .item-a {
+  display: block;
+  height: 24px;
+  line-height: 24px;
+  color: #999;
+}
+
+.user-center .flex-box .side-nav .item .item-a .number {
+  color: #e1251b;
+  font-family: arial;
+  margin-left: 2px;
+}
+
+.user-center .flex-box .side-nav .item .item-a:hover {
+  color: #e1251b;
+}
+
+.user-center .flex-box .side-nav .item .item-a.active {
+  color: #e1251b;
+  font-weight: 600;
+}
+
+.user-center .flex-box .con-box {
+  flex: 1;
+  padding-left: 6px;
+}
+
+.user-center .flex-box .con-box.apply-list .goods-info .sku {
+  display: inline-block;
+  margin-top: 5px;
+  color: #999;
+}
+
+/* 订单列表 */
+
+.user-center .order-list .order-table {
+  margin-bottom: 20px;
+}
+
+.user-center .order-list .order-table .box {
+  border: 1px solid #eee;
+  width: 100%;
+}
+
+.user-center .order-list .order-table .box td {
+  padding: 15px 0;
+  border-top: 1px solid #eee;
+  text-align: center;
+}
+
+.user-center .order-list .order-table .box .bl {
+  border-left: 1px solid #eee;
+}
+
+.user-center .order-list .order-table .box .box-tit th {
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  background: #f9f9f9;
+  font-weight: 400;
+  border: 1px solid #f9f9f9;
+}
+
+.user-center .order-list .order-table .box .box-space td {
+  border-left: 1px solid #fff;
+  border-right: 1px solid #fff;
+  padding: 0;
+  height: 14px;
+}
+
+.user-center .order-list .order-table .box .pl {
+  padding-left: 50px;
+  text-align: left !important;
+}
+
+.user-center .order-list .order-table .box .pr {
+  padding-right: 20px;
+}
+
+.user-center .order-list .order-table .box .box-hd {
+  background: #f9f9f9;
+}
+
+.user-center .order-list .order-table .box .box-hd td {
+  background: #f9f9f9;
+  height: 32px;
+  padding: 0 15px;
+  line-height: 18px;
+}
+
+.user-center .order-list .order-table .box .box-hd .time {
+  float: left;
+  margin-right: 40px;
+  font-family: arial;
+  color: #999;
+}
+
+.user-center .order-list .order-table .box .box-hd .order-number {
+  color: #999;
+  float: left;
+  text-align: left;
+}
+
+.user-center .order-list .order-table .box .box-hd .order-number .num {
+  font-family: arial;
+  color: #000;
+  vertical-align: top;
+  display: inline-block;
+}
+
+.user-center .order-list .order-table .box .box-hd .shop {
+  display: block;
+  float: left;
+  margin-left: 40px;
+  cursor: pointer;
+}
+
+.user-center .order-list .order-table .box .box-hd .shop .shop-icon {
+  width: 14px;
+  height: 14px;
+  vertical-align: top;
+  display: inline-block;
+  margin-top: 2px;
+  margin-right: 5px;
+  background: url(../images/icons.png) no-repeat -28px -458px;
+}
+
+.user-center .order-list .order-table .box .box-hd .shop:hover .shop-icon {
+  background-position: -9px -458px;
+}
+
+.user-center .order-list .order-table .box .box-hd .shop:hover {
+  color: #e1251b;
+}
+
+.user-center .order-list .order-table .box .box-hd .del {
+  float: right;
+  width: 14px;
+  height: 14px;
+  margin-top: 3px;
+  background: url(../images/icons.png) no-repeat 0 -415px;
+  cursor: pointer;
+}
+
+.user-center .order-list .order-table .box .box-hd .del:hover {
+  background-position: -19px -415px;
+}
+
+.user-center .order-list .order-table .box .box-tr .goods-info {
+  text-align: left;
+  display: flex;
+  padding-left: 15px;
+}
+
+.user-center .order-list .order-table .box .box-tr .goods-info .img {
+  width: 70px;
+  height: 70px;
+  font-size: 0;
+}
+
+.user-center .order-list .order-table .box .box-tr .goods-info .img img {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.user-center .order-list .order-table .box .box-tr .goods-info .name-sku {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+  margin: 0 15px;
+}
+
+.user-center .order-list .order-table .box .box-tr .goods-info .name-sku .name {
+  max-height: 36px;
+  line-height: 18px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.user-center .order-list .order-table .box .box-tr .goods-info .name-sku .sku {
+  display: flex;
+  color: #999;
+  justify-content: space-between;
+}
+
+.user-center .order-list .order-table .box .box-tr .goods-info .name-sku .name:hover {
+  color: #e1251b;
+  cursor: pointer;
+}
+.user-center .order-list .order-table .box .box-tr .goods-info .name-sku .sku-info-con {
+  display: flex;
+  align-items: center;
+}
+
+.user-center .order-list .order-table .box .box-tr .goods-info .name-sku .sku-info-con .order-sgin {
+  display: inline-block;
+  padding: 3px 6px;
+  background-color: #e1251b;
+  color: #fff;
+  margin-top: 6px;
+  font-size: 12px;
+  border-radius: 2px;
+}
+
+.user-center .order-list .order-table .box .box-tr .goods-info .name-sku .sku-info-con .order-sgin.prod-sgin {
+  margin-top: 0;
+  padding: 1px 3px;
+  border: 1px solid #e1251b;
+  color: #e1251b;
+  background: #fff;
+}
+
+.user-center .order-list .order-table .box .box-tr .goods-info .name-sku .sku-info-con .sku {
+  max-width: 60%;
+  margin-right: 10px;
+  color: #999;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* .user-center .order-list .order-table .box .box-tr .goods-return {
+    float: left;
+    line-height: 18px;
+    color: #999;
+    text-align: right;
+    width: 60px;
+    padding-right: 20px;
+}
+
+.user-center .order-list .order-table .box .box-tr .goods-return:hover {
+    color: #e1251b;
+} */
+
+.user-center .order-list .order-table .box .box-tr .goods-number,
+.user-center .order-list .order-table .box .box-tr .amount,
+.user-center .order-list .order-table .box .box-tr .status,
+.user-center .order-list .order-table .box .box-tr .action {
+  line-height: 20px;
+  color: #999;
+}
+
+.user-center .order-list .order-table .box .box-tr .amount .price {
+  display: block;
+  color: #000;
+}
+
+.user-center .order-list .order-table .box .box-tr .status .no-finish {
+  color: #e1251b;
+}
+
+.user-center .order-list .order-table .box .box-tr .status .order-detail {
+  color: #000;
+}
+
+.user-center .order-list .order-table .box .box-tr .status .order-detail:hover {
+  color: #e1251b;
+}
+
+.user-center .order-list .order-table .box .box-tr .action .action-btn {
+  display: block;
+  background: #fff;
+  border-radius: 2px;
+  width: 96px;
+  /* height: 18px; */
+  line-height: 18px;
+  padding: 2px 0;
+  margin: 3px auto;
+  text-align: center;
+}
+
+.user-center .order-list .order-table .box .box-tr .action .action-btn.default {
+  background: #f9f9f9;
+  border: 1px solid #eee;
+  color: #000;
+}
+
+.user-center
+  .order-list
+  .order-table
+  .box
+  .box-tr
+  .action
+  .action-btn.default:hover {
+  background: #fff;
+  color: #e1251b;
+  border: 1px solid #e1251b;
+}
+
+.user-center .order-list .order-table .box .box-tr .action .action-btn.active {
+  color: #e1251b;
+  border: 1px solid #e1251b;
+}
+
+.user-center
+  .order-list
+  .order-table
+  .box
+  .box-tr
+  .action
+  .action-btn.active:hover {
+  background: #e1251b;
+  color: #fff;
+}
+
+.user-center .order-list .order-table .box .box-tr .action .action-a {
+  color: #000;
+}
+
+.user-center .order-list .order-table .box .box-tr .action .action-a:hover {
+  color: #e1251b;
+}
+
+/* 订单列表 end */
+
+/* 导航 */
+
+.user-center .uc-nav {
+  border-bottom: 1px solid #eee;
+  margin: 15px 0;
+  display: flex;
+}
+
+.user-center .uc-nav .nav-box {
+  position: relative;
+  bottom: -1px;
+  flex: 1;
+  display: flex;
+}
+
+.user-center .uc-nav .nav-box .nav-item {
+  position: relative;
+  border-bottom: 1px solid #eee;
+  cursor: pointer;
+}
+
+.user-center .uc-nav .nav-box .nav-item.active {
+  color: #e1251b;
+  border-bottom: 1px solid #e1251b;
+}
+
+.user-center .uc-nav .nav-box .nav-item:hover {
+  color: #e1251b;
+}
+
+.user-center .uc-nav .nav-box .nav-item .text {
+  display: inline-block;
+  line-height: 1;
+  padding: 0 20px 12px;
+  font-size: 14px;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  -o-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+.user-center .uc-nav .nav-box .nav-item .line {
+  background-color: #eee;
+  width: 1px;
+  height: 14px;
+  font-size: 0;
+  position: absolute;
+  top: 2px;
+  right: 0;
+}
+
+.user-center .uc-nav .nav-box .nav-item:last-child .line {
+  width: 0;
+}
+
+.user-center .uc-nav .nav-box .nav-item .number {
+  color: #e1251b;
+  margin-left: 5px;
+  font-family: arial;
+}
+
+/* 导航 end */
+
+/* 搜索 */
+
+.user-center .uc-serach {
+  margin-bottom: 15px;
+  display: flex;
+}
+
+.user-center .uc-serach .left {
+  flex: 1;
+  display: flex;
+}
+
+.user-center .uc-serach .left .select-item {
+  position: relative;
+  height: 28px;
+  z-index: 10;
+  margin-right: 10px;
+}
+
+.user-center .uc-serach .left .select-item .tit {
+  cursor: pointer;
+  display: block;
+  width: 106px;
+  border: 1px solid #eee;
+  padding: 0px 28px 0 12px;
+  line-height: 26px;
+  color: #777;
+  position: relative;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  -o-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+.user-center .uc-serach .left .select-item:hover .tit {
+  color: #e1251b;
+}
+
+.user-center .uc-serach .left .select-item .tit::after {
+  position: absolute;
+  right: 10px;
+  top: 11px;
+  width: 0;
+  height: 0;
+  content: ' ';
+  border: 5px solid transparent;
+  border-top: 5px solid #bcbcbc;
+  border-radius: 2px;
+}
+
+.user-center .uc-serach .left .select-item:hover .tit::after {
+  border-top: 5px solid #e1251b;
+}
+
+.user-center .uc-serach .left .select-item .select {
+  position: relative;
+  top: -1px;
+  left: 0;
+  border-width: 0 1px 1px;
+  border-style: solid;
+  border-color: #eee;
+  background-color: #fff;
+  line-height: 28px;
+  font-size: 12px;
+  color: #999;
+  text-align: center;
+  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
+  display: none;
+}
+
+.user-center .uc-serach .left .select-item:hover .select {
+  display: block;
+}
+
+.user-center .uc-serach .left .select-item .select .s-item {
+  display: block;
+  padding: 2px 15px;
+  cursor: pointer;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  -o-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  text-align: left;
+}
+
+.user-center .uc-serach .left .select-item .select .s-item:hover {
+  color: #e1251b;
+  background: #f9f9f9;
+}
+
+.user-center .uc-serach .left .action-btn {
+  height: 28px;
+  display: flex;
+}
+
+.user-center .uc-serach .left .action-btn .batch {
+  padding: 0 12px;
+  color: #777;
+  border: 1px solid #eee;
+  height: 26px;
+  line-height: 26px;
+  margin-right: 10px;
+}
+
+.user-center .uc-serach .left .action-btn .batch:hover {
+  color: #e1251b;
+  border-color: #e1251b;
+}
+
+.user-center .uc-serach .left .action-btn .batch-box {
+  display: none;
+  vertical-align: top;
+  line-height: 28px;
+  color: #777;
+}
+
+.user-center .uc-serach .left .action-btn.active .batch-box {
+  display: flex;
+  align-items: center;
+}
+
+.user-center .uc-serach .left .action-btn .batch-box .check {
+  margin-right: 10px;
+  cursor: pointer;
+}
+
+.user-center .uc-serach .left .action-btn .batch-box .check .checkbox {
+  margin-top: 7px;
+}
+
+.user-center .uc-serach .left .action-btn .batch-box .check .checkbox::before {
+  border-color: #aaa;
+}
+
+.user-center
+  .uc-serach
+  .left
+  .action-btn
+  .batch-box
+  .check:hover
+  .checkbox.default::before {
+  border-color: #e1251b;
+}
+
+.user-center .uc-serach .left .action-btn .batch-box .check .text {
+  margin-left: 3px;
+  -moz-transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  transition: all 0.2s;
+}
+
+.user-center .uc-serach .left .action-btn .batch-box .check:hover .text {
+  color: #e1251b;
+}
+
+.user-center .uc-serach .left .action-btn .batch-box .cancel-collection {
+  cursor: pointer;
+}
+
+.user-center .uc-serach .left .action-btn .batch-box .cancel-collection .icon {
+  display: inline-block;
+  vertical-align: top;
+  width: 14px;
+  height: 14px;
+  margin-top: 7px;
+  background: url(../images/icons.png) no-repeat 0 -415px;
+}
+
+.user-center
+  .uc-serach
+  .left
+  .action-btn
+  .batch-box
+  .cancel-collection:hover
+  .icon {
+  background-position: -19px -415px;
+}
+
+.user-center .uc-serach .left .action-btn .batch-box .cancel-collection .text {
+  margin-left: 3px;
+  -moz-transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  transition: all 0.2s;
+}
+
+.user-center
+  .uc-serach
+  .left
+  .action-btn
+  .batch-box
+  .cancel-collection:hover
+  .text {
+  color: #e1251b;
+}
+.user-center .uc-serach .right {
+  display: flex;
+  align-items: center;
+}
+
+.user-center .uc-serach .right .input {
+  width: 222px;
+  border: 1px solid #eee;
+  height: 26px;
+  line-height: 26px;
+  font-size: 12px;
+  padding: 0 5px;
+}
+
+.user-center .uc-serach .right .search {
+  padding: 0 10px;
+  height: 28px;
+  line-height: 28px;
+  color: #fff;
+  background-color: #e1251b;
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 10px;
+}
+
+.user-center .uc-serach .right .search:hover {
+  opacity: 0.8;
+}
+
+.user-center .uc-serach .right .search-value {
+  position: relative;
+  height: 28px;
+  z-index: 10;
+  margin-right: 10px;
+}
+
+.user-center .uc-serach .right .search-value .ordernum {
+  cursor: pointer;
+  display: block;
+  width: 100px;
+  border: 1px solid #eee;
+  padding: 0px 17px 0 12px;
+  line-height: 26px;
+  color: #777;
+  position: relative;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  -o-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+.user-center .uc-serach .right .search-value:hover .ordernum {
+  color: #e1251b;
+}
+
+.user-center .uc-serach .right .search-value .ordernum::after {
+  position: absolute;
+  right: 10px;
+  top: 11px;
+  width: 0;
+  height: 0;
+  content: ' ';
+  border: 5px solid transparent;
+  border-top: 5px solid #bcbcbc;
+  border-radius: 2px;
+}
+
+.user-center .uc-serach .right .search-value:hover .ordernum::after {
+  border-top: 5px solid #e1251b;
+}
+
+.user-center .uc-serach .right .search-value .options {
+  position: relative;
+  top: -1px;
+  left: 0;
+  border-width: 0 1px 1px;
+  border-style: solid;
+  border-color: #eee;
+  background-color: #fff;
+  line-height: 28px;
+  font-size: 12px;
+  color: #999;
+  text-align: center;
+  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
+}
+
+.user-center .uc-serach .right .search-value .options .options-item {
+  display: block;
+  padding: 2px 15px;
+  cursor: pointer;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  -o-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  text-align: left;
+}
+
+.user-center .uc-serach .right .search-value .options .options-item:hover {
+  color: #e1251b;
+  background: #f9f9f9;
+}
+
+/* 搜索 end */
+
+.message-chat {
+  position: relative;
+}
+
+/* 客服信息小红点 */
+.message-radio {
+  border-radius: 50%;
+  width: 5px;
+  height: 5px;
+  background-color: red;
+  display: inline-block;
+  position: absolute;
+  top: 2px;
+  left: 48px;
+}
+
+/* 个人中心 end */

assets/css/weixin-pay.css

@@ -0,0 +1,95 @@
+
+/* 订单支付 */
+
+.weixin-pay .weixin-pay-info {
+    padding: 20px;
+    background: #f9f9f9;
+    margin-top: 40px;
+    border: 1px solid #eee;
+    border-bottom: 0;
+}
+
+.weixin-pay .weixin-pay-info .item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.weixin-pay .weixin-pay-info .item:first-child {
+    margin-bottom: 8px;
+}
+
+.weixin-pay .weixin-pay-info .item .tip-text {
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.weixin-pay .weixin-pay-info .item .act-pay {
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+}
+
+.weixin-pay .weixin-pay-info .item .act-pay .price {
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.weixin-pay .weixin-pay-info .item .time {
+    color: #999;
+    display: flex;
+    align-items: center;
+}
+
+.weixin-pay .weixin-pay-info .item .time .warning {
+    color: #e1251b;
+    margin: 0 3px;
+}
+
+.weixin-pay .weixin-pay-info .item .back-pay {
+    color: #005ea7;
+    cursor: pointer;
+}
+
+.weixin-pay .weixin-pay-code {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 0;
+    border: 1px solid #eee;
+    border-top: 0;
+}
+
+.weixin-pay .weixin-pay-code .code-box {
+    margin-right: 100px;
+}
+
+.weixin-pay .weixin-pay-code .code-box .qrcode {
+    font-size: 0;
+    width: 196px;
+    height: 196px;
+    border: 1px solid #eee;
+}
+
+.weixin-pay .weixin-pay-code .code-box .code-mask {
+    border: 1px solid #eee;
+    background: #eee;
+    width: 196px;
+    height: 196px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.weixin-pay .weixin-pay-code .code-box .text {
+    font-size: 18px;
+    font-weight: 600;
+    text-align: center;
+    margin-top: 10px;
+}
+
+.weixin-pay .weixin-pay-code .wx-bg {
+    font-size: 0;
+}
+
+/* 订单支付 end  */

assets/css/write-comments.css

@@ -0,0 +1,283 @@
+/* 发表评论 */
+
+.write-comments {
+    background: #f9f9f9;
+    margin-top: 2px;
+    margin-bottom: -40px;
+    padding-bottom: 40px;
+}
+
+.write-comments .comments-box {
+    background: #fff;
+    padding: 30px 20px;
+    box-shadow: 0 0 4px rgba(0, 0, 0, .05);
+    display: flex;
+}
+
+.write-comments .comments-box .goods-msg {
+    padding: 20px 50px 20px 30px;
+    width: 278px;
+    border-right: 1px dotted #ddd;
+}
+
+.write-comments .comments-box .goods-msg .img {
+    width: 100px;
+    height: 100px;
+    margin: auto;
+    font-size: 0;
+}
+
+.write-comments .comments-box .goods-msg .img img {
+    width: 100%;
+    height: 100%;
+}
+
+.write-comments .comments-box .goods-msg .name {
+    display: block;
+    margin-top: 15px;
+    line-height: 20px;
+    margin-bottom: 10px;
+    font-size: 13px;
+}
+
+.write-comments .comments-box .goods-msg .name:hover {
+    color: #e1251b;
+}
+
+.write-comments .comments-box .goods-msg .sku {
+    color: #999;
+}
+
+.write-comments .comments-box .goods-msg .order-number {
+    margin-top: 30px;
+    color: #999;
+}
+
+.write-comments .comments-box .goods-msg .order-number .number {
+    color: #000;
+    font-family: arial;
+}
+
+.write-comments .comments-box .goods-msg .order-number .number:hover {
+    color: #e1251b;
+}
+
+.write-comments .comments-box .goods-msg .deal-time {
+    margin-top: 5px;
+    color: #999;
+}
+
+.write-comments .comments-box .goods-msg .deal-time .number {
+    font-family: arial;
+}
+
+.write-comments .comments-box .operation {
+    padding: 20px 40px 0;
+    margin-left: 20px;
+    flex: 1;
+}
+
+.write-comments .comments-box .operation .item {
+    display: flex;
+    margin-bottom: 30px;
+}
+
+.write-comments .comments-box .operation .item .tit {
+    width: 80px;
+    line-height: 38px;
+}
+
+.write-comments .comments-box .operation .item .star-box {
+    display: flex;
+    align-items: center;
+    /* margin-left: 80px; */
+}
+
+.write-comments .comments-box .operation .item .star-box .text {
+    margin-right: 10px;
+}
+
+.write-comments .comments-box .operation .item .star-box .stars {
+    display: flex;
+    height: 14px;
+    align-items: center;
+}
+
+.write-comments .comments-box .operation .item .star-box .stars .star,
+.write-comments .comments-box .operation .item .star-box .stars .star-gray {
+    width: 14px;
+    height: 14px;
+    background: url(../images/icons.png) no-repeat;
+    margin-left: 3px;
+    cursor: pointer;
+}
+
+.write-comments .comments-box .operation .item .star-box .stars .star {
+    background-position: -42px -138px;
+}
+
+.write-comments .comments-box .operation .item .star-box .stars .star-gray {
+    background-position: -61px -138px;
+}
+
+.write-comments .comments-box .operation .item .comments {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: -20px;
+}
+
+.write-comments .comments-box .operation .item .comments .c-item {
+    padding: 10px 15px;
+    line-height: 16px;
+    border: 1px solid #eee;
+    margin: 20px 15px 0 0;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    transition: all 0.2s;
+    cursor: pointer;
+    min-width: 80px;
+    text-align: center;
+}
+
+.write-comments .comments-box .operation .item .comments .c-item:nth-child(5n) {
+    margin-right: 0;
+}
+
+.write-comments .comments-box .operation .item .comments .c-item:hover,
+.write-comments .comments-box .operation .item .comments .c-item.active {
+    border-color: #e1251b;
+    color: #e1251b;
+}
+
+.write-comments .comments-box .operation .item .des-box {
+    flex: 1;
+    position: relative;
+    border: 1px solid #eee;
+    padding: 7px 10px 35px 10px;
+}
+
+.write-comments .comments-box .operation .item .des-box .des {
+    width: 100%;
+    height: 80px;
+    line-height: 20px;
+    border: 0;
+    font-size: 12px;
+    font-family: "微软雅黑";
+    resize: none;
+}
+
+.write-comments .comments-box .operation .item .des-content {
+    flex: 1;
+    line-height: 22px;
+    padding-top: 8px;
+}
+
+.write-comments .comments-box .operation .item .des-content span{
+    width:800px;
+    white-space: pre-wrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    position: relative;
+    line-height: 1.5;
+    word-wrap: break-word;
+}
+
+
+.write-comments .comments-box .operation .item .des-box .des-tip {
+    position: absolute;
+    bottom: 5px;
+    left: 10px;
+    right: 10px;
+    width: auto;
+    background: #fff;
+    height: 25px;
+    line-height: 25px;
+    text-align: right;
+    color: #999;
+}
+
+.write-comments .comments-box .operation .item .img-box {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin: 0 0 -15px -15px;
+}
+
+.write-comments .comments-box .operation .item .img-box .file-img {
+    display: block;
+    border: 1px solid #eee;
+    width: 110px;
+    height: 110px;
+    text-align: center;
+    line-height: 110px;
+    font-size: 24px;
+    font-family: arial;
+    color: #ccc;
+    margin: 0 0 15px 15px;
+}
+
+.write-comments .comments-box .operation .item .img-box .file-img img {
+    width: 100%;
+    height: 100%;
+    vertical-align: top;
+}
+
+.write-comments .comments-box .operation .item .img-box .img-des {
+    color: #999;
+    width: 112px;
+    text-align: center;
+    margin-bottom: 15px;
+}
+
+.write-comments .btn-box {
+    background: #fff;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    padding: 20px 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
+}
+
+.write-comments .btn-box .agree-box {
+    cursor: pointer;
+    margin-left: 20px;
+}
+
+.write-comments .btn-box .agree-box .text {
+    margin-left: 5px;
+}
+
+.write-comments .btn-box .btn {
+    padding: 0 40px;
+    line-height: 38px;
+    color: #fff;
+    background: #e1251b;
+    border-radius: 2px;
+}
+
+.write-comments .btn-box .btn:hover {
+    opacity: 0.9;
+}
+
+.write-comments .btn-box .btn.back {
+    background: #f9f9f9;
+    color: #000;
+    border: 1px solid #ddd;
+    padding: 0 38px;
+    line-height: 36px;
+}
+
+.write-comments .btn-box .btn.back:hover {
+    opacity: 1;
+    background: #fff;
+}
+
+
+/* 发表评论 end */