农业大托管

src/permission.js

@@ -139,14 +139,15 @@ const whiteList = [
   '/newBusinessEntity/map',      //地图
 
   //农业大托管
-  '/agriculturalTrusteeship/index',      //首页
+  '/agriculturalTrusteeship/index',//首页
+  '/agriculturalTrusteeship/login',//登录
   '/agriculturalTrusteeship/insuranceList',//保险列表
   '/agriculturalTrusteeship/insuranceProjectList',//保险产品列表
   '/agriculturalTrusteeship/insuranceProjectDetail',//保险产品详情
   '/agriculturalTrusteeship/societyList',//社会化列表
   '/agriculturalTrusteeship/societyProjectList',//社会化产品列表
   '/agriculturalTrusteeship/societyProjectDetail',//社会化产品详情
-
+  '/agriculturalTrusteeship/shopList',//保险列表首页
 ]
 
 router.beforeEach((to, from, next) => {

src/router/index.js

@@ -4499,6 +4499,15 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/agriculturalTrusteeship/index'], resolve)
   },
+  {
+    path: '/agriculturalTrusteeship/login',
+    name: 'agriculturalTrusteeshipLogin',
+    meta: {
+      title: '农业大托管登录',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/login'], resolve)
+  },
   {
     path: '/agriculturalTrusteeship/insuranceList',
     name: 'agriculturalTrusteeshipInsuranceList',
@@ -4553,6 +4562,15 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/agriculturalTrusteeship/society/societyProjectDetail'], resolve)
   },
+  {
+    path: '/agriculturalTrusteeship/shopList',
+    name: 'agriculturalTrusteeshipShopList',
+    meta: {
+      title: '保险首页',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/shop/shopList'], resolve)
+  },
 ];
 
 

src/views/agriculturalTrusteeship/index.vue

@@ -3,7 +3,7 @@
     <!--  头部开始  -->
     <div class="header">
       <img src="../../../static/images/agriculturalTrusteeship/index/header.png">
-      <div class="header_box">
+      <div class="header_box" @click="$router.push({name:'agriculturalTrusteeshipLogin'})">
         <p>点击登录</p>
         <p>登录才能下单或发布产品哦</p>
       </div>
@@ -322,12 +322,10 @@
                   }
                 }
                 &:nth-child(2){
-                  flex: 1;
                   span{
-                    width: 50%;
                     display: inline-block;
                     text-align: center;
-                    padding: 2PX 2PX;
+                    padding: 2PX 5PX;
                     &:nth-child(1){
                       color: #497CE8;
                       background: #E2E9FD;

src/views/agriculturalTrusteeship/login.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <div class="header">
+      <div class="header_left" @click="onClickLeft">
+        <img src="../../../static/images/agriculturalTrusteeship/return.png">
+      </div>
+      <div class="tit">
+        <p>大托管服务中心</p>
+        <p>登录注册</p>
+      </div>
+    </div>
+    <!--  头部结束  -->
+
+    <!--  登陆选择开始  -->
+    <div class="main" style="display: none;">
+      <div class="nav">
+        <div class="nav_content">
+          <div>
+            <p class="nav_name_01">买家登录</p>
+            <p class="nav_text">登录后支持下单操作</p>
+          </div>
+          <i class="go"></i>
+        </div>
+      </div>
+
+      <div class="nav">
+        <div class="nav_content">
+          <div>
+            <p class="nav_name_02">社会化服务组织登录</p>
+            <p class="nav_text">登录发布社会化服务及相关产品</p>
+          </div>
+          <i class="go"></i>
+        </div>
+      </div>
+
+      <div class="nav">
+        <div class="nav_content">
+          <div>
+            <p class="nav_name_03">保险机构登录</p>
+            <p class="nav_text">登录可发布保险产品</p>
+          </div>
+          <i class="go"></i>
+        </div>
+        <div class="nav_content" style="padding:12.5PX 0;margin:12.5PX 0;border-top: 1px solid #D5D8DE;border-bottom: 1px solid #D5D8DE;">
+          <div>
+            <p class="nav_name_04">贷款机构登录</p>
+            <p class="nav_text">登录可发布贷款产品</p>
+          </div>
+          <i class="go"></i>
+        </div>
+        <div class="nav_content">
+          <div>
+            <p class="nav_name_05">农担机构登录</p>
+            <p class="nav_text">登录可发布农担产品</p>
+          </div>
+          <i class="go"></i>
+        </div>
+      </div>
+    </div>
+    <!--  登陆选择结束  -->
+
+    <!--  登录开始  -->
+    <div class="login_main" :style="{'position': position,'top':top,'transform':transform,'left':left}">
+      <van-tabs v-model="active" animated color="#1E67FF" background="transparent" title-active-color="#1E67FF" @change="tabsChange">
+        <van-tab name="login" title="登录">
+          <van-field v-model="value1" center :border="false" placeholder="请输入用户名" >
+            <template #left-icon>
+              <img src="../../../static/images/agriculturalTrusteeship/login/login_icon_name.png" alt="">
+            </template>
+          </van-field>
+          <van-field v-model="value1" center :border="false" placeholder="请输入密码">
+            <template #left-icon>
+              <img src="../../../static/images/agriculturalTrusteeship/login/login_icon_password.png" alt="">
+            </template>
+          </van-field>
+          <p class="submit_btn" @click="$router.push({name:'agriculturalTrusteeshipShopList'})">登录</p>
+        </van-tab>
+        <van-tab name="register" title="注册">
+
+          <van-field v-model="value1" center :border="false" placeholder="请输入用户名" >
+            <template #left-icon>
+              <img src="../../../static/images/agriculturalTrusteeship/login/login_icon_name.png" alt="">
+            </template>
+          </van-field>
+
+          <van-field v-model="value1" center :border="false" placeholder="请输入密码">
+            <template #left-icon>
+              <img src="../../../static/images/agriculturalTrusteeship/login/login_icon_password.png" alt="">
+            </template>
+          </van-field>
+
+          <van-field v-model="value1" center :border="false" placeholder="请输入用户名" >
+            <template #left-icon>
+              <img src="../../../static/images/agriculturalTrusteeship/login/login_icon_name.png" alt="">
+            </template>
+          </van-field>
+
+          <van-field v-model="value1" center :border="false" placeholder="请输入密码">
+            <template #left-icon>
+              <img src="../../../static/images/agriculturalTrusteeship/login/login_icon_password.png" alt="">
+            </template>
+          </van-field>
+
+          <van-field v-model="value1" center :border="false" placeholder="请输入用户名" >
+            <template #left-icon>
+              <img src="../../../static/images/agriculturalTrusteeship/login/login_icon_name.png" alt="">
+            </template>
+          </van-field>
+
+          <van-field v-model="value1" center :border="false" placeholder="请输入密码">
+            <template #left-icon>
+              <img src="../../../static/images/agriculturalTrusteeship/login/login_icon_password.png" alt="">
+            </template>
+          </van-field>
+
+          <van-field v-model="value1" center :border="false" placeholder="请输入用户名" >
+            <template #left-icon>
+              <img src="../../../static/images/agriculturalTrusteeship/login/login_icon_name.png" alt="">
+            </template>
+          </van-field>
+
+          <van-field v-model="value1" center :border="false" placeholder="请输入密码">
+            <template #left-icon>
+              <img src="../../../static/images/agriculturalTrusteeship/login/login_icon_password.png" alt="">
+            </template>
+          </van-field>
+
+          <p class="submit_btn">登录</p>
+        </van-tab>
+      </van-tabs>
+    </div>
+    <!--  登录结束  -->
+
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  export default {
+    name: "agriculturalTrusteeshipLogin",
+    data() {
+      return {
+        active:0,
+        value1:'',
+        position:'absolute',
+        top: '50%',
+        transform:'translateY(-50%)',
+        left:'4%'
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      tabsChange(name){
+        console.log(name)
+        if ( name == 'register' ){
+          this.position = 'relative';
+          this.top = '40px';
+          this.transform = 'none';
+          this.left = '0';
+        }else if( name == 'login'){
+          this.position = 'absolute';
+          this.top = '50%';
+          this.transform = 'translateY(-50%)';
+          this.left = '4%';
+        }
+      }
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+  background: url("../../../static/images/agriculturalTrusteeship/login/login_bg.png") no-repeat;
+  background-size: 100%;
+  height: 100vh;
+  overflow-y: scroll;
+}
+/*头部*/
+.header{
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  padding: 2vh 4% 2vh;
+  position: relative;
+  .header_left{
+    display: flex;
+    align-items: center;
+    background-color: rgba(0,0,0,0.5);
+    width: 30PX;
+    height: 30PX;
+    justify-content: center;
+    border-radius: 100%;
+  }
+  .tit{
+    font-size: .7rem;
+    color: #334281;
+    text-align: center;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    line-height: 1;
+    p{
+      &:nth-child(1){
+        margin-bottom: 15PX;
+      }
+    }
+  }
+}
+
+/*导航*/
+  .main{
+    position: absolute;
+    top: 20vh;
+    width: 100%;
+  }
+  .nav{
+    background-color: rgba(255,255,255,0.95);
+    width: 92%;
+    margin: 0 auto;
+    padding: 25PX;
+    border-radius: 15PX;
+    margin-top: 15PX;
+    box-shadow: 0px 5PX 10PX rgba(0,0,0,0.16);
+    .nav_content{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      p{
+        &:nth-child(1){
+          font-size: .5rem;
+          color: #334281;
+          padding-left: 25PX;
+        }
+        &:nth-child(2){
+          color: #626C88;
+          margin-top: 10PX;
+        }
+      }
+      .nav_name_01{
+        background: url("../../../static/images/agriculturalTrusteeship/login/login_icon_01.png") no-repeat left center;
+      }
+      .nav_name_02{
+        background: url("../../../static/images/agriculturalTrusteeship/login/login_icon_02.png") no-repeat left center;
+      }
+      .nav_name_03{
+        background: url("../../../static/images/agriculturalTrusteeship/login/login_icon_03.png") no-repeat left center;
+      }
+      .nav_name_04{
+        background: url("../../../static/images/agriculturalTrusteeship/login/login_icon_04.png") no-repeat left center;
+      }
+      .nav_name_05{
+        background: url("../../../static/images/agriculturalTrusteeship/login/login_icon_05.png") no-repeat left center;
+      }
+    }
+    .go{
+      width: 20PX;
+      height: 20PX;
+      display: block;
+      background: url("../../../static/images/agriculturalTrusteeship/login/login_icon_06.png") no-repeat left center;
+    }
+  }
+  .login_main{
+    background-color: rgba(255,255,255,0.95);
+    width: 92%;
+    margin: 0 auto;
+    padding: 25PX;
+    padding-top: 15PX;
+    border-radius: 15PX;
+    box-shadow: 0px 5PX 10PX rgba(0,0,0,0.16);
+    /deep/ .van-field__left-icon{
+      display: flex;
+      align-items: center;
+    }
+    /deep/ .van-cell{
+      background: transparent;
+      padding: 5PX 0;
+      margin-top: 25PX;
+      border-bottom: 1px solid #1E67FF;
+    }
+    .submit_btn{
+      width: 50%;
+      padding: 8PX 0;
+      margin: 25PX auto 0;
+      background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+      text-align: center;
+      font-size: .35rem;
+      color: #ffffff;
+      border-radius: 50PX;
+    }
+  }
+</style>

src/views/agriculturalTrusteeship/shop/shopList.vue

@@ -0,0 +1,316 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <div class="header">
+      <div class="header_left" @click="onClickLeft">
+        <img src="../../../../static/images/agriculturalTrusteeship/return.png">
+        <p>退出登录</p>
+      </div>
+      <p class="header_right">河东河西村</p>
+    </div>
+    <!--  头部结束  -->
+
+    <div class="nav">
+      <div class="content">
+        <van-cell :border="false" center>
+          <template #title>
+            <p class="tt">公司信息</p>
+          </template>
+          <template #right-icon>
+            <img src="../../../../static/images/agriculturalTrusteeship/insurance/shop_icon_edit.png">
+          </template>
+        </van-cell>
+
+        <van-field
+          value="包有钱保险公司"
+          label="机构名称"
+          left-icon="../../../../static/images/agriculturalTrusteeship/insurance/shop_icon_com.png"
+          input-align="right"
+          :border="false"
+          placeholder="显示图标"
+        />
+
+        <van-field
+          value="张菲菲"
+          label="姓名"
+          left-icon="../../../../static/images/agriculturalTrusteeship/login/login_icon_name.png"
+          input-align="right"
+          :border="false"
+          placeholder="显示图标"
+        />
+
+        <van-field
+          value="19855460315"
+          label="联系方式"
+          left-icon="../../../../static/images/agriculturalTrusteeship/insurance/shop_icon_phone.png"
+          input-align="right"
+          :border="false"
+          placeholder="显示图标"
+        />
+
+      </div>
+    </div>
+
+    <!--  内容开始  -->
+    <div class="main">
+      <van-tabs v-model="active" sticky animated>
+        <van-tab title="售卖中">
+
+          <img src="../../../../static/images/agriculturalTrusteeship/insurance/shop_icon_add.png" style="margin: 0 auto;display: block;width: 94%;">
+
+          <van-list
+            v-model="loading"
+            :finished="finished"
+            finished-text="没有更多了"
+          >
+            <!--            @load="onLoad"-->
+            <div class="main_content_right_list" v-for="item in 10" :key="item">
+              <img src="../../../../static/images/agriculturalTrusteeship/index/test.png">
+              <div class="main_content_right_list_content">
+                <p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p>
+                <div class="tab">
+                  <p>健康保险</p>
+                  <div>
+                    <img src="../../../../static/images/agriculturalTrusteeship/insurance/shop_icon_01.png" />
+                    <img src="../../../../static/images/agriculturalTrusteeship/insurance/shop_icon_02.png" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </van-list>
+
+        </van-tab>
+        <van-tab title="已下架">
+
+          <van-list
+            v-model="loading"
+            :finished="finished"
+            finished-text="没有更多了"
+          >
+            <!--            @load="onLoad"-->
+            <div class="main_content_right_list" v-for="item in 10" :key="item">
+              <img src="../../../../static/images/agriculturalTrusteeship/index/test.png">
+              <div class="main_content_right_list_content">
+                <p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p>
+                <div class="tab">
+                  <p>健康保险</p>
+                  <div>
+                    <img src="../../../../static/images/agriculturalTrusteeship/insurance/shop_icon_01.png" />
+                    <img src="../../../../static/images/agriculturalTrusteeship/insurance/shop_icon_03.png" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </van-list>
+
+        </van-tab>
+      </van-tabs>
+    </div>
+    <!--  内容结束  -->
+
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  export default {
+    name: "agriculturalTrusteeshipInsuranceList",
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+      };
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+
+}
+  /*头部*/
+  .header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+    padding: 2vh 4% 2vh;
+    .header_left{
+      display: flex;
+      align-items: center;
+      p{
+        font-size: .4rem;
+        color: #ffffff;
+        line-height: 1;
+        margin-left: 10PX;
+      }
+    }
+    .header_right{
+      font-size: .35rem;
+      background: #ffffff url("../../../../static/images/agriculturalTrusteeship/address.png") no-repeat 10PX center;
+      padding: 2PX 15PX 2PX 25PX;
+      border-radius: 50PX;
+    }
+  }
+
+  .nav{
+    background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+    padding-bottom: 15PX;
+    .tt{
+      font-size: .45rem;
+      color: #334281;
+    }
+    .content{
+      background: #ffffff;
+      width: 92%;
+      margin: 0 auto;
+      box-shadow: 0px 0px 10PX rgba(0,0,0,0.1);
+      border-radius: 25PX;
+      padding: 1.5vh 4%;
+    }
+    /deep/ .van-cell{
+      padding: 0;
+      margin-bottom: 10PX;
+      &:last-child{
+        margin: 0;
+      }
+    }
+  }
+
+  /* 内容 */
+  .main{
+    background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+    /deep/ .van-tabs__nav{
+      border-top-left-radius: 25PX;
+      border-top-right-radius: 25PX;
+      overflow: hidden;
+    }
+    /deep/ .van-tabs__line{
+      background: #334281!important;
+    }
+    /deep/ .van-tab--active{
+      color: #334281;
+    }
+    /deep/ .van-tabs__content{
+      background: #ffffff;
+      padding-top: 2vh;
+    }
+    .search{
+       display: flex;
+       justify-content: space-between;
+       align-items: center;
+       width: 92%;
+       margin: 0PX auto;
+       border: 1px solid #6E93F3;
+       padding: 1PX 1PX 1PX 12PX ;
+       border-radius: 50PX;
+       input{
+         flex: 1;
+         background: transparent;
+         margin-left: 10PX;
+       }
+    }
+    .content{
+      width: 92%;
+      margin: 0 auto;
+      margin-top: 2vh;
+      .content_tt{
+        font-size: .35rem;
+      }
+      .content_con{
+        display: flex;
+        justify-content: space-between;
+        margin-top: 1.5vh;
+        .content_con_left{
+          display: flex;
+          flex-direction:column;
+          justify-content: space-between;
+          p{
+            font-size: .35rem;
+            padding-left: 18PX;
+            &:nth-child(1){
+              background: url("../../../../static/images/agriculturalTrusteeship/insurance/insurance_list_project.png") no-repeat left center;
+            }
+            &:nth-child(2){
+              background: url("../../../../static/images/agriculturalTrusteeship/insurance/insurance_list_name.png") no-repeat left center;
+            }
+            &:nth-child(3){
+              background: url("../../../../static/images/agriculturalTrusteeship/insurance/insurance_list_iphone.png") no-repeat left center;
+            }
+          }
+        }
+        .content_con_right{
+          display: flex;
+          justify-content: end;
+          align-items: center;
+          img{
+            border-radius: 10PX;
+            width: 40%;
+            margin-left: 5%;
+            box-shadow: 0px 5PX 10PX rgba(0,0,0,0.2);
+            &:last-child{
+              width: auto;
+              box-shadow: none;
+            }
+          }
+        }
+      }
+    }
+    .main_content_right_list{
+      display: flex;
+      margin: 0 auto;
+      margin-top: 2vh;
+      width: 92%;
+      img{
+        border-radius: 15PX;
+        margin-right: 4%;
+        width: 30%;
+      }
+      .main_content_right_list_content{
+        display: flex;
+        flex-direction:column;
+        justify-content: space-between;
+        .tt{
+          color: #333333;
+          font-size: .35rem;
+        }
+        .tab{
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          p{
+            flex-shrink: 0;
+            &:nth-child(1){
+              color: #497CE8;
+              background: #E2E9FD;
+              padding: 4PX 10PX;
+              border-radius: 5PX;
+            }
+          }
+          div{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            img{
+              display: block;
+              border-radius: none;
+              margin-right: 0;
+              width: 50%;
+            }
+          }
+        }
+        .name{
+          color: #8F8F8F;
+          background: url("../../../../static/images/agriculturalTrusteeship/index/name_icon.png") no-repeat left center;
+          padding-left: 18PX;
+        }
+      }
+    }
+  }
+</style>

src/views/agriculturalTrusteeship/society/societyProjectList.vue

@@ -243,12 +243,10 @@
                   }
                 }
                 &:nth-child(2){
-                  flex: 1;
                   span{
-                    width: 50%;
                     display: inline-block;
                     text-align: center;
-                    padding: 2PX 2PX;
+                    padding: 2PX 5PX;
                     &:nth-child(1){
                       color: #497CE8;
                       background: #E2E9FD;