产品详情

@@ -10,5 +10,11 @@ module.exports = {
 	},
 	},
 	nav: {
 	nav: {
 		ttt: "2"
 		ttt: "2"
+	},
+	product : {
+		btnPosition : "Booking service",
+		iconProblem : "Common problem",
+		iconProcess : "Insurance process",
+		iconProduct : "Product details"
 	}
 	}
 }
 }

@@ -10,5 +10,11 @@ module.exports = {
 	},
 	},
 	nav: {
 	nav: {
 		ttt: "2"
 		ttt: "2"
+	},
+	product : {
+		btnPosition : "預約服務",
+		iconProblem : "常見問題",
+		iconProcess : "投保流程",
+		iconProduct : "產品詳情"
 	}
 	}
 }
 }

@@ -10,5 +10,11 @@ module.exports = {
 	},
 	},
 	nav: {
 	nav: {
 		ttt: "1"
 		ttt: "1"
+	},
+	product : {
+		btnPosition : "预约服务",
+		iconProblem : "常见问题",
+		iconProcess : "投保流程",
+		iconProduct : "产品详情"
 	}
 	}
 }
 }

+
+import api from '@/api/api'
+import {
+	httpGet,
+	httpPost
+} from '@/api/fetch-api.js'
+
+export default {
+	data() {
+		return {
+			isFixTop: false,
+			activity: "product"
+		}
+	},
+	components: {},
+	methods: {
+		initData() { },
+		checkBtnGroupFixed() {
+			let top = this.$refs.ruleBtnGroup.getBoundingClientRect().top;
+			this.isFixTop = top < 0;
+		}
+	},
+	computed: {
+		fixTop() {
+			return this.isFixTop;
+		}
+	},
+	mounted() {
+		window.addEventListener("scroll", () => {
+			this.checkBtnGroupFixed();
+		});
+	},
+	created() { }
+}

+
+.content {
+    background-color: #f5f5f5;
+}
+
+.fix {
+    position: fixed;
+    max-width: 950px;
+    width: 100%;
+    top: 0;
+}
+
+.banner {
+    margin-bottom: 3.333333rem;
+    position: relative;
+    .btn-position {
+        position: absolute;
+        top: 23.333333rem;
+        left: 2.833333rem ;
+    }
+    .btn {
+        background: #FF5700;
+        border: 0;
+        color: #fff;
+        margin-left: 0;
+        width: 160px;
+        height: 4.166667rem;
+        display: inline-block;
+        line-height: 4.166667rem;
+        text-align: center;
+        border-radius: .416667rem;
+        font-size: 1.666667rem;
+    }
+}
+
+.fix .rule-btn {
+    width: 33.33333% !important;
+}
+
+.blank-pannel {
+    height: 2.5rem;
+}
+
+.rule-btn-out-group {
+    height: 3rem;
+}
+
+.rule-btn-group {
+    display: flex;
+    width: 100%;
+    justify-content: space-around;
+    .rule-btn {
+        width: 33%;
+        height: 3rem ;
+        line-height: 3rem ;
+        text-align: center;
+        font-size: 1.166667rem ;
+        color: #666666;
+        background: #ffffff;
+        cursor: pointer;
+    }
+
+    .rule-btn.activity{
+        background: #FF5700;
+        color: #ffffff;
+
+        .triangle {
+            width: 0;
+            height: 0;
+            margin: auto;
+            border: .833333rem  solid #FF5700;
+            border-bottom-color: transparent;
+            border-left-color: transparent;
+            border-right-color: transparent;
+        }
+    }
+
+    i {
+        display: inline-block;
+        width: 1.666667rem ;
+        height: 1.666667rem ;
+        margin-right: .666667rem;
+        vertical-align: middle;
+    }
+
+
+    .icon-product {
+        background: url("~@/assets/images/product/icon-product-unselect.png") no-repeat center center;
+        background-size: 75% 60%;
+    }
+
+    .activity .icon-product {
+        background: url("~@/assets/images/product/icon-product.png") no-repeat center center;
+        background-size: 75% 60%;
+    }
+
+    .icon-process {
+        background: url("~@/assets/images/product/icon-process-unselect.png") no-repeat center center;
+        background-size: 75% 60%;
+    }
+
+    .activity .icon-process {
+        background: url("~@/assets/images/product/icon-process.png") no-repeat center center;
+        background-size: 75% 60%;
+    }
+
+    .icon-problem {
+        background: url("~@/assets/images/product/icon-problem-unselect.png") no-repeat center center;
+        background-size: 75% 60%;
+    }
+
+    .activity .icon-problem {
+        background: url("~@/assets/images/product/icon-problem.png") no-repeat center center;
+        background-size: 75% 60%;
+    }
+
+}
+
+.rule-container {
+    display: none;
+}
+
+.rule-container.activity {
+    display: block;
+    img {
+        width: 100%;
+        display: block;
+        height: auto;
+        margin: 0 auto;
+    }
+}
+
+.bottom-space {
+    padding-bottom: 5rem;
+}
\ No newline at end of file

+
+<template>
+  <div class="content">
+    <div class="banner">
+      <div class="btn btn-position">{{$t('product.btnPosition')}}</div>
+      <img src="@/assets/images/product/banner.jpg" />
+    </div>
+
+    <div class="box bottom-space">
+      <div class="rule-btn-out-group" ref="ruleBtnGroup">
+        <div class="rule-btn-group" :class="{fix : fixTop}">
+          <div
+            class="rule-btn"
+            :class="{activity : activity == 'product'}"
+            @click="activity = 'product'"
+          >
+            <div>
+              <i class="icon-product"></i> {{$t('product.iconProduct')}}
+            </div>
+            <div class="triangle"></div>
+          </div>
+          <div
+            class="rule-btn"
+            :class="{activity : activity == 'process'}"
+            @click="activity = 'process'"
+          >
+            <div>
+              <i class="icon-process"></i> {{$t('product.iconProcess')}}
+            </div>
+            <div class="triangle"></div>
+          </div>
+          <div
+            class="rule-btn"
+            :class="{activity : activity == 'problem'}"
+            @click="activity = 'problem'"
+          >
+            <div>
+              <i class="icon-problem"></i> {{$t('product.iconProblem')}}
+            </div>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+      <div class="blank-pannel"></div>
+      <div class="rule-container" :class="{activity : activity == 'product'}">
+        <img src="@/assets/images/product/product1.jpg" />
+        <img src="@/assets/images/product/product2.jpg" />
+        <img src="@/assets/images/product/product3.jpg" />
+      </div>
+      <div class="rule-container" :class="{activity : activity == 'process'}">
+        <img src="@/assets/images/product/process.jpg" />
+      </div>
+      <div class="rule-container" :class="{activity : activity == 'problem'}">
+        <img src="@/assets/images/product/question.jpg" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./product.js"></script>
+<style lang="scss" scoped>
+@import "./product.scss";
+</style>

@@ -80,6 +80,14 @@ const routes = [
 		}
 		}
 	},
 	},
 
 
+	{
+		path: '/product',
+		name: 'product',
+		component: () => import('./pages/product/product.vue'),
+		meta: {
+			title: ''
+		}
+	},
 
 
 	{
 	{
 		path: '/demo',
 		path: '/demo',