修改界面

src/components/base/aftersaleList.vue

@@ -202,8 +202,8 @@ export default {
       margin-bottom: 20px;
     }
     .el-button{
-      background-color: $mainGlod;
-      color: #FFFFFF;
+      background-color: $mainColor;
+      color: $mainBtnFontColor;
       font-weight: normal;
       border-radius: 0;
     }

src/components/base/footer.vue

@@ -1,130 +1,118 @@
 <template>
     <div class="footer">
         <div class="banxin">
-        <div class="top">
-            <div class="leftBox">
-                <p class="title">客服电话</p>
-                <p class="number">188 1411 4118</p>
-                <p class="time">09:00-23:00</p>
-                <div class="consult">咨询客服</div>
+            <div class="item">
+                <div class="content">
+                    <img class="img-icon" src="../../../static/image/foot_icon_1.png" />
+                    <div class="text-label">
+                        <div class="title">品质保障</div>
+                        <div class="desc">品质护航 购物无忧</div>
                     </div>
-            <div class="centerBox">
-                <p class="title">关注Thee</p>
-                <p>专注于客单价，转化率提升！</p>
-                <p>便捷高效，助力各大商家提升客单价，</p>
-                <p>客户引导，提高复购，</p>
-                <p>只为更好的服务每一位用户。</p>
                 </div>
-            <div class="rightBox">
-                <div class="aboutUs">
-                    <p class="title">关于我们</p>
-                    <p class="cur-poi">了解我们</p>
-                    <p class="cur-poi">合作咨询</p>
-                    <p class="cur-poi">联系我们</p>
             </div>
-                <div class="qrCode">
-                    <p class="title">下载Thee</p>
-                    <img src="../../../static/image/qrcode.png" alt="">
+            <div class="item">
+                <div class="content">
+                    <img class="img-icon" src="../../../static/image/foot_icon_2.png" />
+                    <div class="text-label">
+                        <div class="title">极速物流</div>
+                        <div class="desc">如约送货 送货入户</div>
+                    </div>
+                </div>
+            </div>
+            <div class="item">
+                <div class="content">
+                    <img class="img-icon" src="../../../static/image/foot_icon_3.png" />
+                    <div class="text-label">
+                        <div class="title">售后无忧</div>
+                        <div class="desc">七天无理由退换货</div>
+                    </div>
+                </div>
+            </div>
+            <div class="item">
+                <div class="content">
+                    <img class="img-icon" src="../../../static/image/foot_icon_4.png" />
+                    <div class="text-label">
+                        <div class="title">帮助中心</div>
+                        <div class="desc">您的购物指南</div>
                     </div>
                 </div>
             </div>
