update: 初始化

src/assets/css/base.css

@@ -86,5 +86,6 @@ textarea:focus {
 body {
   background: url('../images/bg.png') no-repeat center bottom;
   background-size: cover;
+  background-attachment:fixed;
   font-family: 'PingFang SC', 'PingFangSC-Regular', 'Source Han Sans CN', -apple-system, 'Microsoft YaHei', 'Helvetica', 'Arial', Verdana, 'Hiragino Sans GB', 'Wenquanyi Micro Hei', sans-serif;
 }

src/components/layout/Header.vue

@@ -2,7 +2,7 @@
   <header class="app-header">
     <ul class="menu">
       <template v-for="(item, index) in menuList">
-        {{index === 0 ? '' : '|'}}<li :class="{ active: item.path === path}" :key="index" @click="menuSelect(item)">{{item.label}}</li>
+        {{index === 0 ? '' : '|'}}<li :class="{ active: path.includes(item.path)}" :key="index" @click="menuSelect(item)">{{item.label}}</li>
       </template>
     </ul>
   </header>
@@ -45,7 +45,8 @@ export default {
 
 <style lang="scss" scoped>
 .app-header{
-  padding:30px 33px 0;
+  width:1360px;
+  padding:30px 0 0;
 }
 .menu{
   width: 780px;

src/components/layout/Index.vue

@@ -20,6 +20,8 @@ export default {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  width:1360px;
+  margin:0 auto;
 }
 .app-layout-container {
   flex: 1;

src/modules/market-tools/index.js

@@ -8,7 +8,7 @@ const routes = [
         component: () => import('./views/Index.vue')
       }
     ]
-  },
+  }
 ]
 
 export { routes }

src/modules/product-analysis/index.js

@@ -6,9 +6,17 @@ const routes = [
       {
         path: '',
         component: () => import('./views/Index.vue')
+      },
+      {
+        path: 'case-select',
+        component: () => import('./views/CaseSelect.vue')
+      },
+      {
+        path: 'report',
+        component: () => import('./views/Report.vue')
       }
     ]
-  },
+  }
 ]
 
 export { routes }

src/modules/product-analysis/views/CaseSelect.vue

+<template>
+  <div class="product-analysis-case-select">
+    <div class="inner">
+      <div class="left">
+        <div class="case">
+          <el-radio-group v-model="caseSelect">
+            <el-radio :label="item.id" v-for="(item, index) in caseList" :key="index">{{item.label}}</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="right">
+        <ul>
+          <li :class="{ active: item.type === selected }" v-for="(item, index) in list" :key="index" @click="handleClick(item)">{{item.label}}</li>
+        </ul>
+        <el-button type="primary" size="medium" plain style="margin-left:20px;" @click="handleGo">选好了</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      caseList: [
+        { label: '股票型基金案例：广发银行优选股票A', id: '111' },
+        { label: '股票型基金案例：广发银行优选股票B', id: '222' },
+        { label: '股票型基金案例：广发银行优选股票C', id: '333' },
+        { label: '股票型基金案例：广发银行优选股票D', id: '444' }
+      ],
+      caseSelect: '111',
+      list: [
+        { label: '股票型基金', type: '1' },
+        { label: '债券型基金', type: '2' },
+        { label: '混合型基金', type: '3' },
+        { label: '货币性基金', type: '4' },
+        { label: 'FOF基金', type: '5' },
+        { label: 'LOF基金', type: '6' },
+        { label: '指数基金', type: '7' }
+      ],
+      selected: '1'
+    }
+  },
+  methods: {
+    handleClick(item) {
+      this.selected = item.type
+    },
+    handleGo() {
+      this.$router.push({ path: '/product-analysis/report', query: { id: this.caseSelect } })
+    }
+  }
+}
+</script>
+<style scoped>
+.product-analysis-case-select{
+  background:#eaf0f0;
+  width:1340px;
+  height:548px;
+  margin:24px auto 60px;
+  padding-top:32px;
+  position:relative;
+}
+.inner{
+  display: flex;
+  height:500px;
+  width:1080px;
+  margin:0 auto;
+  background:url('@/assets/images/product_analysis_case.png') no-repeat left center;
+}
+.left{
+  width:810px;
+  padding:35px 20px 80px 225px;
+}
+.case{
+  height:100%;
+  width:100%;
+  position:relative;
+}
+.case .el-radio-group{
+  position:absolute;
+  left:50%;
+  top:50%;
+  transform: translate(-50%, -50%);
+}
+.case ::v-deep.el-radio{
+  display:block;
+  margin-bottom:20px;
+}
+.case ::v-deep.el-radio.all .el-radio__input.is-checked .el-radio__inner{
+  border-color:#636363;
+  background:#636363;
+}
+.right{
+  width:280px;
+  margin-top:32px;
+  flex-wrap:wrap;
+  flex-direction: column;
+}
+ul{
+  display:flex;
+  flex-wrap:wrap;
+  flex-direction: row;
+  align-content: flex-start;
+  height:380px;
+}
+li{
+  width:122px;
+  height:40px;
+  font-size:16px;
+  line-height:40px;
+  text-align:center;
+  color:#666;
+  margin:0 0 10px 10px;
+  cursor:pointer;
+  background:#f8f8f8;
+}
+li.active{
+  background:#68B8A4;
+  color:#fff;
+}
+</style>

