页面调整

src/views/homepage/components/homeFooter.vue

@@ -3,7 +3,7 @@
     <div class="footer-content">
       <el-row :gutter="30">
         <el-col v-for="(item,index) in dataList" :key="index" :span="4">
-          <div class="title">{{ item.name }}</div>
+          <div class="title-s">{{ item.name }}</div>
           <div v-for="(t,i) in item.list" :key="'lb_'+i" class="label" :title="t.name">
             <a :href="t.url||'http://www.minestar.cn'" target="_blank">
               {{ t.name }}
@@ -85,7 +85,7 @@ export default {
   color: #E8E6E6;
   user-select: none;
   z-index: 99;
-  .title {
+  .title-s {
     margin: 30px 0;
     font-size: 26px;
   }

src/views/homepage/components/searchPanel.vue

@@ -14,13 +14,13 @@
       <span v-for="(item, index) in keywords" :key="index" class="label" @click="keywordClick(item, 'keyword')">{{ item }}</span>
     </div>
     <div class="search-keyword-title">
-      <div class="title">品牌</div>
+      <div class="title-s">品牌</div>
     </div>
     <div class="search-keyword-label">
       <span v-for="(item, index) in brands" :key="index" class="label" @click="keywordClick(item, 'brand')">{{ item }}</span>
     </div>
     <div class="search-keyword-title">
-      <div class="title">供应商</div>
+      <div class="title-s">供应商</div>
     </div>
     <div class="search-keyword-label">
       <span v-for="(item, index) in suppliers" :key="index" class="label" @click="keywordClick(item, 'supplier')">{{ item }}</span>
@@ -109,11 +109,12 @@ export default {
     font-family: Source Han Sans CN;
     font-weight: 400;
     color: #FFFFFF;
-    .title {
+    .title-s {
       width: 126px;
       padding: 7px;
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 20px;
+      color: #FFFFFF;
     }
   }
   .search-keyword-label {

src/views/homepage/components/titleMenus.vue

 <template>
   <div class="menus-box">
-    <span v-for="(item, index) in menus" :key="index" class="menus-item" :class="currentMenuObj===item?'active':''" @click="menuClick(item)">{{ item.name }}</span>
+    <span v-for="(item, index) in menus" :key="index" class="menus-item" :class="(currentMenuObj===item?'active':'')+(index===menus.length-1?'tc-orange':'')" @click="menuClick(item)">
+      {{ item.name }}
+    </span>
   </div>
 </template>
 <script>
@@ -28,6 +30,9 @@ export default {
 }
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
+.tc-orange {
+  color: #F7601A !important;
+}
 .menus-box {
   .menus-item {
     padding: 1px 15px 1px;

src/views/homepage/components/titleMenusV2.vue

 <template>
   <div class="menus-box">
-    <div v-for="(item, index) in menus" :key="index" class="menus-item" :class="currentMenuObj===item?'active':''" @click="menuClick(item)">
+    <div v-for="(item, index) in menus" :key="index" class="menus-item" :class="(currentMenuObj===item?'active':'')+(index===menus.length-1?'tc-orange':'')" @click="menuClick(item)">
       {{ item.name }}
       <div v-if="currentMenuObj===item" class="menus-line"><div /></div>
     </div>
@@ -37,6 +37,9 @@ export default {
 }
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
+.tc-orange {
+  color: #F7601A !important;
+}
 .menus-box {
   .menus-item {
     position: relative;

src/views/homepage/index.vue

@@ -37,8 +37,8 @@
                 <div class="title touch" :title="item.title" @click="goToDetails(item, 'product')">{{ item.title }}</div>
               </el-col>
               <el-col :span="3">
-                <img v-if="item.isStore" class="touch" src="@/assets/home_images/to_like_h.png" @click="storeShowcase(item, 'product')">
-                <img v-else class="touch" src="@/assets/home_images/to_like.png" @click="storeShowcase(item, 'product')">
+                <img v-if="item.isStore" class="touch" src="@/assets/home_images/to_like_h.png" title="点击取消收藏" @click="storeShowcase(item, 'product')">
+                <img v-else class="touch" src="@/assets/home_images/to_like.png" title="点击收藏" @click="storeShowcase(item, 'product')">
               </el-col>
             </el-row>
             <el-row>
@@ -81,8 +81,8 @@
                 <div class="title touch" :title="item.title" @click="goToDetails(item, 'supplier')">{{ item.title }}</div>
               </el-col>
               <el-col :span="3">
-                <img v-if="item.isStore" class="touch" src="@/assets/home_images/to_like_h.png" @click="storeShowcase(item, 'supplier')">
-                <img v-else class="touch" src="@/assets/home_images/to_like.png" @click="storeShowcase(item, 'supplier')">
+                <img v-if="item.isStore" class="touch" src="@/assets/home_images/to_like_h.png" title="点击取消收藏" @click="storeShowcase(item, 'supplier')">
+                <img v-else class="touch" src="@/assets/home_images/to_like.png" title="点击收藏" @click="storeShowcase(item, 'supplier')">
               </el-col>
             </el-row>
             <el-row>
@@ -109,7 +109,7 @@
         <el-row :gutter="20" style="padding-top: 20px">
           <el-col :span="8"><div class="top_area" /></el-col>
           <el-col :span="8"><div class="box-toplist">
-            <div class="title">供应商TOP</div>
+            <div class="title">供应商TOP8</div>
             <ul class="contact-list">
               <li v-for="(item, index) in topSuppliers" :key="'ts_'+index" class="contact-item">
                 <img src="@/assets/home_images/to_like_b.png">
@@ -118,7 +118,7 @@
             </ul>
           </div></el-col>
           <el-col :span="8"><div class="box-toplist">
-            <div class="title">产品TOP</div>
+            <div class="title">产品TOP8</div>
             <ul class="contact-list">
               <li v-for="(item, index) in topProducts" :key="'tp_'+index" class="contact-item">
                 <img src="@/assets/home_images/to_like_a.png">
@@ -160,6 +160,7 @@ import languageSetting from './components/languageSetting'
 import searchPanel from './components/searchPanel'
 import homeFooter from './components/homeFooter'
 import inquiryView from './components/inquiryView'
+import NProgress from 'nprogress'
 
 export default {
   components: { floatBtn, titleMenus, userLogin, languageSetting, searchPanel, homeFooter, inquiryView },
@@ -359,8 +360,6 @@ export default {
         { name: '中山市三角镇凌创传感器厂', id: 123 },
         { name: '中山市三角镇凌创传感器厂', id: 123 },
         { name: '中山市三角镇凌创传感器厂', id: 123 },
-        { name: '中山市三角镇凌创传感器厂', id: 123 },
-        { name: '中山市三角镇凌创传感器厂', id: 123 },
         { name: '中山市三角镇凌创传感器厂', id: 123 }
       ],
       topProducts: [
@@ -371,8 +370,6 @@ export default {
         { name: 'wiwo1002热能工程压力变送器', id: 123 },
         { name: 'wiwo1002热能工程压力变送器', id: 123 },
         { name: 'wiwo1002热能工程压力变送器', id: 123 },
-        { name: 'wiwo1002热能工程压力变送器', id: 123 },
-        { name: 'wiwo1002热能工程压力变送器', id: 123 },
         { name: 'wiwo1002热能工程压力变送器', id: 123 }
       ],
       partners: [
@@ -416,6 +413,9 @@ export default {
     // 点击收藏
     storeShowcase(item, type) {
       item.isStore = !item.isStore
+      this.$message.warning({
+        message: `您${item.isStore ? '' : '已取消'}收藏了该产品！`
+      })
       console.log(item, type)
     },
     // 跳转到详情
@@ -547,7 +547,7 @@ export default {
   }
   .top_area {
     width: 100%;
-    height: 552px;
+    height: 492px;
     background: url("../../assets/home_images/top_area.png") no-repeat;
     background-size:100% 100%;
   }
@@ -566,9 +566,9 @@ export default {
       font-weight: 600;
     }
     .contact-list {
-      padding: 0 0 20px;
+      padding: 15px 0;
       margin: 0;
-      height: 500px;
+      height: 440px;
       overflow: hidden;
       .contact-item {
         display: inherit;

src/views/homepage/product/index.vue

@@ -96,8 +96,8 @@
                 <div class="title touch" :title="item.title" @click="goToDetails(item, 'product')">{{ item.title }}</div>
               </el-col>
               <el-col :span="3">
-                <img v-if="item.isStore" class="touch" src="@/assets/home_images/to_like_h.png" @click="storeShowcase(item, 'product')">
-                <img v-else class="touch" src="@/assets/home_images/to_like.png" @click="storeShowcase(item, 'product')">
+                <img v-if="item.isStore" class="touch" src="@/assets/home_images/to_like_h.png" title="点击取消收藏" @click="storeShowcase(item, 'product')">
+                <img v-else class="touch" src="@/assets/home_images/to_like.png" title="点击收藏" @click="storeShowcase(item, 'product')">
               </el-col>
             </el-row>
             <el-row>
@@ -187,6 +187,7 @@ import languageSetting from '../components/languageSettingV2'
 import breadcrumb from '../components/breadcrumb'
 import homeFooter from '../components/homeFooter'
 import inquiryView from '../components/inquiryView'
+import NProgress from 'nprogress'
 
 export default {
   components: { titleMenus, userLogin, languageSetting, breadcrumb, homeFooter, inquiryView },
@@ -368,6 +369,9 @@ export default {
     // 点击收藏
     storeShowcase(item, type) {
       item.isStore = !item.isStore
+      this.$message.warning({
+        message: `您${item.isStore ? '' : '已取消'}收藏了该产品！`
+      })
       console.log(item, type)
     },
     // 跳转到详情