GBC首页页面基础代码编写

src/views/GBC/home.vue

@@ -26,13 +26,58 @@
           <span class="menuName">{{ item.title }}</span>
         </div>
       </div>
+
+      <div>
+        <div class="pcenter-title flex pt10 pb10 mr15 justify-content-s align-items-c" style="height: 50px;">
+          <img class="title-img" :src="image1" />
+        </div>
+        <div>
+          <div style="width: 50%;display: inline-block;" v-for="(item,index) in list1" :key="index">
+            <p style="display: flex;justify-content: center;height: 50px;align-items: center;margin: 5px 10px;border:1px solid #eee;border-radius: 5px;background: #56aafd;color: #fff;">
+              {{item.name}}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <div class="pcenter-title flex pt10 pb10 mr15 justify-content-s align-items-c" style="height: 50px;">
+          <img class="title-img" :src="image1" />
+        </div>
+        <div style="padding: 10px;">
+          <p style="line-height: 20px;text-indent: 2em;">国富人寿保险股份有限公司是经原中国银行保险监督管理委员会批准，于2018年6月成立的寿险法人机构。公司由广西首家“世界500强”企业广西投资集团有限公司、广州唯品会信息科技有限公司、湖北三峡华翔集团有限公司、吉安新年企业集团有限公司、北京信中利投资股份有限公司、广西日报传媒集团有限公司、上海恒大建材市场管理股份有限公司、广西名都生态科技发展有限公司8家知名企业共同出资创立。注册资本金19.26亿元，总部位于南宁市，是广西壮族自治区首家寿险法人机构。
+          </p>
+          <p style="line-height: 20px;text-indent: 2em;">国富人寿以“因为国富、所以民安”为企业使命，依法合规诚信经营，积极践行社会责任，以战略协同为依托，推动构建内外部两大协同体系，以客户需求为导向，以领先科技为手段，构建个人营销、银行保险、健康保险、互联网中介等多元化业务渠道，打造专业化销售服务团队，依靠智能客服、智能风控系统，深入进驻、服务社区、企业，积极参与社会保障体系建设，服务经济社会高质量发展。
+          </p>
+          <p style="line-height: 20px;text-indent: 2em;">国富人寿，用心研发实惠产品，用爱提供实在服务，守护幸福美好生活。
+          </p>
+        </div>
+      </div>
     </van-pull-refresh>
+
+    <van-dialog v-model="chooseProductDialogShow" :showConfirmButton="false">
+      <div slot="title">
+        <p style="color: #E9332E;">请选择项目</p>
+      </div>
+      <div class="chooseProductDialog" style="padding: 20px 30px 30px;font-size: 14px;">
+        <van-radio-group v-model="chooseProductRadio">
+          <van-radio v-for="(item,index) in list2" :key="index" :name="item.code" style="margin: 10px;">
+            <span style="margin-left: 20px;">{{item.name}}</span>
+          </van-radio>
+        </van-radio-group>
+      </div>
+      <div style="text-align: center;margin-bottom: 30px;">
+        <van-button round type="danger" size="small" style="padding:0px 35px;font-size: 14px;" @click="chooseProductDialogShow = false">
+          确定
+        </van-button>
+      </div>
+    </van-dialog>
   </div>
 </template>
 
 <script>
 import { homeConfigYB } from '@/api/YB_APP/index'
-import { Swipe, SwipeItem, NoticeBar, Icon, Popup, PullRefresh ,Toast  } from 'vant'
+import { Swipe, SwipeItem, NoticeBar, Icon, Popup, PullRefresh ,Toast, RadioGroup, Radio } from 'vant'
 import config from '@/config'
 import png8 from '@/assets/YB_APP/images/8.png';
 export default {
@@ -44,6 +89,8 @@ export default {
     [Icon.name]: Icon,
     [Popup.name]: Popup,
     [PullRefresh.name]:PullRefresh,
+    [RadioGroup.name]:RadioGroup,
+    [Radio.name]:Radio,
     [Toast.name]:Toast ,
   },
   data() {
@@ -55,6 +102,15 @@ export default {
       activity: [],
       homePageIcon:[],
       isLoading: false,
+      image1: this.$assetsUrl + '/images/goodStart/performanceKmh.png',
+      list1:[
+        {name:'合作单位1'},{name:'合作单位2'},{name:'合作单位3'},{name:'合作单位4'},
+      ],
+      list2:[
+        {name:'项目名称1',code:'111'},{name:'项目名称2',code:'222'},{name:'项目名称3',code:'333'},{name:'项目名称4',code:'444'},
+      ],
+      chooseProductDialogShow: true,
+      chooseProductRadio:'111'
     }
   },
   mounted(){
@@ -182,4 +238,14 @@ export default {
   .top{
     display:flex;justify-content: space-between;margin: 10px;background: #fff;border-radius: 5px;align-items: center;padding: 15px;
   }
+  .title-img {
+    height: 40px;
+  }
+  /deep/ .chooseProductDialog{
+    .van-radio__icon {
+      .van-icon{
+        border: 1px solid red;
+      }
+    }
+  }
 </style>