src/modules/product-analysis/views/Index.vue

 <template>
-  <div class="product-analysis">产品分析</div>
+  <div class="product-analysis">
+    <h5>选择一款金融产品进行分析吧。</h5>
+    <ul class="list">
+      <li class="item" v-for="(item, index) in list" :key="index" @click="handleClick(item)">
+        <span class="btn">{{item.label}}</span>
+        <img :src="item.image" />
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script>
-export default {}
+import fundIcon from '@/assets/images/fund_icon.png'
+import financeIcon from '@/assets/images/finance_icon.png'
+import insuranceIcon from '@/assets/images/insurance_icon.png'
+export default {
+  data() {
+    return {
+      list: [
+        { label: '基金', image: fundIcon, type: '1' },
+        { label: '理财', image: financeIcon, type: '2' },
+        { label: '保险', image: insuranceIcon, type: '3' }
+      ]
+    }
+  },
+  methods: {
+    handleClick(item) {
+      this.$router.push({ path: '/product-analysis/case-select', query: { type: item.type } })
+    }
+  }
+}
 </script>
 
 <style scoped>
 .product-analysis{
-  height:calc(100vh - 86px);
+  background:#fff;
+  width:1340px;
+  height:552px;
+  margin:24px auto 60px;
+}
+h5{
+  font-size:22px;
+  font-weight:normal;
+  text-align:center;
+  color:#666;
+  padding-top:56px;
+}
+.list{
+  display: flex;
+  overflow-x: auto;
+  padding-top:56px;
+}
+.item{
+  width:33.3%;
+  text-align:center;
+}
+.item .btn{
+  display:inline-block;
+  width: 97px;
+  height: 40px;
+  background: #C7D4D5;
+  font-size:22px;
+  line-height:40px;
+  color:#fff;
+  margin-bottom:40px;
+  cursor:pointer;
+}
+.item img{
+  display: block;
+  margin:0 auto;
 }
 </style>

src/modules/product-analysis/views/Report.vue

+<template>
+  <div class="product-analysis-report">
+    <div class="left">pdf文档</div>
+    <div class="right">产品分析报告</div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped>
+.product-analysis-report{
+  background:#fff;
+  width:1340px;
+  margin:24px auto 60px;
+  display:flex;
+  padding:20px 15px 25px; 
+}
+.left{
+  width:500px;
+}
+.right{
+  flex:1;
+  height: 1998px;
+  background: #F8F8F8;
+  border: 1px solid #DCDCDC;
+  border-radius: 10px;
+}
+</style>
\ No newline at end of file

src/modules/user-study/index.js

@@ -8,7 +8,7 @@ const routes = [
         component: () => import('./views/Index.vue')
       }
     ]
-  },
+  }
 ]
 
 export { routes }

src/modules/works-show/index.js

@@ -8,7 +8,7 @@ const routes = [
         component: () => import('./views/Index.vue')
       }
     ]
-  },
+  }
 ]
 
 export { routes }