-        <p class="bottom">&copy;2017-2021Thee版权所有，并保留所有权利 粤ICP备19086489号-3</p>
         </div>
     </div>
 </template>
 <script>
 export default {
-  data () {
+    data() {
         return {}
     }
 }
 </script>
 <style lang = "scss" scoped>
-.footer{
+.footer {
     width: 100%;
-    height: 384px;
-    background-color: #000000;
-    opacity: 0.82;
-    color: #FFFFFF;
-    overflow: hidden;
-    .banxin{
+    background-color: #FFFFFF;
+    padding-top: 40px;
+    padding-bottom: 40px;
+
+    .banxin {
         width: 1252px;
-        height: 100%;
         margin: 0 auto;
-        .top{
-            margin-top: 100px;
         display: flex;
-            margin-bottom: 38px;
-            text-align: center;
-            .leftBox{
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-content: center;
+        justify-content: center;
+        align-items: center;
+
+        .item {
             flex: 1;
             display: flex;
             flex-direction: column;
-                .title{
-                    font-size: 16px;
-                    margin-bottom: 33px;
-                }
-                .number{
-                    font-size: 40px;
-                    margin-bottom: 12px;
-                    font-weight: 500;
-                }
-                .time{
-                    font-size: 18px;
-                    margin-bottom: 33px;
-                }
-                .consult{
-                    cursor: pointer;
-                    margin: 0 auto;
-                    width: 220px;
-                    height: 36px;
-                    line-height: 36px;
-                    border: 1px solid #FFFFFF;
-                    box-sizing: border-box;
-                    opacity: 0.6;
-                }
-            }
-            .centerBox{
-                flex: 1;
-                border-left: 2px solid rgba($color: #FFFFFF, $alpha: 0.15);
-                border-right: 2px solid rgba($color: #FFFFFF, $alpha: 0.15);
-                p{
-                    font-size: 16px;
-                    line-height: 25px;
-                }
-                .title{
-                    margin-bottom: 33px;
-                }
-            }
-            .rightBox{
-                flex: 1;
+            flex-wrap: nowrap;
+            align-content: center;
+            justify-content: center;
+            align-items: center;
+
+            .content {
                 display: flex;
-                .aboutUs{
-                    flex: 1;
-                    p{
-                        margin-bottom: 20px;
-                    }
-                    .title{
-                        margin-bottom: 33px;
-                    }
-                }
-                .qrCode{
-                    flex: 1;
-                    .title{
-                        margin-bottom: 33px;
-                    }
-                    img{
-                        width: 106px;
-                        height: 106px;
+                flex-direction: row;
+                flex-wrap: nowrap;
+                align-content: center;
+                justify-content: center;
+                align-items: center;
+
+                .img-icon {
+                    width: 60px;
+                    height: 60px;
+                    margin-right: 16px;
+                }
+
+                .text-label {
+                    display: flex;
+                    flex-direction: column;
+                    flex-wrap: nowrap;
+                    align-content: center;
+                    justify-content: center;
+                    align-items: flex-start;
+
+                    .title {
+                        font-size: 18px;
+                        font-family: Microsoft YaHei;
+                        font-weight: bold;
+                        color: #333333;
                     }
+
+                    .desc {
+                        margin-top: 11px;
+                        font-size: 14px;
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        color: #666666;
                     }
                 }
+
             }
-        .bottom{
-            text-align: center;
-            font-size: 12px;
-            line-height: 24px;
-            color: #444444;
+
         }
     }
 }

src/components/base/homHeader.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="header-parent">
   <div class="header">
     <nav class="nav">
       <ul>
@@ -36,6 +37,7 @@
       </span>
     </div>
   </div>
+</div>
 </template>
 
 <script>
@@ -97,6 +99,9 @@ export default {
 <style scoped lang="scss">
 $lightBlack: #666666;
 $navSearchHeight: 39px;
+.header-parent{
+  background-color: #FFFFFF;
+  width: 100%;
 .header{
   height: 80px;
   width: 1200px;
@@ -121,8 +126,8 @@ $navSearchHeight: 39px;
       cursor: pointer;
       border-bottom: 3px solid #fff;
       &.on,&:hover{
-        color: #C5AA7B;
-        border-color: #C5AA7B;
+        color: $mainColor;
+        border-color: $mainColor;
       }
     }
   }
@@ -141,7 +146,7 @@ $navSearchHeight: 39px;
       text-align: center;
       line-height: 30px;
       .el-dropdown{
-        color: #C5AA7B;
+        color: $mainColor;
       }
     }
     .searchRight{
@@ -160,4 +165,5 @@ $navSearchHeight: 39px;
     }
   }
 }
+}
 </style>

src/components/base/orderList.vue

@@ -479,8 +479,8 @@ export default {
       width: 200px;
       height: 50px;
       padding: 0;
-      background-color: #333;
-      color: $mainGlod;
+      background-color: $mainColor;
+      color: $mainBtnFontColor;
       font-size: 14px;
       font-family: Microsoft YaHei;
       border-radius: 0;
@@ -508,9 +508,9 @@ export default {
     // border-bottom: 0;
     box-sizing: border-box;
     &:hover{
-      border-color: $mainGlod;
+      border-color: $mainColor;
       .top{
-        background-color: $mainGlod;
+        background-color: $mainColor;
       }
     }
     .top {
@@ -621,8 +621,8 @@ export default {
             div {
               text-align: center;
               .el-button {
-                border: 1px solid $mainGlod;
-                color: $mainGlod;
+                border: 1px solid $mainColor;
+                color: $mainColor;
                 border-radius: 0;
               }
             }
@@ -642,7 +642,7 @@ export default {
                 padding: 0;
                 line-height: 30px;
                 text-align: center;
-                color: $mainGlod;
+                color: $mainColor;
                 border: 1px solid #F3F4F5;
                 font-size: 12px;
                 font-family: Microsoft YaHei;
@@ -667,10 +667,10 @@ export default {
     text-align: right;
     .el-pager {
       li:not(.disabled):hover {
-        color: $mainGlod;
+        color: $mainColor;
       }
       li:not(.disabled).active {
-        background-color: $mainGlod;
+        background-color: $mainColor;
       }
       li:not(.disabled).active:hover {
         color: #f4f4f5;

src/components/base/topNav.vue

@@ -434,7 +434,7 @@ $navSearchHeight: 39px;
         span{
           cursor: pointer;
           b{
-            color: $mainGlod;
+            color: $mainColor;
             padding: 0 2px;
           }
         }
@@ -466,7 +466,7 @@ $navSearchHeight: 39px;
             display: block;
           }
           .hover-item{
-            color: $mainGlod;
+            color: $mainColor;
           }
         }
       }
@@ -582,7 +582,7 @@ $navSearchHeight: 39px;
           line-height: 26px;
           text-align: center;
           color: #fff;
-          background-color: $mainGlod;
+          background-color: $mainColor;
           border-radius: 4px;
           margin-top: 10px;
           cursor: pointer;
@@ -618,7 +618,7 @@ $navSearchHeight: 39px;
                 display: block;
                 width: 86px;
                 height: 22px;
-                color: $mainGlod;
+                color: $mainColor;
                 position: relative;
                 top: -15px;
               }
@@ -629,7 +629,7 @@ $navSearchHeight: 39px;
                 text-align: center;
                 font-size: 14px;
                 font-family: Microsoft YaHei;
-                color: $mainGlod;
+                color: $mainColor;
                 background: #333333;
                 box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.16);
                 border-radius: 3px;
@@ -642,7 +642,7 @@ $navSearchHeight: 39px;
                 line-height: 16px;
                 color: #999999;
                 span{
-                  color: $mainGlod;
+                  color: $mainColor;
                 }
               }
             }
@@ -662,7 +662,7 @@ $navSearchHeight: 39px;
             justify-content: center;
             align-items: center;
             &:hover{
-              color: $mainGlod;
+              color: $mainColor;
               background-color: #F5F5F5;
             }
           }
@@ -675,20 +675,20 @@ $navSearchHeight: 39px;
     margin: 15px auto;
     line-height: 30px;
     text-align: center;
-    color: $mainGlod;
-    background: #333333;
-    border: 1px solid #333333;
+    color: #FFFFFF;
+    background: $mainColor;
+    border: 1px solid $mainColor;
     cursor: pointer;
     &:hover{
-      background: #FFFFFF;
-      border-color: $mainGlod;
+      background: $mainColor;
+      border-color: $mainColor;
     }
   }
   .checkOut{
     color: #FFF;
     background-color: #333;
     &:hover{
-      background-color: $mainGlod;
+      background-color: $mainColor;
     }
   }
 }

src/components/canvasShow/basics/group/pc/index.vue

@@ -102,7 +102,7 @@
 <style lang="scss" scoped>
 .product-list{
   padding: 20px 0;
-  background-color: #fff;
+  background-color: #f5f5f5;
   .picListWarp{
     width: 1380px;
     max-width: 100%;

src/components/canvasShow/basics/price/pc/index.vue

@@ -99,7 +99,7 @@
 <style lang="scss" scoped>
 .product-list{
   padding: 20px 0;
-  background-color: #fff;
+  background-color: #f5f5f5;
   min-height: 100px;
   .picListWarp{
     width: 1380px;

src/components/canvasShow/basics/product/pc/index.vue

@@ -75,7 +75,7 @@ import {commonMixin} from '../mixin'
 <style lang="scss" scoped>
   .product-list{
     padding: 20px 0;
-    background-color: #fff;
+    background-color: #f5f5f5;
     .picListWarp{
       width: 1380px;
       max-width: 100%;

src/components/canvasShow/basics/vip/pc/index.vue

@@ -79,7 +79,7 @@ import {commonMixin} from '../mixin'
 <style lang="scss" scoped>
   .product-list{
     padding: 20px 0;
-    background-color: #fff;
+    background-color: #f5f5f5;
     .picListWarp{
       width: 1380px;
       max-width: 100%;

src/styles/variables.scss

@@ -1,6 +1,8 @@
 // 网站主题色调
 $fontColor: #333;  // 字体色
 $mainColor: #FF7800; // 主色
-$bgColor: #fff; // 背景色
+$bgColor: #F5F5F5; // 背景色
 
 $mainGlod: #C5AA7B; // 主题金
+$mainColor: #183ECD; // 主题金
+$mainBtnFontColor: #FFFFFF; // 主题金

src/views/layout.vue

@@ -51,6 +51,7 @@ export default {
   flex-direction: column;
   .main{
     flex: 1;
+    background-color: #F5F5F5;
   }
 }
 .hiddenLogin{

src/views/login/login.vue

@@ -11,8 +11,9 @@
         <div class="loginTitle">
           <div class="title" v-text="isRegistered !== '1' ? '登录' : '用户注册'"></div>
           <div class="content">
-            <span v-text="isRegistered === '1' ? '已有账户？' : '第一次使用cereshop商城？'"></span>
-            <u @click="registered" v-text="isRegistered === '1' ? '立即登录' : '用户注册'"></u></div>
+            <span v-text="isRegistered === '1' ? '已有账户？' : '第一次使用Thee商城？'"></span>
+            <u @click="registered" v-text="isRegistered === '1' ? '立即登录' : '用户注册'"></u>
+          </div>
         </div>
         <div class="loginFormBox">
           <div class="inputBox">
@@ -20,28 +21,28 @@
               <template slot="prepend"><span class="icon iconfont">&#xe62f;</span></template>
             </el-input>
           </div>
+          <div>
             <div class="inputBox">
-            <el-input
-              v-model="verificationCode"
-              placeholder="请输入验证码"
-              @keyup.enter.native="login"
-            >
+              <el-input v-model="verificationCode" placeholder="请输入验证码" @keyup.enter.native="login">
                 <template slot="prepend">
                   <span class="icon iconfont">&#xe62e;</span>
                 </template>
               </el-input>
+              <div>
+              </div>
+
               <span v-show="codeShow" class="codeBtn" @click="getCode">获取验证码</span>
-            <span v-show="!codeShow" class="codeBtn codeCount">重新获取({{codeCountNum}}s)</span>
+              <span v-show="!codeShow" class="codeBtn codeCount">重新获取({{ codeCountNum }}s)</span>
             </div>
-          <div class="noLogin" :class="{registered: isRegistered === '1'}" >
+          </div>
+
+
+          <div class="noLogin" :class="{ registered: isRegistered === '1' }">
             <el-checkbox v-show="isRegistered === '2'" v-model="isNoLogin">七天免登录</el-checkbox>
-            <span ></span>
+            <span></span>
           </div>
-          <el-button class="loginBtn"
-            @click="login"
-            v-text="isRegistered === '1' ? '注册' : '立即登录'"
-            :loading="loadingLogin"
-          >立即登录</el-button>
+          <el-button class="loginBtn" @click="login" v-text="isRegistered === '1' ? '注册' : '立即登录'"
+            :loading="loadingLogin">立即登录</el-button>
         </div>
         <div class="loginProtocol" v-if="isRegistered === '1'">
           <el-checkbox v-model="haveRead"></el-checkbox>
@@ -50,10 +51,7 @@
         </div>
       </div>
     </div>
-    <el-dialog
-      title="服务协议"
-      :visible.sync="dialogAgreement"
-      width="50%">
+    <el-dialog title="服务协议" :visible.sync="dialogAgreement" width="50%">
       这是服务协议
     </el-dialog>
   </div>
@@ -71,7 +69,7 @@ import {
 } from '@/api/user/user.js'
 export default {
   name: 'login',
-  data () {
+  data() {
     return {
       userName: '',
       verificationCode: '',
@@ -85,7 +83,7 @@ export default {
     }
   },
   methods: {
-    async getUserInfoData () {
+    async getUserInfoData() {
       const response = await getUserInfo()
       const res = response.data
       if (res.code === '200') {
@@ -93,7 +91,7 @@ export default {
         this.userInfoData = res.data
       }
     },
-    async getCode () {
+    async getCode() {
       const TIME_COUNT = 120
       let reg = /^1[13456789]\d{9}$/
       if (!reg.test(this.userName)) {
@@ -134,10 +132,10 @@ export default {
       }
     },
     // 阅读协议
-    readAgreement () {
+    readAgreement() {
       this.dialogAgreement = true
     },
-    login () {
+    login() {
       let reg = /^1[13456789]\d{9}$/
       if (!reg.test(this.userName)) {
         this.$message({
@@ -167,7 +165,7 @@ export default {
         })
       }
     },
-    async getLogin () {
+    async getLogin() {
       this.loadingLogin = true
       const response = await login({
         phone: this.userName,
@@ -200,7 +198,7 @@ export default {
       }
       this.loadingLogin = false
     },
-    registered () {
+    registered() {
       this.codeShow = true
       clearInterval(this.timer)
       this.timer = null
@@ -213,7 +211,7 @@ export default {
       }
     },
     // 关闭登录
-    hiddenLoginBtn () {
+    hiddenLoginBtn() {
       store.commit('SHOW_LOGIN')
     }
   }
@@ -229,6 +227,7 @@ export default {
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
+
   .loginCent {
     // background: url('../../assets/images/beijing.png') no-repeat;
     // flex-grow: 1;
@@ -240,84 +239,102 @@ export default {
     float: right;
     background-color: #ffffff;
     animation: showRight .5s;
-    animation-fill-mode:forwards;
-    -webkit-animation-fill-mode:forwards;
-    nav{
+    animation-fill-mode: forwards;
+    -webkit-animation-fill-mode: forwards;
+
+    nav {
       margin-bottom: 85px;
-      .hiddenLoginBtn{
-        a{
+
+      .hiddenLoginBtn {
+        a {
           float: right;
         }
       }
     }
+
     .loginForm {
       width: 500px;
       height: 100%;
       background: #ffffff;
-      .loginTitle{
+
+      .loginTitle {
         font-family: Microsoft YaHei;
         color: #333333;
-        .title{
+
+        .title {
           font-size: 36px;
         }
-        .content{
+
+        .content {
           margin: 10px 0;
           font-size: 14px;
-          u{
-            color: #C5AA7B;
+
+          u {
+            color: $mainColor;
             cursor: pointer;
           }
         }
       }
+
       .loginFormBox {
         .inputBox {
           position: relative;
-          .el-input{
-            .iconfont{
+
+          .el-input {
+            .iconfont {
               font-size: 32px;
               padding: 0 10px;
             }
           }
-          >>> .el-input__inner {
+
+          >>>.el-input__inner {
             height: 70px;
-            background: #F3F4F5;
+
             border-radius: 0px;
             font-size: 20px;
             padding-left: 5px;
           }
+
           &:nth-child(2) {
             margin: 60px 0 20px 0;
           }
+
           .codeBtn {
             width: 120px;
             height: 50px;
-            background: $mainGlod;
+            background: #EEEEEE;
+            border: #999999;
             border-radius: 0;
             display: block;
             line-height: 54px;
             text-align: center;
             position: absolute;
             right: 5px;
+            color: #333333;
             bottom: 10px;
             cursor: pointer;
           }
+
           .codeCount {
             color: #999999;
           }
         }
+
         .noLogin {
           color: #333333;
           font-size: 18px;
-          margin:20px 0 60px 0;
+          margin: 20px 0 60px 0;
           height: 30px;
           align-items: center;
           display: flex;
           justify-content: space-between;
-          >>> .el-checkbox__label {
+
+          >>>.el-checkbox__label {
             font-size: 16px;
             color: #333333;
             font-weight: 400;
           }
+
           span {
             cursor: pointer;
             font-size: 16px;
@@ -325,24 +342,28 @@ export default {
             color: #666666;
           }
         }
+
         .registered {
           justify-content: flex-end;
         }
+
         .loginBtn {
           width: 100%;
           height: 70px;
-          background: #333333;
+          background: $mainColor;
           border-radius: 0;
-          border: 1px solid #333333;
+          border: 1px solid $mainColor;
           text-align: center;
           font-size: 20px;
-          color: $mainGlod;
+          color: $mainBtnFontColor;
           cursor: pointer;
-          &:hover{
-            border: 1px solid $mainGlod;
+
+          &:hover {
+            border: 1px solid $mainColor;
           }
         }
       }
+
       .loginProtocol {
         padding: 0 60px;
         display: flex;
@@ -350,17 +371,21 @@ export default {
         height: 80px;
         line-height: 80px;
         border-top: 1px solid #EEEEEE;
+
         span {
           margin-left: 10px;
         }
+
         span:nth-child(3) {
           color: #426BEA;
           cursor: pointer;
         }
       }
-      >>> .el-checkbox__inner {
+
+      >>>.el-checkbox__inner {
         width: 20px;
         height: 20px;
+
         &:after {
           height: 10px;
           left: 7px;
@@ -369,24 +394,27 @@ export default {
       }
     }
   }
-  >>> .el-dialog__body {
+
+  >>>.el-dialog__body {
     max-height: 500px;
     min-height: 300px;
     overflow: auto;
   }
 }
+
 .hiddenLogin {
   display: none;
 }
+
 @keyframes showRight {
   from {
     width: 560px;
     opacity: 0;
   }
+
   to {
     width: 600px;
     opacity: 1;
     display: block;
   }
-}
-</style>
+}</style>

src/views/orderDetail/components/orderid.vue

@@ -158,8 +158,8 @@ export default {
   button{
     width: 200px;
     height: 50px;
-    color: $mainGlod;
-    background-color: #FFF;
+    color: $mainBtnFontColor;
+    background-color: $mainColor;
     font-family: Microsoft YaHei;
     cursor: pointer;
   }

src/views/orderDetail/index.vue

@@ -914,7 +914,7 @@ export default {
         color: #333333;
         margin-bottom: 20px;
         span {
-          color: $mainGlod;
+          color: $mainColor;
           font-size: 14px;
           font-weight: normal;
         }
@@ -930,8 +930,8 @@ export default {
           margin-left: 10px;
         }
         .time {
-          color: $mainGlod;
-          background-color: #333;
+          background-color: $mainColor;
+      color: $mainBtnFontColor;
         }
         span {
           border: 1px solid #E5E5E5;
@@ -1026,9 +1026,9 @@ export default {
         height: 40px;
         line-height: 40px;
         text-align: center;
-        background: #FFFFFF;
-        border: 1px solid $mainGlod;
-        color: $mainGlod;
+        background: $mainBtnFontColor;
+        border: 1px solid $mainColor;
+        color: $mainColor;
         margin-left: 20px;
         cursor: pointer;
       }

src/views/product/productDetail.vue

@@ -1064,11 +1064,11 @@ $lightGlod: #FFEBC4;
       height: 50px;
       padding: 0;
       cursor: pointer;
-      border: 1px solid #333333;
+      border: 1px solid $mainColor;
     }
     .addCart{
-      color: $mainGlod;
-      background: #333333;
+      background-color: $mainColor;
+      color: $mainBtnFontColor;
     }
     .buy{
       margin-top: 15px;
@@ -1126,8 +1126,8 @@ $lightGlod: #FFEBC4;
           border: none;
         }
         .is-active{
-          color: #FFF;
-          background-color: $mainGlod;
+          color: $mainBtnFontColor;
+          background-color: $mainColor;
         }
       }
       .el-tab-pane{
@@ -1267,12 +1267,12 @@ $lightGlod: #FFEBC4;
           width: 100%;
           height: 40px;
           margin-top: 15px;
-          border: 1px solid $mainGlod;
+          border: 1px solid $mainColor;
           text-align: center;
           line-height: 40px;
           cursor: pointer;
           font-size: 16px;
-          color: $mainGlod;
+          color: $mainColor;
         }
       }
     }