Merge branch 'feature/GFRS-456【0312】首页改版' into dev

src/views/ebiz/product/HomeProduct.vue

@@ -1,39 +1,52 @@
 <template>
   <div class="home-product-container pb20">
     <div class="home-product-content">
-      <!-- 精选内容 -->
-      <!-- <div class="home-product-selected">
-        <h3 class="home-product-selected-title fs15 pt25 pb15 pl15">精选内容</h3>
-        <div class="home-product-selected-list flex justify-content-s">
-          <div class="home-product-selected-item bg-white ml15 w165 h70 radius6 pl10">
-            <div class="selected-item-info fl">
-              <h4 class="selected-item-subtitle fs14 fl mt15">精选内容</h4>
-              <img class="hot-icon mt15 w45 h20" :src="$assetsUrl + 'images/pic_redian.png'" alt="" />
-              <p class="selected-item-desc fs12 c-gray-base mt10">医护服务更安心</p>
-            </div>
-            <img class="fr mt10" :src="$assetsUrl + 'images/pic_jingxuanneirong.png'" alt="" />
-          </div>
-          <div class="home-product-selected-item bg-white mr15 w165 h70 radius6 pl10">
-            <div class="selected-item-info fl">
-              <h4 class="selected-item-subtitle fs14 mt15">每日新闻</h4>
-              <p class="selected-item-desc fs12 c-gray-base mt10">秘籍在手客户我有</p>
-            </div>
-            <img class="fr mt10" :src="$assetsUrl + 'images/pic_meirixinwen.png'" alt="" />
-          </div>
-        </div>
-      </div> -->
       <!-- 产品中心 -->
       <div class="home-product-pcenter">
-        <div class="pcenter-title flex mt4 mr20 mb10 ml15 justify-content-s">
-          <h3 class="center-title fs15">产品中心</h3> 
-          <span class="more fs13 c-gray-base" @click="getMore">更多</span>
+        <div class="pcenter-title flex pt10 mr20 mb10 ml15 justify-content-s  align-items-c" style="height: 30px;">
+          <h3 class="center-title fs15 pl10" style="border-left: 4px solid red;">知识社区</h3>
+          <span class="more fs13 c-gray-base" @click="checkZssq">查看更多</span>
         </div>
         <div class="pcenter-list">
+          <div class="pcenter-title flex mt4 mb10 mr15 ml10 justify-content-s">
+            <div class="zssq zssq_1" @click="checkZssq">
+              <p class="zssq_p1">人到中年</p>
+              <p class="zssq_p2">是时候给自己填份保障了</p>
+            </div>
+            <div class="zssq zssq_2" @click="checkZssq">
+              <p class="zssq_p1">加班劳累</p>
+              <p class="zssq_p2">是时候给自己填份保障了</p>
+            </div>
+          </div>
+          <div class="pcenter-title flex mt4 mr15 mb10 ml10 justify-content-s">
+            <div class="zssq zssq_3" @click="checkZssq">
+              <p class="zssq_p1">年金保障</p>
+              <p class="zssq_p2">是时候给自己填份保障了</p>
+            </div>
+            <div class="zssq zssq_4" @click="checkZssq">
+              <p class="zssq_p1">高危工种</p>
+              <p class="zssq_p2">是时候给自己填份保障了</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="height: 10px;width: 100%;background-color: #f5f5f5;"></div>
+    <div class="home-product-content">
+      <!-- 产品中心 -->
+      <div class="home-product-pcenter">
+        <div class="pcenter-title flex pt10 mr20 mb10 ml15 justify-content-s align-items-c">
+          <h3 class="center-title fs15 pl10" style="border-left: 4px solid red;">产品中心</h3>
+          <span class="more fs13 c-gray-base" @click="getMore">查看更多</span>
+        </div>
+        <div class="pcenter-list mr20 mb10 ml15">
           <div class="pcenter-item text-center">
-            <img :src="$assetsUrl + 'images/pic_chanpin-1.png'" class="w365" alt="" @click="goDetail('GFRSPRO_M0002')" />
+            <!--<img :src="$assetsUrl + 'images/home_cp_1.png'" class="w365" alt="" @click="goDetail('GFRSPRO_M0002')" />-->
+            <img src="../../../assets/images/home_cp_1.png" style="width: 100%;" alt="" @click="goDetail('GFRSPRO_M0002')" />
           </div>
           <div class="pcenter-item text-center">
-            <img class="w365 "  :src="$assetsUrl + 'images/pic_chanpin-2.png'" alt="" @click="goDetail('GFRSPRO_M0001')" />
+            <img src="../../../assets/images/home_cp_2.png" style="width: 100%;" alt="" @click="goDetail('GFRSPRO_M0002')" />
+            <!--<img :src="$assetsUrl + 'images/home_cp_2.png'"  class="w365"  alt="" @click="goDetail('GFRSPRO_M0001')" />-->
           </div>
         </div>
       </div>
@@ -88,14 +101,20 @@ export default {
           path: `/product/productDetail/${code}`
         }
       })
+    },
+    checkZssq() {
+      // eslint-disable-next-line no-undef
+      Dialog.alert({
+        message: '功能开发中，敬请期待'
+      }).then(() => {})
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
 .home-product-container {
+  background-color: #ffffff;
   .home-product-selected-item {
     box-sizing: border-box;
     box-shadow: 0 4px 10px 0px rgba(90, 125, 189, 0.13);
@@ -105,4 +124,39 @@ export default {
     }
   }
 }
+.zssq {
+  width: 48%;
+  height: 40px;
+  padding: 8px 0px 8px 0;
+}
+.zssq_p1 {
+  padding-left: 16px;
+  font-size: 12px;
+  line-height: 20px;
+}
+.zssq_p2 {
+  font-size: 12px;
+  line-height: 20px;
+  transform: scale(0.8);
+}
+.zssq_1 {
+  background: url(../../../assets/images/zssq_1.png) no-repeat;
+  background-size: 100% 100%;
+  color: #c26b58;
+}
+.zssq_2 {
+  background: url(../../../assets/images/zssq_2.png) no-repeat;
+  background-size: 100% 100%;
+  color: #4f74a6;
+}
+.zssq_3 {
+  background: url(../../../assets/images/zssq_3.png) no-repeat;
+  background-size: 100% 100%;
+  color: #be8054;
+}
+.zssq_4 {
+  background: url(../../../assets/images/zssq_4.png) no-repeat;
+  background-size: 100% 100%;
+  color: #4fa1a6;
+}
 </style>