task 产权交易手机端、阳光村务手机端 升级

src/components/common/nav_bar.vue

@@ -2,7 +2,7 @@
   <div>
     <div
       :class='[background == "1"?"nav-wrap":"nav-wrap1",positionType=="fixed"?"nav-position-fixed":"nav-position-relative"]'
-      :style='{"height": 50+"px","overflow": "hidden"}'
+      :style='{"height": 50+"px","overflow": "hidden","background":backgroundColor}'
     >
       <!-- // 导航栏 中间的标题 -->
       <div class='nav-title' :style='{"line-height": 50+"px"}'>{{title}}</div>
@@ -20,6 +20,7 @@
     name: "nav_bar",
     props: [
       "background",
+      "backgroundColor",
       "positionType",
       "showCapsule",
       "title",

src/components/common/nav_footer.vue

@@ -5,11 +5,11 @@
       <p class="text">首页</p>
     </router-link>
     <router-link to="/project" class="tab" active-class="active">
-      <span class="icon"><van-icon name="notes-o" size="25" /></span>
+      <span class="icon"><van-icon name="notes" size="25" /></span>
       <p class="text">交易项目</p>
     </router-link>
     <router-link to="/user" class="tab" active-class="active">
-      <span class="icon"><van-icon name="contact" size="25" /></span>
+      <span class="icon"><van-icon name="manager-o" size="25" /></span>
       <p class="text">我的</p>
     </router-link>
 <!--    <router-link to="/addressBook" class="tab" active-class="active">-->
@@ -45,12 +45,13 @@ export default {
   -webkit-box-align: center;
   align-items: center;
   position: fixed;
-  padding: 10px 40px;
+  padding: 10Px 0Px;
+  height: 70Px;
   .tab {
     color: #5d656b;
     text-align: center;
     &.active {
-      color: #007b76;
+      color: #0DBCAA;
     }
     .icon {
       padding-bottom: 3px;

src/views/biddingHall/index.vue

@@ -1,21 +1,15 @@
 <template>
   <div>
-    <van-nav-bar
-      title="竞价大厅"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
+    <navBar title="竞价大厅" background="0" positionType="fixed"></navBar>
     <van-search
       v-model="value"
-      shape="round"
-      background="#fff"
+      background="linear-gradient(to top right,#91E1CA,#E0F4E4)"
       placeholder="请输入搜索关键词"
       @search="onSearch"
+      style="margin-top: -1PX;"
     />
     <van-row>
-      <van-dropdown-menu>
+      <van-dropdown-menu active-color="#0EB8A4">
         <van-dropdown-item v-model="value1" :options="projectTypeOption" @change="tabChange"/>
         <van-dropdown-item :value="value2" :title="value2">
           <van-tree-select
@@ -30,73 +24,28 @@
         <van-dropdown-item v-model="value3" :options="option3" @change="tabChange"/>
       </van-dropdown-menu>
     </van-row>
-    <p class="biddingProcessTitle">
-      <img src="../../../static/images/title_icon.png" alt="">
-      竞价流程
-    </p>
-    <div class="biddingProcessContent">
+    <div class="head_box">
+      <p class="biddingProcessTitle">
+        <img src="../../../static/images/transaction_new/bidding/bidding_icon_01.png" alt="">
+        竞价流程
+      </p>
+      <div class="biddingProcessContent">
 
-      <div class="content_li">
-        <div class="biddingProcess">
-          <i></i>
-          <div></div>
-        </div>
-        <p class="biddingProcess_text">查看项目</p>
-      </div>
+          <p class="biddingProcess_text">查看<br/>项目</p>
 
-      <div class="content_li">
-        <div class="biddingProcess">
-          <div></div>
-          <i></i>
-          <div></div>
-        </div>
-        <p class="biddingProcess_text">注册报名</p>
-      </div>
+          <p class="biddingProcess_text">注册<br/>报名</p>
 
-      <div class="content_li">
-        <div class="biddingProcess">
-          <div></div>
-          <i></i>
-          <div></div>
-        </div>
-        <p class="biddingProcess_text">交保证金</p>
-      </div>
+          <p class="biddingProcess_text">交保<br/>证金</p>
 
-      <div class="content_li">
-        <div class="biddingProcess">
-          <div></div>
-          <i></i>
-          <div></div>
-        </div>
-        <p class="biddingProcess_text">资质审核</p>
-      </div>
+          <p class="biddingProcess_text">资质<br/>审核</p>
 
-      <div class="content_li">
-        <div class="biddingProcess">
-          <div></div>
-          <i></i>
-          <div></div>
-        </div>
-        <p class="biddingProcess_text">参与竞价</p>
-      </div>
+          <p class="biddingProcess_text">参与<br/>竞价</p>
 
-      <div class="content_li">
-        <div class="biddingProcess">
-          <div></div>
-          <i></i>
-          <div></div>
-        </div>
-        <p class="biddingProcess_text">成交确认</p>
-      </div>
+          <p class="biddingProcess_text">成交<br/>确认</p>
 
-      <div class="content_li">
-        <div class="biddingProcess" style="justify-content: left;">
-          <div></div>
-          <i></i>
-        </div>
-        <p class="biddingProcess_text">结算交割</p>
-      </div>
+          <p class="biddingProcess_text">结算<br/>交割</p>
 
+      </div>
     </div>
 <!--    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">-->
       <van-list
@@ -115,27 +64,27 @@
               <span style="color: #848484">当前价：</span>
 
               <!--自由竞价竞价中-->
-              <span :style="{'font-size':'14px',color: {'正在报名': '#007E72','等待竞价': '#848484','等待成交': '#848484','已经成交': '#848484','正在竞价': '#c21F3a',}[item.projectShowStatus]}" v-if="item.biddingType=='自由竞价'&&item.deadline>0 && item.projectShowStatus == '正在竞价'">*</span>
+              <span :style="{'font-size':'14px',color: {'正在报名': '#0DBCAA','等待竞价': '#848484','等待成交': '#848484','已经成交': '#2D87E8','正在竞价': 'red',}[item.projectShowStatus]}" v-if="item.biddingType=='自由竞价'&&item.deadline>0 && item.projectShowStatus == '正在竞价'">*</span>
               <!--自由竞价竞价中-->
-              <span :style="{'font-size':'14px',color: {'正在报名': '#007E72','等待竞价': '#848484','等待成交': '#848484','已经成交': '#848484','正在竞价': '#c21F3a',}[item.projectShowStatus]}" v-if="(item.biddingType=='自由竞价'&&item.deadline<=0)&&item.money && item.projectShowStatus == '正在竞价'">*</span>
+              <span :style="{'font-size':'14px',color: {'正在报名': '#0DBCAA','等待竞价': '#848484','等待成交': '#848484','已经成交': '#2D87E8','正在竞价': 'red',}[item.projectShowStatus]}" v-if="(item.biddingType=='自由竞价'&&item.deadline<=0)&&item.money && item.projectShowStatus == '正在竞价'">*</span>
               <!--自由竞价竞价结束(有人出价)-->
-              <span :style="{'font-size':'14px',color: {'正在报名': '#007E72','等待竞价': '#848484','等待成交': '#848484','已经成交': '#848484','正在竞价': '#c21F3a',}[item.projectShowStatus]}" v-if="(item.biddingType=='自由竞价'&&item.deadline<=0)&&item.money && item.projectShowStatus != '正在竞价' && item.projectShowStatus != '等待竞价'">{{item.money}}{{item.priceUnit}}</span>
+              <span :style="{'font-size':'14px',color: {'正在报名': '#0DBCAA','等待竞价': '#848484','等待成交': '#848484','已经成交': '#2D87E8','正在竞价': 'red',}[item.projectShowStatus]}" v-if="(item.biddingType=='自由竞价'&&item.deadline<=0)&&item.money && item.projectShowStatus != '正在竞价' && item.projectShowStatus != '等待竞价'">{{item.money}}{{item.priceUnit}}</span>
               <!--自由竞价竞价结束(无人出价)-->
-              <span :style="{'font-size':'14px',color: {'正在报名': '#007E72','等待竞价': '#848484','等待成交': '#848484','已经成交': '#848484','正在竞价': '#c21F3a',}[item.projectShowStatus]}" v-if="(item.biddingType=='自由竞价'&&item.deadline<=0)&&!item.money">暂无出价</span>
+              <span :style="{'font-size':'14px',color: {'正在报名': '#0DBCAA','等待竞价': '#848484','等待成交': '#848484','已经成交': '#2D87E8','正在竞价': 'red',}[item.projectShowStatus]}" v-if="(item.biddingType=='自由竞价'&&item.deadline<=0)&&!item.money">暂无出价</span>
 
               <!--阶梯竞价竞价中(有人出价)-->
-              <span :style="{'font-size':'14px',color: {'正在报名': '#007E72','等待竞价': '#848484','等待成交': '#848484','已经成交': '#848484','正在竞价': '#c21F3a',}[item.projectShowStatus]}" v-if="(item.biddingType!='自由竞价'&&item.deadline>0)&&item.money">{{item.money}}{{item.priceUnit}}</span>
+              <span :style="{'font-size':'14px',color: {'正在报名': '#0DBCAA','等待竞价': '#848484','等待成交': '#848484','已经成交': '#2D87E8','正在竞价': 'red',}[item.projectShowStatus]}" v-if="(item.biddingType!='自由竞价'&&item.deadline>0)&&item.money">{{item.money}}{{item.priceUnit}}</span>
               <!--阶梯竞价竞价中(无人出价)-->
-              <span :style="{'font-size':'14px',color: {'正在报名': '#007E72','等待竞价': '#848484','等待成交': '#848484','已经成交': '#848484','正在竞价': '#c21F3a',}[item.projectShowStatus]}" v-if="(item.biddingType!='自由竞价'&&item.deadline>0)&&!item.money">暂无出价</span>
+              <span :style="{'font-size':'14px',color: {'正在报名': '#0DBCAA','等待竞价': '#848484','等待成交': '#848484','已经成交': '#2D87E8','正在竞价': 'red',}[item.projectShowStatus]}" v-if="(item.biddingType!='自由竞价'&&item.deadline>0)&&!item.money">暂无出价</span>
               <!--阶梯竞价竞价结束(有人出价)-->
-              <span :style="{'font-size':'14px',color: {'正在报名': '#007E72','等待竞价': '#848484','等待成交': '#848484','已经成交': '#848484','正在竞价': '#c21F3a',}[item.projectShowStatus]}" v-if="(item.biddingType!='自由竞价'&&item.deadline<=0)&&item.money">{{item.money}}{{item.priceUnit}}</span>
+              <span :style="{'font-size':'14px',color: {'正在报名': '#0DBCAA','等待竞价': '#848484','等待成交': '#848484','已经成交': '#2D87E8','正在竞价': 'red',}[item.projectShowStatus]}" v-if="(item.biddingType!='自由竞价'&&item.deadline<=0)&&item.money">{{item.money}}{{item.priceUnit}}</span>
               <!--阶梯竞价竞价结束(无人出价)-->
-              <span :style="{'font-size':'14px',color: {'正在报名': '#007E72','等待竞价': '#848484','等待成交': '#848484','已经成交': '#848484','正在竞价': '#c21F3a',}[item.projectShowStatus]}" v-if="(item.biddingType!='自由竞价'&&item.deadline<=0)&&!item.money">暂无出价</span>
+              <span :style="{'font-size':'14px',color: {'正在报名': '#0DBCAA','等待竞价': '#848484','等待成交': '#848484','已经成交': '#2D87E8','正在竞价': 'red',}[item.projectShowStatus]}" v-if="(item.biddingType!='自由竞价'&&item.deadline<=0)&&!item.money">暂无出价</span>
 
             </p>
             <p :style="{
                 color: {
-                  '正在报名': '#007E72','等待竞价': '#848484','等待成交': '#848484','已经成交': '#848484','正在竞价': '#c21F3a',
+                  '正在报名': '#0DBCAA','等待竞价': '#848484','等待成交': '#848484','已经成交': '#2D87E8','正在竞价': 'red',
                 }[item.projectShowStatus]}">{{item.projectShowStatus}}</p>
           </div>
           <div class="list_li_time">
@@ -167,9 +116,11 @@
 
 <script>
 import {getBiddingList, getDeptList} from "../../api/biddingHall";
+import navBar from "@/components/common/nav_bar.vue";
 
 export default {
   name: "biddingHallApply",
+  components: { navBar },
   data() {
     return {
       //标的物类型
@@ -397,7 +348,13 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
+.head_box{
+  background: linear-gradient(#96E0CF,#CBF1C8);
+  border-radius: 15PX;
+  width: 94%;
+  margin: 2vh auto 0;
+  padding: 1vh 3vw 2vh;
+}
   .list_li{
     width: 94%;
     background: #ffffff;
@@ -439,7 +396,8 @@ export default {
   }
 
 .van-search__content{
-  border:1px solid #007E72;
+  /*border:1px solid #007E72;*/
+  border-radius: 10Px;
 }
 /*>>> .van-dropdown-menu__title{*/
 /*  font-size: 14PX;*/
@@ -466,35 +424,34 @@ export default {
   height:100%;
 }
 .biddingProcessTitle{
-  background-color:#007E72;
-  color:#fff;
+  color:#333333;
   text-align: center;
-  line-height: 0.8rem;
-  font-size: 14PX;
+  font-size: 18PX;
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 5PX 0;
+  justify-content: left;
   img{
     margin-right: 5PX;
-    width: 18PX;
+    width: 25PX;
   }
 }
 .biddingProcess_text{
   /*font-size: 1vh;*/
-  margin-top: 10PX;
-  color: #848484;
+  color: #333333;
+  background: #ffffff;
+  padding: 1vh;
+  line-height: 1;
+  border-radius: 10PX;
 }
 .biddingProcessContent{
-  padding:0.4rem 0;
-  background-color: #ffffff;
+  padding:3vw;
+  background-color: rgba(255,255,255,.5);
   text-align: center;
   display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  .content_li{
-    width: 15%;
-  }
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 10PX;
+  margin-top: 1vh;
 }
 .biddingProcessListLeftCol{
   padding:10px 0.25rem 10px 0.3rem;

src/views/index.vue

@@ -1,41 +1,41 @@
 <template>
   <div class="app-container">
     <van-row>
-      <van-col span="2">
-        <van-image src="../../static/images/index/logo.png" />
-      </van-col>
-      <van-col span="22" style="line-height: 29px;font-size: 20px;">{{titleHead}}</van-col>
+<!--      <van-col span="2">-->
+<!--        <van-image src="../../static/images/index/logo.png" />-->
+<!--      </van-col>-->
+      <van-col span="24" style="line-height: 29px;font-size: 20px;text-align: center;">{{titleHead}}</van-col>
     </van-row>
-    <van-swipe class="my-swipe" :autoplay="3000" height="180" indicator-color="white" :show-indicators="false">
+    <van-swipe class="my-swipe" :autoplay="3000" height="200" indicator-color="white" :show-indicators="false">
       <van-swipe-item v-for="(item,index) in bannerList" :key="index">
-        <van-image :src="item.img" height="180" @click="goDetail(item.id)" />
+        <van-image :src="item.img" height="200" @click="goDetail(item.id)" />
         <p class="bannerTit">{{item.title}}</p>
       </van-swipe-item>
     </van-swipe>
-    <div style="border-radius: 10px;overflow: hidden;">
+    <div style="border-radius: 0.4rem;overflow: hidden;box-shadow: 5px 5px 10px rgba(0,0,0,0.1);">
       <van-grid :border="false" :column-num="3">
         <van-grid-item to="/news/index">
-          <van-image src="../../static/images/icon/icon_new.png" width="40" height="40" />
+          <van-image src="../../static/images/transaction_new/index/index_icon_01.png" width="42" height="44" />
           <p>新闻资讯</p>
         </van-grid-item>
         <van-grid-item to="/biddingHall">
-          <van-image src="../../static/images/icon/icon_bidding.png" width="40" height="40" />
+          <van-image src="../../static/images/transaction_new/index/index_icon_02.png" width="42" height="44" />
           <p>竞价大厅</p>
         </van-grid-item>
         <van-grid-item to="/notice/index">
-          <van-image src="../../static/images/icon/icon_project.png" width="40" height="40" />
+          <van-image src="../../static/images/transaction_new/index/index_icon_03.png" width="42" height="44" />
           <p>项目公告</p>
         </van-grid-item>
         <van-grid-item to="/policy">
-          <van-image src="../../static/images/icon/icon_statute.png" width="40" height="40" />
+          <van-image src="../../static/images/transaction_new/index/index_icon_04.png" width="42" height="44" />
           <p>政策法规</p>
         </van-grid-item>
         <van-grid-item to="/interaction/index">
-          <van-image src="../../static/images/icon/icon_talk.png" width="40" height="40" />
+          <van-image src="../../static/images/transaction_new/index/index_icon_05.png" width="42" height="44" />
           <p>互动交流</p>
         </van-grid-item>
         <van-grid-item to="/supply/index">
-          <van-image src="../../static/images/icon/icon_need.png" width="40" height="40" />
+          <van-image src="../../static/images/transaction_new/index/index_icon_06.png" width="42" height="44" />
           <p>个人供求</p>
         </van-grid-item>
 <!--        <van-grid-item to="/authenticRight">
@@ -44,8 +44,8 @@
         </van-grid-item>-->
       </van-grid>
     </div>
-    <p class="newTit">新闻资讯</p>
-    <div style="border-radius: 10px;overflow: hidden;">
+    <div class="block_box">
+      <p class="block_tt"><i></i>新闻资讯</p>
       <van-list
         v-model="loading"
         :finished="finished"
@@ -58,7 +58,7 @@
           <template #title>
             <p class="newContent">{{item.title}}</p>
           </template>
-          <template #right-icon>
+          <template #icon>
             <van-image :src="item.img" class="search-icon" width="30%" v-if="item.img" />
             <van-image src="../../static/images/zwtpxw.jpg" class="search-icon" width="30%" v-else/>
           </template>
@@ -146,6 +146,36 @@ export default {
 <style scoped lang="scss">
 .app-container {
   padding: 6% 3% 0;
+  background: #F4F8FB url("../../static/images/transaction_new/app_bg.png") no-repeat top left;
+  background-size: 100% auto;
+  height: calc(100vh - 70Px);
+}
+.block_box{
+  width: 100%;
+  margin: 3vw auto;
+  background: #ffffff;
+  padding: 2vh 0;
+  border-radius: 0.4rem;
+  overflow: hidden;
+  background: #ffffff linear-gradient(rgba(13,188,170,.28),#ffffff) no-repeat;
+  background-size: 100% 50Px;
+  .block_tt{
+    font-size: 16Px;
+    display: flex;
+    align-items: center;
+    padding: 0 3vw;
+    line-height: 1;
+    margin-bottom: 2vh;
+    i{
+      display: block;
+      width: 3Px;
+      height: 14Px;
+      background: #0CBEA6;
+      margin-right: 5PX;
+      border-radius: 5PX;
+    }
+    /*border-left: 3Px solid #0CBEA6;*/
+  }
 }
 .bannerTit{
   position: absolute;
@@ -172,7 +202,8 @@ export default {
   width: 100%;
 }
 .van-grid-item p{
-  margin-top: 10px;
+  margin-top: 10Px;
+  font-size: 14Px;
 }
 .newTit{
   font-size: 0.45rem;
@@ -191,6 +222,6 @@ export default {
 }
 .search-icon {
   line-height: inherit;
-  margin-left: 10px;
+  margin-right: 10Px;
 }
 </style>

src/views/interaction/index.vue

@@ -1,27 +1,21 @@
 <template>
   <div class="app-container">
-    <van-nav-bar
-      title="互动交流"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
+    <navBar title="互动交流" background="0" positionType="fixed"></navBar>
     <van-list
       v-model="loading"
       :finished="finished"
       finished-text="没有更多了"
-      style="margin-top: 10px;"
       @load="getList()"
     >
-      <van-cell v-for="(item,index) in interactionList" v-if="item.reply" :key="index">
+      <van-cell v-for="(item,index) in interactionList" v-if="item.reply" :key="index" style="margin-top: 3vw;">
         <template #title>
-          <van-icon name="../../static/images/icon/questions.png" size="18" style="top: 5px;margin-right: 5px;"/>
-          {{item.content}}
+          <p style="display: flex;align-items: center;"><img src="../../../static/images/transaction_new/interaction/interaction_icon_01.png" alt="" style="margin-right: 5px;"/>{{item.content}}</p>
         </template>
         <template #label>
-          <van-icon name="../../static/images/icon/answer.png" size="18" style="top: 5px;margin-right: 5px;"/>{{item.reply}}
-          <p style="text-align: right;">发布时间：{{item.replyTime}}</p>
+          <p style="display: flex;align-items: self-start;">
+            <img src="../../../static/images/transaction_new/interaction/interaction_icon_02.png" alt="" style="margin: 5px 10px 0px 4px;"/>{{item.reply}}
+          </p>
+          <p style="margin-left: 22px;margin-top: 10px;font-size: 12px;">发布时间：{{item.replyTime}}</p>
         </template>
       </van-cell>
     </van-list>
@@ -30,8 +24,10 @@
 
 <script>
 import { interactionList } from "@/api/interaction/index";
+import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "interaction",
+  components: { navBar },
   data() {
     return {
       //是否显示加载
@@ -72,8 +68,15 @@ export default {
 
 <style scoped lang="scss">
 .app-container {
+  height: 100vh;
+  background: #ffffff;
+  overflow-y: scroll;
+}
+.van-cell{
+  border-radius: 10Px;
+  overflow: hidden;
+  width: 94%;
+  margin: 0 auto;
+  background: rgba(13,188,170,0.05);
 }
-  .titleClass{
-
-  }
 </style>

src/views/login.vue

@@ -1,122 +1,240 @@
 <template>
   <div class="app-container" :style="{height:height+'px'}">
-    <van-nav-bar
-      title="登录"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
+<!--    <van-nav-bar-->
+<!--      left-arrow-->
+<!--      fixed-->
+<!--      placeholder-->
+<!--      @click-left="onClickLeft"-->
+<!--      style="background: transparent;"-->
+<!--    />-->
+    <van-icon name="arrow-left" color="#ffffff" size="25" style="padding: 2vh 2.5vw" @click="onClickLeft" />
     <div class="title">
-      <p class="title_one">PROPERTY RIGHT</p>
-      <p class="title_two">TRANSACTION</p>
+<!--      <p class="title_one">PROPERTY RIGHT</p>-->
+<!--      <p class="title_two">TRANSACTION</p>-->
+      <p class="title_three">欢迎登录</p>
       <p class="title_three">农村产权交易平台</p>
     </div>
-    <div class="login-main">
-      <ul class="head_nav clear">
-        <li @click="getCode(),isSmsLogin = false" :class="{ active: !isSmsLogin }">
-          账号登录
-        </li>
-        <li @click="getCodePhone(),isSmsLogin = true" :class="{ active: isSmsLogin }">
-          验证码登录
-        </li>
-      </ul>
-
-      <div class="form_main">
-        <van-form @submit="handleLogin">
-          <div v-show="!isSmsLogin">
-            <van-field
-              v-model="formData.username"
-              name="username"
-              label="用户名"
-              placeholder="用户名"
-            />
-            <van-field
-              v-model="formData.password"
-              type="password"
-              name="password"
-              label="密码"
-              placeholder="密码"
-            />
+    <van-tabs v-model="active" title-active-color="#37d6b1" :swipeable="true" style="background: rgba(255, 255, 255, .2);margin:1.5rem auto 0;width: calc(100% - 40px);border-radius: 20px;overflow: hidden;border: 1px solid #fff;">
+      <van-tab title="密码登录" name="1">
+        <van-form style="padding:30px 0;" v-if="!showMessage" @submit="handleLogin">
+          <van-field
+            v-model="formData.username"
+            placeholder="请输入手机号/账号"
+            left-icon="contact-o"
+            :rules="[{ required: true, message:''  }]"
+          />
+          <van-field
+            v-model="formData.password"
+            type="password"
+            left-icon="edit"
+            style="margin-top: 20px"
+            placeholder="请输入密码"
+            :rules="[{ required: true, message:''  }]"
+          />
+          <div style="display: flex;width: 90%;margin: 20px auto 0;">
             <van-field
               v-model="code"
+              left-icon="shield-o"
               center
               clearable
-              label="验证码"
               placeholder="图形验证码"
+            />
+            <div style="border-radius: 100vh;width: 120px;margin-left: 20px;overflow: hidden;flex-shrink: 0;">
+              <img style="width: 120px;display: block;transform: scale(1.1);" :src="codeUrl" @click="getCode" />
+            </div>
+          </div>
+          <van-checkbox checked-color="#0DBCAA" style="float: left;margin-top:10px;margin-left:20px;" v-model="formData.rememberMe" shape="square">{{showMessage ? "记住手机号" : "记住密码"}}</van-checkbox>
+<!--          <p style="float: right;margin-top:10px;margin-right:20px;color:#1D6FE9 ">忘记密码</p>-->
+          <div class="clear"></div>
+          <div style="margin: 50px 16px 16px;border-radius: 100vh;overflow: hidden;">
+            <van-button block type="info" color="linear-gradient(to right, #67D0DC, #6EE2B4)" native-type="submit">登录</van-button>
+          </div>
 
-            >
-              <template #button>
-                <img class="code-img" :src="codeUrl" @click="getCode" />
-              </template>
-            </van-field>
-            <van-checkbox style="float: left;margin-top:10px;margin-left:20px;" v-model="formData.rememberMe" shape="square">{{showMessage ? "记住手机号" : "记住密码"}}</van-checkbox>
-<!--            <p style="float: right;margin-top:10px;margin-right:20px;color:#1D6FE9 ">忘记密码</p>-->
-            <div class="clear"></div>
+          <div class="reveal-modal-con">
+            <div class="dd_txt">
+              <router-link to="register/index">注册账户</router-link>
+            </div>
+            <!--      <div class="other-login">-->
+            <!--        <p class="desc">—— 更多登录方式 ——</p>-->
+            <!--        <p class="icon-other-logins">-->
+            <!--          <router-link class="wx" to="/"></router-link>-->
+            <!--          <router-link class="rlsb" to="/"></router-link>-->
+            <!--        </p>-->
+            <!--      </div>-->
           </div>
-          <div v-show="isSmsLogin">
-            <van-field
-              v-model="formData.mobile"
-              label="手机号"
-              placeholder="请输入手机号码"
-            />
+        </van-form>
+      </van-tab>
+      <van-tab title="短信登录" name="2">
+        <van-form style="padding:30px 0;" @submit="handleLogin">
+          <van-field
+            v-model="formData.mobile"
+            left-icon="contact-o"
+            name="请输入手机号"
+            placeholder="请输入手机号"
+            :rules="[{ required: true, message: '' }]"
+          />
+          <div style="display: flex;width: 90%;margin: 20px auto 0;">
             <van-field
               v-model="mobileCode"
+              left-icon="shield-o"
               center
               clearable
-              label="验证码"
               placeholder="图形验证码"
-            >
-              <template #button>
-                <img class="code-img" :src="codeUrlPhone" @click="getCodePhone" />
-              </template>
-            </van-field>
+            />
+            <div style="border-radius: 100vh;width: 120px;margin-left: 20px;overflow: hidden;flex-shrink: 0;">
+              <img style="width: 120px;display: block;transform: scale(1.1);" :src="codeUrlPhone" @click="getCodePhone" />
+            </div>
+          </div>
+          <div style="display: flex;width: 90%;margin: 20px auto 0;">
             <van-field
               v-model="formData.smsCode"
+              left-icon="shield-o"
               center
               clearable
-              label="短信验证码"
-              placeholder="请输入短信验证码"
-            >
-              <template #button>
-                <van-button
-                  size="small"
-                  type="primary"
-                  native-type="button"
-                  @click="getSmsCode"
-                  >{{
-                    computeTime > 0 ? `(${computeTime}s)已发送` : "获取验证码"
-                  }}</van-button
-                >
-              </template>
-            </van-field>
+              placeholder="短信验证码"
+            />
+            <div style="border-radius: 100vh;width: 120px;margin-left: 20px;overflow: hidden;flex-shrink: 0;">
+              <van-button
+                type="info"
+                native-type="button"
+                block
+                color="linear-gradient(to right, #97eedc, #5166f5)"
+                @click="getSmsCode"
+              >{{
+                computeTime > 0 ? `(${computeTime}s)已发送` : "获取验证码"
+                }}</van-button>
+            </div>
           </div>
-          <div class="form-submit">
+          <div style="margin: 50px 16px 16px;border-radius: 100vh;overflow: hidden;">
             <van-button
-              round
               block
               type="info"
+              color="linear-gradient(to right, #67D0DC, #6EE2B4)"
               native-type="submit"
-              :loading="loading"
-              >登录</van-button
-            >
+            >登录</van-button>
+            <!--            <p style="text-align: center;margin-top: 20px;color:#878787 " @click="showMessagePop">密码登录</p>-->
+          </div>
+
+          <div class="reveal-modal-con">
+            <div class="dd_txt">
+              <router-link to="register/index">注册账户</router-link>
+            </div>
+            <!--      <div class="other-login">-->
+            <!--        <p class="desc">—— 更多登录方式 ——</p>-->
+            <!--        <p class="icon-other-logins">-->
+            <!--          <router-link class="wx" to="/"></router-link>-->
+            <!--          <router-link class="rlsb" to="/"></router-link>-->
+            <!--        </p>-->
+            <!--      </div>-->
           </div>
         </van-form>
-      </div>
-    </div>
+      </van-tab>
+    </van-tabs>
+<!--    <div class="login-main">-->
+<!--      <ul class="head_nav clear">-->
+<!--        <li @click="getCode(),isSmsLogin = false" :class="{ active: !isSmsLogin }">-->
+<!--          账号登录-->
+<!--        </li>-->
+<!--        <li @click="getCodePhone(),isSmsLogin = true" :class="{ active: isSmsLogin }">-->
+<!--          验证码登录-->
+<!--        </li>-->
+<!--      </ul>-->
 
-    <div class="reveal-modal-con">
-      <div class="dd_txt">
-        <router-link to="register/index">注册账户</router-link>
-      </div>
-<!--      <div class="other-login">-->
-<!--        <p class="desc">—— 更多登录方式 ——</p>-->
-<!--        <p class="icon-other-logins">-->
-<!--          <router-link class="wx" to="/"></router-link>-->
-<!--          <router-link class="rlsb" to="/"></router-link>-->
-<!--        </p>-->
+<!--      <div class="form_main">-->
+<!--        <van-form @submit="handleLogin">-->
+<!--          <div v-show="!isSmsLogin">-->
+<!--            <van-field-->
+<!--              v-model="formData.username"-->
+<!--              name="username"-->
+<!--              label="用户名"-->
+<!--              placeholder="用户名"-->
+<!--            />-->
+<!--            <van-field-->
+<!--              v-model="formData.password"-->
+<!--              type="password"-->
+<!--              name="password"-->
+<!--              label="密码"-->
+<!--              placeholder="密码"-->
+<!--            />-->
+<!--            <van-field-->
+<!--              v-model="code"-->
+<!--              center-->
+<!--              clearable-->
+<!--              label="验证码"-->
+<!--              placeholder="图形验证码"-->
+
+<!--            >-->
+<!--              <template #button>-->
+<!--                <img class="code-img" :src="codeUrl" @click="getCode" />-->
+<!--              </template>-->
+<!--            </van-field>-->
+<!--            <van-checkbox style="float: left;margin-top:10px;margin-left:20px;" v-model="formData.rememberMe" shape="square">{{showMessage ? "记住手机号" : "记住密码"}}</van-checkbox>-->
+<!--&lt;!&ndash;            <p style="float: right;margin-top:10px;margin-right:20px;color:#1D6FE9 ">忘记密码</p>&ndash;&gt;-->
+<!--            <div class="clear"></div>-->
+<!--          </div>-->
+<!--          <div v-show="isSmsLogin">-->
+<!--            <van-field-->
+<!--              v-model="formData.mobile"-->
+<!--              label="手机号"-->
+<!--              placeholder="请输入手机号码"-->
+<!--            />-->
+<!--            <van-field-->
+<!--              v-model="mobileCode"-->
+<!--              center-->
+<!--              clearable-->
+<!--              label="验证码"-->
+<!--              placeholder="图形验证码"-->
+<!--            >-->
+<!--              <template #button>-->
+<!--                <img class="code-img" :src="codeUrlPhone" @click="getCodePhone" />-->
+<!--              </template>-->
+<!--            </van-field>-->
+<!--            <van-field-->
+<!--              v-model="formData.smsCode"-->
+<!--              center-->
+<!--              clearable-->
+<!--              label="短信验证码"-->
+<!--              placeholder="请输入短信验证码"-->
+<!--            >-->
+<!--              <template #button>-->
+<!--                <van-button-->
+<!--                  size="small"-->
+<!--                  type="primary"-->
+<!--                  native-type="button"-->
+<!--                  @click="getSmsCode"-->
+<!--                  >{{-->
+<!--                    computeTime > 0 ? `(${computeTime}s)已发送` : "获取验证码"-->
+<!--                  }}</van-button-->
+<!--                >-->
+<!--              </template>-->
+<!--            </van-field>-->
+<!--          </div>-->
+<!--          <div class="form-submit">-->
+<!--            <van-button-->
+<!--              round-->
+<!--              block-->
+<!--              type="info"-->
+<!--              native-type="submit"-->
+<!--              :loading="loading"-->
+<!--              >登录</van-button-->
+<!--            >-->
+<!--          </div>-->
+<!--        </van-form>-->
 <!--      </div>-->
-    </div>
+<!--    </div>-->
+
+<!--    <div class="reveal-modal-con">-->
+<!--      <div class="dd_txt">-->
+<!--        <router-link to="register/index">注册账户</router-link>-->
+<!--      </div>-->
+<!--&lt;!&ndash;      <div class="other-login">&ndash;&gt;-->
+<!--&lt;!&ndash;        <p class="desc">—— 更多登录方式 ——</p>&ndash;&gt;-->
+<!--&lt;!&ndash;        <p class="icon-other-logins">&ndash;&gt;-->
+<!--&lt;!&ndash;          <router-link class="wx" to="/"></router-link>&ndash;&gt;-->
+<!--&lt;!&ndash;          <router-link class="rlsb" to="/"></router-link>&ndash;&gt;-->
+<!--&lt;!&ndash;        </p>&ndash;&gt;-->
+<!--&lt;!&ndash;      </div>&ndash;&gt;-->
+<!--    </div>-->
   </div>
 </template>
 
@@ -130,6 +248,7 @@ export default {
   name: "login",
   data() {
     return {
+      active:'',
       showMessage:false,
       formData: {
         // username: "admin", //账号
@@ -300,7 +419,7 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 .title{
-  padding-top: 20%;
+  padding: 10% 0;
   width: 88%;
   margin: 0 auto;
 }
@@ -313,12 +432,89 @@ export default {
   font-size: 0.6rem;
 }
 .title_three{
-  color: #FFF;
-  font-size: 0.8rem;
+  color: #333333;
+  font-size: 0.6rem;
 }
-.app-container {
-  background: url("../../static/images/index/registerBg.png") no-repeat;
+/deep/ .van-tabs__content{
+  background: #ffffff;
+  margin-top: -1px;
+  border-radius: 20PX;
+}
+/deep/ .van-tabs__nav{
+  background: transparent;
+}
+/deep/ .van-tab--active{
+  background: #fff;
+}
+/deep/ .van-tab::after{
+  display: none;
+}
+/deep/ .van-tabs__wrap{
+  overflow: initial;
+}
+/deep/ .van-tabs__line{
+  /*background: linear-gradient(to right, #5166f5, #97eedc);*/
+  background: url("../../static/images/transaction_new/tab_border.png") no-repeat center;
+  height: 0.35rem;
+}
+/deep/ .van-tab:nth-child(1)::before{
+  content: "";
+  position: absolute;
+  left: auto;
+  top: 0;
+  right: -19%;
+  bottom: 0;
+  background: url("../../static/images/yinnong/login_tab_icon.png") no-repeat center;
   background-size: 100% 100%;
+  width: 20%;
+}
+/deep/ .van-tab.van-tab--active:nth-child(1)::after{
+  content: "";
+  position: absolute;
+  left: 0;
+  top: auto;
+  right: auto;
+  bottom: -19PX;
+  background: #ffffff;
+  width: 20PX;
+  height: 20PX;
+  display: block;
+}
+/deep/ .van-tab:nth-child(2)::before{
+  content: "";
+  position: absolute;
+  left: -19%;
+  top: 0;
+  right: auto;
+  bottom: 0;
+  background: url("../../static/images/yinnong/login_tab_icon_right.png") no-repeat center;
+  background-size: 100% 100%;
+  width: 20%;
+}
+/deep/ .van-tab.van-tab--active:nth-child(2)::after{
+  content: "";
+  position: absolute;
+  left: auto;
+  top: auto;
+  right: 0;
+  bottom: -19PX;
+  background: #ffffff;
+  width: 20PX;
+  height: 20PX;
+  display: block;
+}
+/deep/ .van-cell{
+  background: #eaeef6;
+  border-radius: 100vh;
+  width: 90%;
+  margin: 0 auto;
+}
+/deep/.van-nav-bar--fixed{
+  background: transparent!important;
+}
+.app-container {
+  background: url("../../static/images/transaction_new/login_bg.png") no-repeat;
+  background-size: 100% auto;
   width: 100%;
   height: 100%;
   .focus-logo {
@@ -381,7 +577,7 @@ export default {
       text-align: center;
       font-size: 28px;
       a {
-        color: #FFF;
+        color: #0DBCAA;
       }
     }
     .other-login {

src/views/news/index.vue

@@ -1,13 +1,7 @@
 <template>
   <div class="app-container">
-    <van-nav-bar
-      title="新闻资讯"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
-    <van-tabs animated type="card" color="#007b76" style="margin-top: 10px;">
+    <navBar title="新闻资讯" background="0" positionType="fixed"></navBar>
+    <van-tabs animated :swipeable="true">
 
       <van-tab title="新闻资讯">
         <van-list
@@ -54,8 +48,10 @@
 
 <script>
 import { newList } from "@/api/index";
+import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "news",
+  components: { navBar },
   data() {
     return {
       //是否显示加载
@@ -138,5 +134,59 @@ export default {
 
 <style scoped lang="scss">
 .app-container {
+  height: 100vh;
+  background: #F4F8FB;
+}
+/deep/ .van-tabs__content{
+  background: transparent;
+  /*border-radius: 20PX;*/
+}
+/deep/ .van-tabs__nav{
+  /*background: transparent;*/
+  padding-bottom: 0;
+}
+/deep/ .van-tab--active{
+  background: #fff;
+}
+/deep/ .van-tab::after{
+  display: none;
+}
+/deep/ .van-tabs__wrap{
+  overflow: initial;
+}
+/deep/ .van-tabs__line{
+  /*background: linear-gradient(to right, #5166f5, #97eedc);*/
+  background: url("../../../static/images/transaction_new/tab_border.png") no-repeat center;
+  height: 0.35rem;
+  bottom: 0;
+}
+/deep/ .van-tab:nth-child(1)::before{
+  content: "";
+  position: absolute;
+  left: auto;
+  top: 0;
+  right: -19%;
+  bottom: 0;
+  background: url("../../../static/images/yinnong/login_tab_icon.png") no-repeat center;
+  background-size: 100% 100%;
+  width: 20%;
+}
+/deep/ .van-tab:nth-child(2)::before{
+  content: "";
+  position: absolute;
+  left: -19%;
+  top: 0;
+  right: auto;
+  bottom: 0;
+  /*background: url("../../../static/images/yinnong/login_tab_icon_right.png") no-repeat center;*/
+  /*background-size: 100% 100%;*/
+  width: 20%;
+}
+.van-cell{
+  border-radius: 15px;
+  overflow: hidden;
+
+  width: 94%;
+  margin: 0 auto;
 }
 </style>

src/views/news/newDetail.vue

@@ -1,37 +1,35 @@
 <template>
   <div class="app-container">
-    <van-nav-bar
-      title="新闻资讯"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
-    <p class="title">{{detail.title}}</p>
-    <van-row style="text-align: center;margin: 0.3rem 0;">
-      <van-col span="2"></van-col>
-      <van-col span="10">{{detail.createTime}}</van-col>
-      <van-col span="10">数据来源：{{detail.createBy}}</van-col>
-      <van-col span="2"></van-col>
-    </van-row>
-    <div id="content"></div>
+    <navBar title="新闻资讯" background="0" positionType="fixed"></navBar>
+    <div class="content">
+      <p class="title">{{detail.title}}</p>
+      <van-row style="text-align: center;margin: 0.3rem 0;">
+        <van-col span="2"></van-col>
+        <van-col span="10">{{detail.createTime}}</van-col>
+        <van-col span="10">数据来源：{{detail.createBy}}</van-col>
+        <van-col span="2"></van-col>
+      </van-row>
+      <div id="content"></div>
 
-    <div v-if="attachmentQueryList.length>0">
-      <van-divider>附件</van-divider>
-      <van-cell :title="item.fileName" :url="'/api'+item.fileUrl" is-link v-for="(item,index) in attachmentQueryList">
-        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
-        <template #icon>
-          <img src="../../assets/images/file_icon.png" style="display: block;width: 24px;margin-right: 5px;" alt="">
-        </template>
-      </van-cell>
+      <div v-if="attachmentQueryList.length>0">
+        <van-divider>附件</van-divider>
+        <van-cell :title="item.fileName" :url="'/api'+item.fileUrl" is-link v-for="(item,index) in attachmentQueryList">
+          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
+          <template #icon>
+            <img src="../../assets/images/file_icon.png" style="display: block;width: 24px;margin-right: 5px;" alt="">
+          </template>
+        </van-cell>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import { newDetails } from "@/api/index";
+import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "newsDetail",
+  components: { navBar },
   data() {
     return {
       detail:'',
@@ -68,6 +66,9 @@ export default {
 
 <style scoped lang="scss">
 .app-container {
+  background: #ffffff;
+}
+.content{
   padding: 0.5rem 5%;
 }
   .title{

src/views/notice/attestationDetail.vue

@@ -1,46 +1,58 @@
 <template>
   <div class="app-container">
-    <van-nav-bar
-      title="鉴证详情"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
+    <navBar title="鉴证详情" background="0" positionType="fixed"></navBar>
 <!--    <p class="title">{{attestationDetail.projectName}}成交公示</p>-->
-    <van-cell title="鉴证书编号" :value="attestationDetail.jzsNumOne+'第'+attestationDetail.jzsNumTwo+'号'" />
-    <van-cell title="项目名称" :value="attestationDetail.projectName" />
-    <van-cell title="项目编号" :value="attestationDetail.projectCode" />
-    <van-cell title="转出方" :value="attestationDetail.outName" />
-    <van-cell title="转出行为批准机构名称" :value="attestationDetail.pzjg" />
-    <van-cell title="法定代表人（转出方）" :value="attestationDetail.legalPerson" />
-    <van-cell title="注册号（身份证）" :value="attestationDetail.idCardNum" />
-    <van-cell title="受让方" :value="attestationDetail.inName" />
-    <van-cell title="单位性质" :value="attestationDetail.companyNature" />
-    <van-cell title="法定代表人（受让方）" :value="attestationDetail.realname" />
-    <van-cell title="注册资本" :value="attestationDetail.companyCapital" />
-    <van-cell title="注册号（身份证）" :value="attestationDetail.companyLicense" />
-    <van-cell title="标的物情况" :value="attestationDetail.szCondition" />
-    <van-cell title="转出面积（数量）" :value="attestationDetail.allCount+attestationDetail.allCountUnit" />
-    <van-cell title="转出期限" :value="attestationDetail.outStartEndTime" />
-    <van-cell title="确权机构" :value="attestationDetail.organization" />
-    <van-cell title="权证编号" :value="attestationDetail.warrantCode" />
-    <van-cell title="转出方式" :value="attestationDetail.rollout" />
-    <van-cell title="交易方式" :value="attestationDetail.dealType" />
-    <van-cell title="交易底价" :value="attestationDetail.price+attestationDetail.unit" />
-    <van-cell title="成交金额" :value="attestationDetail.dealMoneySum+'元'" />
-    <van-cell title="合同签署日期" :value="attestationDetail.contractDate" />
-    <van-cell title="合同编号" :value="attestationDetail.contractCode" />
-    <van-cell title="附记" :value="attestationDetail.jzsRemark" />
-    <van-cell title=" " :value="'农村产权交易鉴证书'" />
-    <van-cell title=" " :value="attestationDetail.jzsSignDate" />
+    <div class="block_box">
+      <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">鉴证详情信息</van-divider>
+      <van-cell title="鉴证书编号" :value="attestationDetail.jzsNumOne+'第'+attestationDetail.jzsNumTwo+'号'" />
+      <van-cell title="项目名称" :value="attestationDetail.projectName" />
+      <van-cell title="项目编号" :value="attestationDetail.projectCode" />
+
+      <van-cell title="标的物情况" :value="attestationDetail.szCondition" />
+      <van-cell title="转出面积（数量）" :value="attestationDetail.allCount+attestationDetail.allCountUnit" />
+      <van-cell title="转出期限" :value="attestationDetail.outStartEndTime" />
+      <van-cell title="确权机构" :value="attestationDetail.organization" />
+      <van-cell title="权证编号" :value="attestationDetail.warrantCode" />
+      <van-cell title="转出方式" :value="attestationDetail.rollout" />
+      <van-cell title="交易方式" :value="attestationDetail.dealType" />
+      <van-cell title="交易底价" :value="attestationDetail.price+attestationDetail.unit" />
+      <van-cell title="成交金额" :value="attestationDetail.dealMoneySum+'元'" />
+      <van-cell title="合同签署日期" :value="attestationDetail.contractDate" />
+      <van-cell title="合同编号" :value="attestationDetail.contractCode" />
+      <van-cell title="附记" :value="attestationDetail.jzsRemark" />
+
+    </div>
+    <div class="block_box gnbg">
+      <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">转出方信息</van-divider>
+      <van-cell title="转出方" :value="attestationDetail.outName" />
+      <van-cell title="转出行为批准机构名称" :value="attestationDetail.pzjg" />
+      <van-cell title="法定代表人（转出方）" :value="attestationDetail.legalPerson" />
+      <van-cell title="注册号（身份证）" :value="attestationDetail.idCardNum" />
+    </div>
+
+    <div class="block_box orbg">
+      <van-divider :style="{ borderColor: '#FD683F', padding: '0 16px' }">受让方信息</van-divider>
+      <van-cell title="受让方" :value="attestationDetail.inName" />
+      <van-cell title="单位性质" :value="attestationDetail.companyNature" />
+      <van-cell title="法定代表人（受让方）" :value="attestationDetail.realname" />
+      <van-cell title="注册资本" :value="attestationDetail.companyCapital" />
+      <van-cell title="注册号（身份证）" :value="attestationDetail.companyLicense" />
+    </div>
+
+    <p class="btm_p">农村产权交易鉴证书</p>
+    <p class="btm_p">{{attestationDetail.jzsSignDate}}</p>
+<!--      <van-cell title=" " :value="'农村产权交易鉴证书'" />-->
+<!--      <van-cell title=" " :value="attestationDetail.jzsSignDate" />-->
+    <div style="height: 2vh;"></div>
   </div>
 </template>
 
 <script>
 import { AttestationDetail } from "@/api/notice/index";
+import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "noticeDetail",
+  components: { navBar },
   data() {
     return {
       attestationDetail:''
@@ -85,8 +97,47 @@ export default {
 
 <style scoped lang="scss">
 .app-container {
-  padding: 0 0 0.5rem;
+  background-color: #F4F8FB;
+  height: calc(100vh - 0Px);
+  overflow-y: scroll;
+}
+.btm_p{
+  text-align: center;
+  font-size: 16PX;
+  color: #91979C;
+  margin-top: 1vh;
+}
+.block_box{
+  width: 94%;
+  margin: 3vw auto;
   background: #ffffff;
+  padding: 3vw 0;
+  border-radius: 15Px;
+  overflow: hidden;
+  .block_tt{
+    font-size: 16Px;
+    display: flex;
+    align-items: center;
+    padding: 0 3vw;
+    line-height: 1;
+    i{
+      display: block;
+      width: 3Px;
+      height: 14Px;
+      background: #0CBEA6;
+      margin-right: 5PX;
+      border-radius: 5PX;
+    }
+    /*border-left: 3Px solid #0CBEA6;*/
+  }
+}
+.gnbg{
+  background: #ffffff linear-gradient(rgba(13,188,170,.28),#ffffff) no-repeat;
+  background-size: 100% 50Px;
+}
+.orbg{
+  background: #ffffff linear-gradient(rgba(253,104,63,.28),#ffffff) no-repeat;
+  background-size: 100% 50Px;
 }
 .title{
   font-size: 0.5rem;

src/views/notice/index.vue

@@ -1,15 +1,9 @@
 <template>
   <div class="app-container">
-    <van-nav-bar
-      title="项目公告"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
-    <van-tabs animated type="card" color="#007b76" style="margin-top: 10px;">
-      <van-tab>
-        <template #title><van-icon name="newspaper-o" size="18" style="top: 4px"/>成交公告</template>
+    <navBar title="项目公告" background="0" positionType="fixed"></navBar>
+    <van-tabs animated :swipeable="true">
+      <van-tab title="成交公告">
+<!--        <template #title><van-icon name="newspaper-o" size="18" style="top: 4px"/>成交公告</template>-->
         <van-list
           v-model="loading"
           :finished="finished"
@@ -17,19 +11,23 @@
           style="margin-top: 10px;"
           @load="getList"
         >
-          <van-cell v-for="(item,index) in noticeList" icon="play" :key="index" :title="item.projectName" :to="{name:'noticeDetailCJ', query: {id:item.id}}">
-            <template #label>
-
+          <van-cell v-for="(item,index) in noticeList" :key="index" :to="{name:'noticeDetailCJ', query: {id:item.id}}" style="margin-bottom: 1vh;">
+            <template #title>
               <div v-if="item.projectStatus == '2'" style="color: #c12e2a;">项目终止</div>
-              <div v-else>项目编号：{{item.projectCode}} <p style="float: right;">{{item.dealTime.substr(0,10)}}</p></div>
-
+              <div v-else style="display: flex;align-items: center;justify-content: space-between;">
+                <p style="display: flex;align-items: center;color: #0DBCAA;"><img src="../../../static/images/transaction_new/notic/notic_icon_01.png" alt="" style="margin-right: 5px;"/>{{item.projectCode}}</p>
+                <p style="color: #AAB1B5;font-size: 14px;">{{item.dealTime.substr(0,10)}}</p>
+              </div>
+            </template>
+            <template #label>
+              <p style="color: #333333;">{{item.projectName}}</p>
             </template>
           </van-cell>
         </van-list>
       </van-tab>
 
-      <van-tab>
-        <template #title><van-icon name="records" size="18" style="top: 4px"/>鉴证公告</template>
+      <van-tab title="鉴证公告">
+<!--        <template #title><van-icon name="records" size="18" style="top: 4px"/>鉴证公告</template>-->
         <van-list
           v-model="attestationLoading"
           :finished="attestationFinished"
@@ -37,16 +35,22 @@
           style="margin-top: 10px;"
           @load="getAttestationList"
         >
-          <van-cell v-for="(item,index) in attestationList" :key="index" icon="play" :title="item.projectName" :to="{name:'attestationDetailCJ', query: {id:item.id}}">
+          <van-cell v-for="(item,index) in attestationList" :key="index" :to="{name:'attestationDetailCJ', query: {id:item.id}}" style="margin-bottom: 1vh;">
+            <template #title>
+              <div style="display: flex;align-items: center;justify-content: space-between;">
+                <p style="display: flex;align-items: center;color: #7368E4;"><img src="../../../static/images/transaction_new/notic/notic_icon_02.png" alt="" style="margin-right: 5px;"/>{{item.jzsNumOne}} - {{item.jzsNumTwo}}</p>
+                <p style="color: #AAB1B5;font-size: 14px;">{{item.jzsSignDate}}</p>
+              </div>
+            </template>
             <template #label>
-              鉴证书编号：[{{item.jzsNumOne}}{{item.jzsNumTwo}}] <p style="float: right;">{{item.jzsSignDate}}</p>
+              <p style="color: #333333;">{{item.projectName}}</p>
             </template>
           </van-cell>
         </van-list>
       </van-tab>
 
-      <van-tab>
-        <template #title><van-icon name="description" size="18" style="top: 4px"/>招标公告</template>
+      <van-tab title="招标公告">
+<!--        <template #title><van-icon name="description" size="18" style="top: 4px"/>招标公告</template>-->
         <van-list
           v-model="inviteTendersLoading"
           :finished="inviteTendersFinished"
@@ -54,16 +58,22 @@
           style="margin-top: 10px;"
           @load="getinviteTendersList"
         >
-          <van-cell v-for="(item,index) in inviteTendersList" :key="index" icon="play" :title="item.projectName" :to="{name:'inviteTendersDetailCJ', query: {id:item.id}}">
+          <van-cell v-for="(item,index) in inviteTendersList" :key="index" :to="{name:'inviteTendersDetailCJ', query: {id:item.id}}" style="margin-bottom: 1vh;">
+            <template #title>
+              <div style="display: flex;align-items: center;justify-content: space-between;">
+                <p style="display: flex;align-items: center;color: #2D87E8;"><img src="../../../static/images/transaction_new/notic/notic_icon_03.png" alt="" style="margin-right: 5px;"/>{{item.tenderName}}</p>
+                <p style="color: #AAB1B5;font-size: 14px;">{{item.logintime}}</p>
+              </div>
+            </template>
             <template #label>
-              招标方：{{item.tenderName}} <p style="float: right;">{{item.logintime}}</p>
+              <p style="color: #333333;">{{item.projectName}}</p>
             </template>
           </van-cell>
         </van-list>
       </van-tab>
 
-      <van-tab>
-        <template #title><van-icon name="completed" size="18" style="top: 4px"/>招标结果</template>
+      <van-tab title="招标结果">
+<!--        <template #title><van-icon name="completed" size="18" style="top: 4px"/>招标结果</template>-->
         <van-list
           v-model="winTheBiddingLoading"
           :finished="winTheBiddingFinished"
@@ -71,10 +81,10 @@
           style="margin-top: 10px;"
           @load="getwinTheBiddingList"
         >
-          <van-cell v-for="(item,index) in winTheBiddingList" :key="index" icon="play" :title="item.projectName" :to="{name:'winTheBiddingDetailCJ', query: {id:item.id}}">
+          <van-cell v-for="(item,index) in winTheBiddingList" :key="index" :title="item.projectName" :to="{name:'winTheBiddingDetailCJ', query: {id:item.id}}" style="margin-bottom: 1vh;position:relative;">
             <template #label>
-              <div v-if="item.dealType=='1'">
-                中标方：{{item.assignee}} <p style="float: right;">{{item.dealTime}}</p>
+              <div v-if="item.dealType=='1'" style="display: flex;justify-content: space-between;align-items: center;">
+                中标方：{{item.assignee}} <p>{{item.dealTime}}</p>
               </div>
 
               <div v-else-if="item.dealType=='3'">
@@ -85,7 +95,15 @@
                 <p style="color: #c12e2a;">招标失败</p>
               </div>
             </template>
+
+            <template #right-icon>
+              <div style="width: 5%;">
+                <img src="../../../static/images/transaction_new/notic/notic_icon_04.png" style="position:absolute;right: 0;top: 0;height: 100%;" alt="">
+              </div>
+            </template>
+
           </van-cell>
+
         </van-list>
       </van-tab>
     </van-tabs>
@@ -94,8 +112,10 @@
 
 <script>
 import { noticeList , Attestation , tenderList , winList } from "@/api/notice/index";
+import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "notice",
+  components: { navBar },
   data() {
     return {
       //是否显示加载
@@ -231,8 +251,59 @@ export default {
 
 <style scoped lang="scss">
 .app-container {
+  height: 100vh;
+  background: #F4F8FB;
+}
+/deep/ .van-tabs__content{
+  background: transparent;
+  /*border-radius: 20PX;*/
+}
+/deep/ .van-tabs__nav{
+  /*background: transparent;*/
+  padding-bottom: 0;
+}
+/deep/ .van-tab--active{
+  background: #fff;
 }
-  .titleClass{
+/deep/ .van-tab::after{
+  display: none;
+}
+/deep/ .van-tabs__wrap{
+  overflow: initial;
+}
+/deep/ .van-tabs__line{
+  /*background: linear-gradient(to right, #5166f5, #97eedc);*/
+  background: url("../../../static/images/transaction_new/tab_border.png") no-repeat center;
+  height: 0.35rem;
+  bottom: 0;
+}
+/deep/ .van-tab:nth-child(1)::before{
+  content: "";
+  position: absolute;
+  left: auto;
+  top: 0;
+  right: -19%;
+  bottom: 0;
+  background: url("../../../static/images/yinnong/login_tab_icon.png") no-repeat center;
+  background-size: 100% 100%;
+  width: 20%;
+}
+/deep/ .van-tab:nth-child(2)::before{
+  content: "";
+  position: absolute;
+  left: -19%;
+  top: 0;
+  right: auto;
+  bottom: 0;
+  /*background: url("../../../static/images/yinnong/login_tab_icon_right.png") no-repeat center;*/
+  /*background-size: 100% 100%;*/
+  width: 20%;
+}
+.van-cell{
+  border-radius: 10Px;
+  overflow: hidden;
 
-  }
+  width: 94%;
+  margin: 0 auto;
+}
 </style>

src/views/notice/inviteTendersDetail.vue

@@ -1,55 +1,55 @@
 <template>
   <div class="app-container">
-    <van-nav-bar
-      title="招标公告"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
+    <navBar title="招标公告" background="0" positionType="fixed"></navBar>
 <!--    <p class="title">{{attestationDetail.projectName}}</p>-->
-    <van-cell title="项目编号" :value="attestationDetail.tenderCode" />
-    <van-cell title="招标评审时间" :value="attestationDetail.revieveAt" />
-    <van-cell title="招标评审地点" :value="attestationDetail.revieveAddress" />
-    <van-cell title="招标方名称" :value="attestationDetail.tenderName" />
-    <van-cell title="资金来源" :value="attestationDetail.moneySource" />
-    <van-cell title="招标代理公司" :value="attestationDetail.agentName" />
-    <van-cell title="招标方联系人" :value="attestationDetail.linkman" />
-    <van-cell title="招标方联系电话" :value="attestationDetail.linkphone" />
-    <van-cell title="联系地址" :value="attestationDetail.linkaddress" />
-    <van-cell title="招标方意见" :value="attestationDetail.tenderOpinion" />
-    <van-cell title="代理公司意见" :value="attestationDetail.agentOpinion" />
-    <van-cell title="建设地点" :value="attestationDetail.address" />
-    <van-cell title="建设工期" :value="attestationDetail.timeLimit" />
-    <van-cell title="项目规模" :value="attestationDetail.scale" />
-    <van-cell title="招标内容" :value="attestationDetail.tenderContent" />
-    <van-cell title="投标人要求" :value="attestationDetail.condition" />
-<!--    <van-cell title="保证金" :value="attestationDetail.deposit" />-->
-    <van-cell title="预算总额(元)" :value="attestationDetail.price" />
-    <van-cell title="竞价方式" :value="attestationDetail.biddingType" />
-    <van-cell v-if="attestationDetail.biddingType == '单价'" title="单价(元)" :value="attestationDetail.tenderPrice" />
-    <van-cell v-if="attestationDetail.biddingType == '单价'" title="数量单位" :value="attestationDetail.priceUnit" />
-    <van-cell v-if="attestationDetail.biddingType == '单价'" title="数量/面积" :value="attestationDetail.areaCount" />
-    <van-cell title="项目登记日期" :value="attestationDetail.logintime" />
-    <van-cell title="招标书领取开始日期" :value="attestationDetail.startTime" />
-    <van-cell title="招标书领取结束日期" :value="attestationDetail.stopTime" />
+    <div class="block_box">
+      <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">招标详情信息</van-divider>
+      <van-cell title="项目编号" :value="attestationDetail.tenderCode" />
+      <van-cell title="招标评审时间" :value="attestationDetail.revieveAt" />
+      <van-cell title="招标评审地点" :value="attestationDetail.revieveAddress" />
+      <van-cell title="招标方名称" :value="attestationDetail.tenderName" />
+      <van-cell title="资金来源" :value="attestationDetail.moneySource" />
+      <van-cell title="招标代理公司" :value="attestationDetail.agentName" />
+      <van-cell title="招标方联系人" :value="attestationDetail.linkman" />
+      <van-cell title="招标方联系电话" :value="attestationDetail.linkphone" />
+      <van-cell title="联系地址" :value="attestationDetail.linkaddress" />
+      <van-cell title="招标方意见" :value="attestationDetail.tenderOpinion" />
+      <van-cell title="代理公司意见" :value="attestationDetail.agentOpinion" />
+      <van-cell title="建设地点" :value="attestationDetail.address" />
+      <van-cell title="建设工期" :value="attestationDetail.timeLimit" />
+      <van-cell title="项目规模" :value="attestationDetail.scale" />
+      <van-cell title="招标内容" :value="attestationDetail.tenderContent" />
+      <van-cell title="投标人要求" :value="attestationDetail.condition" />
+  <!--    <van-cell title="保证金" :value="attestationDetail.deposit" />-->
+      <van-cell title="预算总额(元)" :value="attestationDetail.price" />
+      <van-cell title="竞价方式" :value="attestationDetail.biddingType" />
+      <van-cell v-if="attestationDetail.biddingType == '单价'" title="单价(元)" :value="attestationDetail.tenderPrice" />
+      <van-cell v-if="attestationDetail.biddingType == '单价'" title="数量单位" :value="attestationDetail.priceUnit" />
+      <van-cell v-if="attestationDetail.biddingType == '单价'" title="数量/面积" :value="attestationDetail.areaCount" />
+      <van-cell title="项目登记日期" :value="attestationDetail.logintime" />
+      <van-cell title="招标书领取开始日期" :value="attestationDetail.startTime" />
+      <van-cell title="招标书领取结束日期" :value="attestationDetail.stopTime" />
+    </div>
 
-    <van-divider>附件</van-divider>
-
-    <van-cell :title="item.fileName" :url="'/api'+item.fileUrl" is-link v-for="(item,index) in attachmentQueryList">
-      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
-      <template #icon>
-        <img src="../../assets/images/file_icon.png" style="display: block;width: 24px;margin-right: 5px;" alt="">
-      </template>
-    </van-cell>
+    <div class="block_box">
+      <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">相关附件</van-divider>
+      <van-cell :title="item.fileName" :url="'/api'+item.fileUrl" is-link v-for="(item,index) in attachmentQueryList">
+        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
+        <template #icon>
+          <img src="../../assets/images/file_icon.png" style="display: block;width: 24px;margin-right: 5px;" alt="">
+        </template>
+      </van-cell>
+    </div>
 
   </div>
 </template>
 
 <script>
 import { tenderDetail, attachmentQuery } from "@/api/notice/index";
+import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "noticeDetail",
+  components: { navBar },
   data() {
     return {
       attestationDetail:'',
@@ -91,8 +91,33 @@ export default {
 
 <style scoped lang="scss">
 .app-container {
-  padding: 0 0 0.5rem;
+  background-color: #F4F8FB;
+  height: calc(100vh - 0Px);
+  overflow-y: scroll;
+}
+.block_box{
+  width: 94%;
+  margin: 3vw auto;
   background: #ffffff;
+  padding: 3vw 0;
+  border-radius: 15Px;
+  overflow: hidden;
+  .block_tt{
+    font-size: 16Px;
+    display: flex;
+    align-items: center;
+    padding: 0 3vw;
+    line-height: 1;
+    i{
+      display: block;
+      width: 3Px;
+      height: 14Px;
+      background: #0CBEA6;
+      margin-right: 5PX;
+      border-radius: 5PX;
+    }
+    /*border-left: 3Px solid #0CBEA6;*/
+  }
 }
 .title{
   font-size: 0.5rem;

src/views/notice/noticeDetail.vue

@@ -1,46 +1,46 @@
 <template>
   <div class="app-container">
-    <van-nav-bar
-      title="项目公告"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
-    <van-cell title="项目名称" :value="noticeDetail.projectName" />
+    <navBar title="项目公告" background="0" positionType="fixed"></navBar>
+    <div class="block_box">
 
-    <van-cell v-if="noticeDetail.projectStatus == '2'" title="终止原因" type="textarea" :value="noticeDetail.terminateReason" />
-    <template v-else>
-    <van-cell title="项目编号" :value="noticeDetail.projectCode" />
-    <van-cell title="转出方式" :value="noticeDetail.rollout" />
-    <van-cell title="交易方式" :value="noticeDetail.dealType" />
-    <van-cell title="成交时间" :value="noticeDetail.dealTime" />
-    <van-cell title="标的区域" :value="noticeDetail.deptName" />
-    <van-cell title="转出方" :value="noticeDetail.outName" />
-    <van-cell title="受让方" :value="noticeDetail.memberType == 1 ? noticeDetail.realname:noticeDetail.companyName" />
-    <van-cell title="公示开始时间" :value="noticeDetail.dealPublicityStartTime" />
-    <van-cell title="公示结束时间" :value="noticeDetail.dealPublicityStopTime" />
-    <van-cell title="转出面积/数量" :value="noticeDetail.allCount+noticeDetail.allCountUnit" />
-    <van-cell title="转出年限" :value="noticeDetail.outStartTime+'至'+noticeDetail.outStopTime" />
-    <van-cell title="成交价格" :value="noticeDetail.dealMoney+noticeDetail.unit" />
-    <van-cell title="成交金额" :value="noticeDetail.dealMoneySum" />
-    </template>
-    <div v-if="noticeDetail.projectStatus == '2'">
-      <van-divider>附件</van-divider>
-      <van-cell :title="item.fileName" :url="'/api'+item.fileUrl" is-link v-for="(item,index) in attachmentQueryList">
-        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
-        <template #icon>
-          <img src="../../assets/images/file_icon.png" style="display: block;width: 24px;margin-right: 5px;" alt="">
-        </template>
-      </van-cell>
+      <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">项目信息</van-divider>
+      <van-cell title="项目名称" :value="noticeDetail.projectName" />
+
+      <van-cell v-if="noticeDetail.projectStatus == '2'" title="终止原因" type="textarea" :value="noticeDetail.terminateReason" />
+      <template v-else>
+      <van-cell title="项目编号" :value="noticeDetail.projectCode" />
+      <van-cell title="转出方式" :value="noticeDetail.rollout" />
+      <van-cell title="交易方式" :value="noticeDetail.dealType" />
+      <van-cell title="成交时间" :value="noticeDetail.dealTime" />
+      <van-cell title="标的区域" :value="noticeDetail.deptName" />
+      <van-cell title="转出方" :value="noticeDetail.outName" />
+      <van-cell title="受让方" :value="noticeDetail.memberType == 1 ? noticeDetail.realname:noticeDetail.companyName" />
+      <van-cell title="公示开始时间" :value="noticeDetail.dealPublicityStartTime" />
+      <van-cell title="公示结束时间" :value="noticeDetail.dealPublicityStopTime" />
+      <van-cell title="转出面积/数量" :value="noticeDetail.allCount+noticeDetail.allCountUnit" />
+      <van-cell title="转出年限" :value="noticeDetail.outStartTime+'至'+noticeDetail.outStopTime" />
+      <van-cell title="成交价格" :value="noticeDetail.dealMoney+noticeDetail.unit" />
+      <van-cell title="成交金额" :value="noticeDetail.dealMoneySum" />
+      </template>
+      <div v-if="noticeDetail.projectStatus == '2'">
+        <van-divider>附件</van-divider>
+        <van-cell :title="item.fileName" :url="'/api'+item.fileUrl" is-link v-for="(item,index) in attachmentQueryList">
+          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
+          <template #icon>
+            <img src="../../assets/images/file_icon.png" style="display: block;width: 24px;margin-right: 5px;" alt="">
+          </template>
+        </van-cell>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
   import {attachmentQuery, noticeDetails} from "@/api/notice/index";
+  import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "noticeDetail",
+  components: { navBar },
   data() {
     return {
       noticeDetail:'',
@@ -93,8 +93,33 @@ export default {
 <style scoped lang="scss">
 .app-container {
   padding: 0 0 0.5rem;
-  background: #ffffff;
+  background-color: #F4F8FB;
+  height: calc(100vh - 50px);
 }
+.block_box{
+   width: 94%;
+   margin: 3vw auto;
+   background: #ffffff;
+   padding: 3vw 0;
+   border-radius: 15Px;
+   overflow: hidden;
+   .block_tt{
+     font-size: 16Px;
+     display: flex;
+     align-items: center;
+     padding: 0 3vw;
+     line-height: 1;
+     i{
+       display: block;
+       width: 3Px;
+       height: 14Px;
+       background: #0CBEA6;
+       margin-right: 5PX;
+       border-radius: 5PX;
+     }
+     /*border-left: 3Px solid #0CBEA6;*/
+   }
+ }
 .title{
   font-size: 0.5rem;
   margin-bottom: 0.5rem;

src/views/notice/winTheBiddingDetail.vue

@@ -1,63 +1,61 @@
 <template>
   <div class="app-container">
-    <van-nav-bar
-      title="招标结果"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
 <!--    <p class="title">{{attestationDetail.projectName}}</p>-->
+    <navBar title="招标结果" background="0" positionType="fixed"></navBar>
+    <div class="block_box">
+      <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">招标结果信息</van-divider>
+      <van-cell title="项目名称" :value="attestationDetail.projectName" />
+      <van-cell title="招标方名称" :value="attestationDetail.tenderName" />
+      <div v-if="attestationDetail.dealType == '成功'">
+        <van-cell title="中标人" :value="attestationDetail.assignee" />
+        <van-cell title="建设单位" :value="attestationDetail.bulidPart" />
+        <van-cell title="项目负责人" :value="attestationDetail.partLinkman" />
+        <van-cell title="中标金额(元)" :value="attestationDetail.price" />
 
-    <van-cell title="项目名称" :value="attestationDetail.projectName" />
-    <van-cell title="招标方名称" :value="attestationDetail.tenderName" />
-    <div v-if="attestationDetail.dealType == '成功'">
-      <van-cell title="中标人" :value="attestationDetail.assignee" />
-      <van-cell title="建设单位" :value="attestationDetail.bulidPart" />
-      <van-cell title="项目负责人" :value="attestationDetail.partLinkman" />
-      <van-cell title="中标金额(元)" :value="attestationDetail.price" />
+        <van-cell title="竟价方式" :value="attestationDetail.biddingType" />
+        <van-cell v-if="attestationDetail.biddingType == '单价'" title="中标单价(元)" :value="attestationDetail.transactionPrice" />
+        <van-cell v-if="attestationDetail.biddingType == '单价'" title="数量/面积" :value="attestationDetail.areaCount" />
+        <van-cell v-if="attestationDetail.biddingType == '单价'" title="数量单位" :value="attestationDetail.priceUnit" />
 
-      <van-cell title="竟价方式" :value="attestationDetail.biddingType" />
-      <van-cell v-if="attestationDetail.biddingType == '单价'" title="中标单价(元)" :value="attestationDetail.transactionPrice" />
-      <van-cell v-if="attestationDetail.biddingType == '单价'" title="数量/面积" :value="attestationDetail.areaCount" />
-      <van-cell v-if="attestationDetail.biddingType == '单价'" title="数量单位" :value="attestationDetail.priceUnit" />
+        <van-cell title="中标日期" :value="attestationDetail.dealTime" />
+        <van-cell title="公示开始日期" :value="attestationDetail.startTime" />
+        <van-cell title="公示结束日期" :value="attestationDetail.stopTime" />
+        <van-divider>附件</van-divider>
 
-      <van-cell title="中标日期" :value="attestationDetail.dealTime" />
-      <van-cell title="公示开始日期" :value="attestationDetail.startTime" />
-      <van-cell title="公示结束日期" :value="attestationDetail.stopTime" />
-      <van-divider>附件</van-divider>
+          <van-cell :title="item.fileName" :url="'/api'+item.fileUrl" is-link v-for="(item,index) in attachmentQueryList">
+            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
+            <template #icon>
+              <img src="../../assets/images/file_icon.png" style="display: block;width: 24px;margin-right: 5px;" alt="">
+            </template>
+          </van-cell>
+      </div>
 
+      <div v-if="attestationDetail.dealType == '变更'">
+        <van-cell title="变更说明" :value="attestationDetail.changeRecord" />
+        <van-divider>附件</van-divider>
         <van-cell :title="item.fileName" :url="'/api'+item.fileUrl" is-link v-for="(item,index) in attachmentQueryList">
           <!-- 使用 right-icon 插槽来自定义右侧图标 -->
           <template #icon>
             <img src="../../assets/images/file_icon.png" style="display: block;width: 24px;margin-right: 5px;" alt="">
           </template>
         </van-cell>
-    </div>
-
-    <div v-if="attestationDetail.dealType == '变更'">
-      <van-cell title="变更说明" :value="attestationDetail.changeRecord" />
-      <van-divider>附件</van-divider>
-      <van-cell :title="item.fileName" :url="'/api'+item.fileUrl" is-link v-for="(item,index) in attachmentQueryList">
-        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
-        <template #icon>
-          <img src="../../assets/images/file_icon.png" style="display: block;width: 24px;margin-right: 5px;" alt="">
-        </template>
-      </van-cell>
-    </div>
+      </div>
 
-    <div v-else> <!-- 未成功 -->
-      <van-cell title="中标情况" :value="attestationDetail.dealType" />
-      <van-cell title="未中标原因" :value="attestationDetail.dealFailReason" />
-      <van-cell title="备注" :value="attestationDetail.dealRemark" />
+      <div v-else> <!-- 未成功 -->
+        <van-cell title="中标情况" :value="attestationDetail.dealType" />
+        <van-cell title="未中标原因" :value="attestationDetail.dealFailReason" />
+        <van-cell title="备注" :value="attestationDetail.dealRemark" />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
   import {attachmentQuery, tenderDetail, tenderWinDetail} from "@/api/notice/index";
+  import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "noticeDetail",
+  components: { navBar },
   data() {
     return {
       attestationDetail:'',
@@ -102,8 +100,33 @@ export default {
 
 <style scoped lang="scss">
 .app-container {
-  padding: 0 0 0.5rem;
+  background-color: #F4F8FB;
+  height: calc(100vh - 0Px);
+  overflow-y: scroll;
+}
+.block_box{
+  width: 94%;
+  margin: 3vw auto;
   background: #ffffff;
+  padding: 3vw 0;
+  border-radius: 15Px;
+  overflow: hidden;
+  .block_tt{
+    font-size: 16Px;
+    display: flex;
+    align-items: center;
+    padding: 0 3vw;
+    line-height: 1;
+    i{
+      display: block;
+      width: 3Px;
+      height: 14Px;
+      background: #0CBEA6;
+      margin-right: 5PX;
+      border-radius: 5PX;
+    }
+    /*border-left: 3Px solid #0CBEA6;*/
+  }
 }
 .title{
   font-size: 0.5rem;

src/views/policy/index.vue

@@ -1,13 +1,7 @@
 <template>
   <div class="app-container">
-    <van-nav-bar
-      title="政策法规"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
-    <van-tabs animated type="card" color="#007b76" style="margin-top: 10px;">
+    <navBar title="政策法规" background="0" positionType="fixed"></navBar>
+    <van-tabs animated :swipeable="true">
 
       <van-tab title="政策法规">
         <van-list
@@ -17,10 +11,18 @@
           style="margin-top: 10px;"
           @load="getList"
         >
-          <van-cell v-for="(item,index) in List" icon="play" :key="index" :title="item.title" :to="{name:'policyDetailCJ', query: {id:item.id}}">
+          <van-cell v-for="(item,index) in List" :key="index" :title="item.title" :to="{name:'policyDetailCJ', query: {id:item.id,type:'1'}}">
+            <template #icon>
+              <img src="../../../static/images/transaction_new/policy/policy_icon_01.png" alt="" style="margin-right: 10px;">
+            </template>
             <template #label>
-              <p style="float: right;">发布时间：{{item.newsTime}}</p>
+              <p><van-icon name="clock-o" color="#AAB1B5" style="margin-right: 5px;" />{{item.newsTime}}</p>
+            </template>
+
+            <template #right-icon>
+              <p class="gr">去查看</p>
             </template>
+
           </van-cell>
         </van-list>
       </van-tab>
@@ -33,9 +35,15 @@
           style="margin-top: 10px;"
           @load="getSecondList"
         >
-          <van-cell v-for="(item,index) in secondList" icon="play" :key="index" :title="item.title" :to="{name:'policyDetailCJ', query: {id:item.id}}">
+          <van-cell v-for="(item,index) in secondList" :key="index" :title="item.title" :to="{name:'policyDetailCJ', query: {id:item.id,type:'2'}}">
+            <template #icon>
+              <img src="../../../static/images/transaction_new/policy/policy_icon_02.png" alt="" style="margin-right: 10px;">
+            </template>
             <template #label>
-              <p style="float: right;">发布时间：{{item.newsTime}}</p>
+              <p><van-icon name="clock-o" color="#AAB1B5" style="margin-right: 5px;" />{{item.newsTime}}</p>
+            </template>
+            <template #right-icon>
+              <p class="or">去查看</p>
             </template>
           </van-cell>
         </van-list>
@@ -49,11 +57,17 @@
           style="margin-top: 10px;"
           @load="getThreeList"
         >
-          <van-cell v-for="(item,index) in threeList" icon="play" :key="index" :title="item.title" :to="{name:'policyDetailCJ', query: {id:item.id}}">
-          <template #label>
-            <p style="float: right;">发布时间：{{item.newsTime}}</p>
-          </template>
-        </van-cell>
+          <van-cell v-for="(item,index) in threeList" :key="index" :title="item.title" :to="{name:'policyDetailCJ', query: {id:item.id,type:'3'}}">
+            <template #icon>
+              <img src="../../../static/images/transaction_new/policy/policy_icon_03.png" alt="" style="margin-right: 10px;">
+            </template>
+            <template #label>
+              <p><van-icon name="clock-o" color="#AAB1B5" style="margin-right: 5px;" />{{item.newsTime}}</p>
+            </template>
+            <template #right-icon>
+              <p class="pur">去查看</p>
+            </template>
+          </van-cell>
         </van-list>
       </van-tab>
 
@@ -63,8 +77,10 @@
 
 <script>
   import { newList } from "@/api/index";
+  import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "policy",
+  components: { navBar },
   data() {
     return {
       //是否显示加载
@@ -158,8 +174,77 @@ export default {
 
 <style scoped lang="scss">
 .app-container {
+  height: 100vh;
+  background: #F4F8FB;
 }
-  .titleClass{
-
+/deep/ .van-tabs__content{
+  background: transparent;
+  /*border-radius: 20PX;*/
+}
+/deep/ .van-tabs__nav{
+  /*background: transparent;*/
+  padding-bottom: 0;
+}
+/deep/ .van-tab--active{
+  background: #fff;
+}
+/deep/ .van-tab::after{
+  display: none;
+}
+/deep/ .van-tabs__wrap{
+  overflow: initial;
+}
+/deep/ .van-tabs__line{
+  /*background: linear-gradient(to right, #5166f5, #97eedc);*/
+  background: url("../../../static/images/transaction_new/tab_border.png") no-repeat center;
+  height: 0.35rem;
+  bottom: 0;
+}
+/deep/ .van-tab:nth-child(1)::before{
+  content: "";
+  position: absolute;
+  left: auto;
+  top: 0;
+  right: -19%;
+  bottom: 0;
+  background: url("../../../static/images/yinnong/login_tab_icon.png") no-repeat center;
+  background-size: 100% 100%;
+  width: 20%;
+}
+/deep/ .van-tab:nth-child(2)::before{
+  content: "";
+  position: absolute;
+  left: -19%;
+  top: 0;
+  right: auto;
+  bottom: 0;
+  /*background: url("../../../static/images/yinnong/login_tab_icon_right.png") no-repeat center;*/
+  /*background-size: 100% 100%;*/
+  width: 20%;
+}
+.van-cell{
+  border-radius: 10Px;
+  overflow: hidden;
+  align-items: center;
+  width: 94%;
+  margin: 0 auto;
+}
+  .gr{
+    color: #0DBCAA;
+    border: 1px solid #0DBCAA;
+    border-radius: 50Px;
+    padding: 0 15Px;
+  }
+  .or{
+    color: #FD683F;
+    border: 1px solid #FD683F;
+    border-radius: 50Px;
+    padding: 0 15Px;
+  }
+  .pur{
+    color: #7368E4;
+    border: 1px solid #7368E4;
+    border-radius: 50Px;
+    padding: 0 15Px;
   }
 </style>

src/views/policy/policyDetail.vue

@@ -1,45 +1,43 @@
 <template>
   <div class="app-container">
-    <van-nav-bar
-      title="新闻详情"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
-    <p class="title">{{detail.title}}</p>
-    <van-row style="text-align: center;margin: 0.3rem 0;">
-      <van-col span="2"></van-col>
-      <van-col span="10">{{detail.createTime}}</van-col>
-      <van-col span="10">数据来源：{{detail.createBy}}</van-col>
-      <van-col span="2"></van-col>
-    </van-row>
-    <div id="content"></div>
+    <navBar :title="type == '1'?'政策法规':type == '2'?'交易规则':type == '3'?'资料下载':''" background="0" positionType="fixed"></navBar>
+    <div class="content">
+      <p class="title">{{detail.title}}</p>
+      <div style="text-align: center;margin: 0.3rem 0;display: flex;justify-content: space-between;color: #AAB1B5;">
+        <p><van-icon name="clock-o" color="#AAB1B5" style="margin-right: 5px;" />{{detail.createTime}}</p>
+        <p>数据来源：{{detail.createBy}}</p>
+      </div>
+      <div id="content"></div>
 
-    <div v-if="attachmentQueryList.length>0">
-      <van-divider>附件</van-divider>
-      <van-cell :title="item.fileName" :url="'/api'+item.fileUrl" is-link v-for="(item,index) in attachmentQueryList">
-        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
-        <template #icon>
-          <img src="../../assets/images/file_icon.png" style="display: block;width: 24px;margin-right: 5px;" alt="">
-        </template>
-      </van-cell>
+      <div v-if="attachmentQueryList.length>0">
+        <van-divider>附件</van-divider>
+        <van-cell :title="item.fileName" :url="'/api'+item.fileUrl" is-link v-for="(item,index) in attachmentQueryList">
+          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
+          <template #icon>
+            <img src="../../assets/images/file_icon.png" style="display: block;width: 24px;margin-right: 5px;" alt="">
+          </template>
+        </van-cell>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import { newDetails } from "@/api/index";
+import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "policyDetail",
+  components: { navBar },
   data() {
     return {
       detail:'',
-      attachmentQueryList:[]
+      attachmentQueryList:[],
+      type:'1'
     };
   },
   created() {
     this.getList();
+    this.type = this.$route.query.type;
   },
   methods: {
     getList(){
@@ -69,6 +67,10 @@ export default {
 
 <style scoped lang="scss">
   .app-container {
+    background: #ffffff;
+    height: 100vh;
+  }
+  .content{
     padding: 0.5rem 5%;
   }
   .title{

src/views/project/index.vue

@@ -2,9 +2,9 @@
   <div class="app-container">
     <van-search v-model="value" placeholder="请输入搜索关键词" @search="onSearch"/>
 
-    <van-tabs v-model="active" color="#007b76" title-active-color="#007b76" @change="tabChange">
+    <van-tabs v-model="active" type="card" color="#0DBCAA" title-active-color="#ffffff" @change="tabChange">
       <van-tab title="供应项目">
-        <van-dropdown-menu>
+        <van-dropdown-menu active-color="#0EB8A4">
           <van-dropdown-item v-model="value1" :options="projectTypeOption" @change="getList('search')"/>
           <van-dropdown-item v-model="value2" :title="value2" ref="item">
             <van-tree-select
@@ -268,31 +268,67 @@ export default {
 
 <style scoped lang="scss">
 .app-container {
+  height: calc(100vh - 70PX) ;
+  background: #F4F8FB;
+  overflow-y: scroll;
+}
+.van-search{
+  background: linear-gradient(to bottom right,#91E1CA,#E0F4E4);
+}
+/deep/ .van-tab{
+  border-radius: 100PX!important;
+  background: #ffffff;
+  border: none;
+}
+/deep/ .van-tabs--card>.van-tabs__wrap{
+  padding: 1vh 0;
+  height: auto;
 }
+/deep/ .van-tabs__nav{
+  background: transparent;
+  border: none;
+  .van-tab{
+    &:nth-child(1){
+      margin-right: 20PX;
+    }
+  }
+}
+
   .title{
     font-size: 0.4rem;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    word-break: break-all;
+    overflow: hidden;
   }
   .type{
     font-size: 0.35rem;
     color: #E7851C;
-    margin-top: 5px;
+    margin-top: 5PX;
   }
   .timeEnd{
-    color: #666666;
-    margin-top: 5px;
+    color: #9A9A9A;
+    margin-top: 5PX;
     font-size: 12PX;
   }
   .money{
-    color: #C21F3A;
+    color: #FA5B5C;
     line-height: 0.5rem;
-    margin-top: 5px;
+    margin-top: 5PX;
   }
   .money span{
-    font-size: 0.5rem;
+    /*font-size: 0.35rem;*/
   }
   .time{
-    color: #666666;
+    color: #9A9A9A;
     line-height: 0.6rem;
-    margin-top: 5px;
+    margin-top: 5PX;
   }
+/deep/ .van-card{
+  width: 94%;
+  margin: 3vw auto 0;
+  border-radius: 10PX;
+  box-shadow: 0 0 10px rgba(0,0,0,.1);
+}
 </style>

src/views/project/projectDetail.vue

@@ -1,13 +1,7 @@
 <template>
   <div class="app-container">
-    <van-nav-bar
-      title="项目详情"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="$router.back(-1)"
-    />
-    <van-tabs scrollspy sticky color="#007b76" >
+    <navBar title="项目详情" background="0" positionType="relative"></navBar>
+    <van-tabs scrollspy sticky >
       <van-tab title="竞拍信息" title-style="font-size:12px;">
 <!--        <van-swipe class="my-swipe" height="235" indicator-color="white" @change="onChange">-->
 <!--          <template v-if="detail.fileUrlList !== undefined &&detail.fileUrlList.length>0">-->
@@ -21,7 +15,7 @@
 <!--          </template>-->
 <!--        </van-swipe>-->
 
-        <van-notice-bar color="#fff" background="#007E72" left-icon="clock-o">
+        <van-notice-bar color="#fff" background="#21B6AB" left-icon="clock-o">
           {{ process }}&nbsp&nbsp&nbsp&nbsp<span id="timeData"></span>
 <!--          <van-count-down ref="countDown" :time="time" format="DD 天 HH 时 mm 分 ss 秒" @change="timerChange" />-->
         </van-notice-bar>
@@ -44,14 +38,12 @@
         </div>
 
         <div class="lead" v-if="((detail.biddingType=='自由竞价' || detail.biddingType=='1')&&detail.projectShowStatus!='正在竞价'&&detail.projectShowStatus!='等待竞价') || (detail.biddingType!='自由竞价' && detail.biddingType!='1')">
-          <van-row >
-            <van-col span="2"><van-image src="../../static/images/icon/phone.png" style="vertical-align: text-top;" /></van-col>
-            <template v-if="biddinglistInformation!=undefined&&biddinglistInformation.length>0">
-              <van-col span="6">{{biddinglistInformation[0].memberId}}</van-col>
-              <van-col span="9">{{biddinglistInformation[0].money}}{{detail.unit}}</van-col>
-              <van-col span="7">领先</van-col>
-            </template>
-          </van-row>
+          <img src="../../../static/images/transaction_new/project/project_icon_01.png" style="display: block;" />
+          <template v-if="biddinglistInformation!=undefined&&biddinglistInformation.length>0">
+            <p>{{biddinglistInformation[0].memberId}}</p>
+            <p>{{biddinglistInformation[0].money}}{{detail.unit}}</p>
+            <p>领先</p>
+          </template>
         </div>
         <div class="detail">
           <van-row>
@@ -84,8 +76,8 @@
         </div>
       </van-tab>
       <van-tab title="标的物介绍" title-style="font-size:12px;">
-        <p class="delTitle">标的物介绍</p>
-        <div class="introduce">
+        <div class="introduce gnbg">
+          <p class="delTitle"><i></i>标的物介绍</p>
           <van-row>
             <van-col span="24" style="color:#333333;font-size: 0.4rem;text-align: center;font-weight: bold;">项目挂牌转出方简况及公告内容</van-col>
           </van-row>
@@ -163,7 +155,7 @@
 
 
           <van-row v-if="detail.projectNumber != '集体资产采购类'">
-            <van-col span="24" style="color:#007E72;">标的物信息</van-col>
+            <van-col span="24" style="color:#0DBCAA;">标的物信息</van-col>
           </van-row>
           <div v-if="detail.projectNumber != '集体资产采购类'" class="project_info" v-for="(item,index) in detail.subjectList" :key="index">
             <van-row>
@@ -175,22 +167,25 @@
         </div>
       </van-tab>
       <van-tab title="标的物图片" title-style="font-size:12px;">
-        <p class="delTitle">标的物图片</p>
-        <template v-if="detail.fileUrlList !== undefined &&detail.fileUrlList.length>0">
-          <van-image v-for="(item,index) in detail.fileUrlList" :key="index" :src="item.fileUrl?'/api'+item.fileUrl:'../../static/images/index/detailImg.png'" style="vertical-align: text-top;" />
-        </template>
-        <template v-else>
-          <van-image src="../../static/images/index/detailImg.png" style="vertical-align: text-top;" />
-        </template>
+        <div class="introduce gnbg">
+          <p class="delTitle"><i></i>标的物图片</p>
+          <template v-if="detail.fileUrlList !== undefined &&detail.fileUrlList.length>0">
+            <img v-for="(item,index) in detail.fileUrlList" :key="index" :src="item.fileUrl?'/api'+item.fileUrl:'../../../static/images/index/detailImg.png'" style="vertical-align: text-top;width: 100%;" />
+          </template>
+          <template v-else>
+            <img src="../../../static/images/index/detailImg.png" style="vertical-align: text-top;width: 100%;" />
+          </template>
+        </div>
       </van-tab>
       <van-tab title="竞买须知" title-style="font-size:12px;">
-        <p class="delTitle">竞买须知</p>
-        <div class="notice" v-html="webConfig">
+        <div class="notice gnbg">
+          <p class="delTitle"><i></i>竞买须知</p>
+          <div v-html="webConfig"></div>
         </div>
       </van-tab>
       <van-tab title="竞价记录" title-style="font-size:12px;">
-        <p class="delTitle">竞价记录</p>
-        <div class="biddingList">
+        <div class="biddingList gnbg">
+          <p class="delTitle"><i></i>竞价记录</p>
           <p v-if="detail.biddingType == '自由竞价' && (detail.projectShowStatus == '正在竞价'||detail.projectShowStatus == '等待竞价')">友情提示：自由竞价方式下，项目结束前不显示竞价记录！</p>
           <table v-else width="100%" cellspacing="0">
             <tr>
@@ -203,7 +198,7 @@
               <td>{{ item.memberId }}</td>
               <td>{{ item.money}}</td>
               <template v-if="index==0">
-                <td style="color:#C21F3A">领先</td>
+                <td style="color:#FF2D2D">领先</td>
               </template>
               <template v-else>
                 <td></td>
@@ -222,7 +217,7 @@
 <!--          <p style="line-height: 0.2rem;color: #999999">提醒</p>-->
 <!--        </van-col>-->
         <van-col span="24">
-          <van-button round color="#C21F3A" block :disabled="isSignup" @click="goSignUp">
+          <van-button round color="linear-gradient(to right,#FD683F,#FF2D2D)" block :disabled="isSignup" @click="goSignUp">
             {{ btnMsg }}<br/>
             <span style="font-size: 10px">保证金￥{{detail.deposit}}</span>
           </van-button>
@@ -239,12 +234,12 @@
         <van-col span="18">
 
           <div style="display: flex;">
-            <van-button round color="#C21F3A" block @click="offer">
+            <van-button round color="linear-gradient(to right,#FD683F,#FF2D2D)" block @click="offer">
               <p>出价</p>
               <p v-if="detail.ladderPrice&&detail.biddingType=='阶梯竞价'">{{price}}{{detail.unit}}</p>
             </van-button>
 
-<!--            <van-button v-if="isFirst == 'Y'" round color="#C21F3A" block @click="offerFirst" style="margin-left: 10px;width: 30%;">-->
+<!--            <van-button v-if="isFirst == 'Y'" round color="#FF2D2D" block @click="offerFirst" style="margin-left: 10px;width: 30%;">-->
 <!--              <p>优先跟价</p>-->
 <!--            </van-button>-->
           </div>
@@ -258,7 +253,7 @@
       <van-image src="../../static/images/icon/success.png"/>
       <p class="popupTit">提醒设置成功</p>
       <p class="popupContent">系统将按要求提醒您竞拍</p>
-      <van-button round color="#C21F3A" block class="iKnow">
+      <van-button round color="#FF2D2D" block class="iKnow">
         我知道了
       </van-button>
       <p class="updatePopup">修改提醒方式</p>
@@ -278,9 +273,11 @@
   } from "../../api/project";
 import {getInfo} from "../../api/login";
 import $ from "jquery";
+  import navBar from "@/components/common/nav_bar.vue";
 
 export default {
   name: "projectDetail",
+  components: { navBar },
   provide(){
     return{
       reload:this.reload
@@ -1088,8 +1085,55 @@ export default {
 
 <style scoped lang="scss">
 .app-container {
+  background: #F4F8FB;
+  height: 100vh;
+  overflow-y: scroll;
+}
+/deep/ .van-tabs__content{
+  background: transparent;
+  /*border-radius: 20PX;*/
+}
+/deep/ .van-tabs__nav{
+  /*background: transparent;*/
+  padding-bottom: 0;
+}
+/deep/ .van-tab--active{
+  background: #fff;
+}
+/deep/ .van-tab::after{
+  display: none;
+}
+/deep/ .van-tabs__wrap{
+  overflow: initial;
+}
+/deep/ .van-tabs__line{
+  /*background: linear-gradient(to right, #5166f5, #97eedc);*/
+  background: url("../../../static/images/transaction_new/tab_border.png") no-repeat center;
+  height: 0.35rem;
+  bottom: 0;
+}
+/deep/ .van-tab:nth-child(1)::before{
+  content: "";
+  position: absolute;
+  left: auto;
+  top: 0;
+  right: -19%;
+  bottom: 0;
+  background: url("../../../static/images/yinnong/login_tab_icon.png") no-repeat center;
+  background-size: 100% 100%;
+  width: 20%;
+}
+/deep/ .van-tab:nth-child(2)::before{
+  content: "";
+  position: absolute;
+  left: -19%;
+  top: 0;
+  right: auto;
+  bottom: 0;
+  /*background: url("../../../static/images/yinnong/login_tab_icon_right.png") no-repeat center;*/
+  /*background-size: 100% 100%;*/
+  width: 20%;
 }
-
 .van-count-down{
   display: inline-block;
   color: #fff;
@@ -1118,21 +1162,23 @@ export default {
 }
 .information{
   background-color: #FFF;
-  margin-top: 0.3rem;
   padding: 0.4rem 0.5rem;
+  width: 94%;
+  margin: 0.3rem auto 0;
+  border-radius: 10PX;
 }
 .van-row{
   line-height: 0.7rem;
 }
 .price{
-  color: #C21F3A;
+  color: #FF2D2D;
 }
 .price span{
   font-size: 0.5rem;
   font-weight: bold;
 }
 .money{
-  color: #C21F3A;
+  color: #FF2D2D;
 }
 .money span{
   font-size: 0.5rem;
@@ -1142,27 +1188,52 @@ export default {
   line-height: 0.7rem;
 }
 .lead{
-  background-color: #FFF;
-  margin-top: 0.3rem;
-  padding: 0.1rem 0.5rem;
-  color: #C21F3A;
+  background: #FFF url("../../../static/images/transaction_new/project/project_icon_02.png") no-repeat center;
+  background-size: 100% 100%;
+  padding: 0.2rem 0.5rem;
+  color: #FF2D2D;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 94%;
+  margin: 0.3rem auto 0;
+  border-radius: 10PX;
 }
 .detail{
   background-color: #FFF;
-  margin-top: 0.3rem;
   padding: 0.2rem 0.5rem;
+  width: 94%;
+  margin: 0.3rem auto 0;
+  border-radius: 10PX;
 }
 .detail span{
   color: #8A8A8A;
 }
 .delTitle{
-  font-size: 0.4rem;
-  color: #007E72;
-  padding: 0.2rem 0.5rem;
+  font-size: 16PX;
+  color: #333333;
+  padding: 0.2rem 0;
+  display: flex;
+  align-items: center;
+  line-height: 1;
+  i{
+    background: #0CBEA6;
+    width: 4PX;
+    height: 14PX;
+    border-radius: 100PX;
+    margin-right: 5PX;
+  }
+}
+.gnbg{
+  background: #ffffff linear-gradient(rgba(13,188,170,.28),#ffffff) no-repeat;
+  background-size: 100% 50Px;
 }
 .introduce{
   padding: 0.2rem 0.5rem 0.5rem;
   background-color: #FFF;
+  width: 94%;
+  margin: 0.3rem auto 0;
+  border-radius: 10PX;
 }
 .introduce span{
   color: #8A8A8A;
@@ -1175,16 +1246,21 @@ export default {
   border-radius: 10px;
 }
 .notice{
-  padding: 0.5rem;
+  padding: 0.2rem 0.5rem 0.5rem;
   background-color: #FFF;
+  width: 94%;
+  margin: 0.3rem auto 0;
+  border-radius: 10PX;
 }
-.notice p{
+.notice div p{
   line-height: 0.7rem;
 }
 .biddingList{
-  padding: 0.5rem;
+  padding: 0.2rem 0.5rem 0.5rem;
   background-color: #FFF;
-  margin-bottom: 0.4rem;
+  width: 94%;
+  margin: 0.3rem auto 0.4rem;
+  border-radius: 10PX;
 }
 .biddingList table{
   text-align: center;
@@ -1194,7 +1270,7 @@ export default {
   padding: 10px 0px;
 }
 .biddingList table tr:first-child td{
-  background-color: #007E72;
+  background-color: #0DBCAA;
   color: #FFF;
 }
 .bottomBtn{
@@ -1212,7 +1288,7 @@ export default {
     padding-top: 1.5rem;
   }
   .popupTit{
-    color: #007E72;
+    color: #0DBCAA;
     font-size: 0.4rem;
     line-height: 0.9rem;
   }
@@ -1223,7 +1299,7 @@ export default {
     margin-top: 1rem;
   }
   .updatePopup{
-    color: #007E72;
+    color: #0DBCAA;
     margin-top: 0.5rem;
   }
 </style>

src/views/project/projectNeedsDetail.vue

@@ -1,65 +1,36 @@
 <template>
   <div class="app-container">
-    <van-nav-bar
-      title="需求项目"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
-    <p class="title">{{noticeDetail.projectName}}</p>
-    <van-row>
-      <van-col>需求项目类别：{{noticeDetail.projectNumber}}</van-col>
-    </van-row>
-    <van-row>
-      <van-col>需求价格描述：{{noticeDetail.price}}</van-col>
-    </van-row>
-    <van-row>
-      <van-col>需求方名称：{{noticeDetail.needname}}</van-col>
-    </van-row>
-    <van-row>
-      <van-col>需求方地址：{{noticeDetail.address}}</van-col>
-    </van-row>
-    <van-row>
-      <van-col>单位性质：{{noticeDetail.company}}</van-col>
-    </van-row>
-    <van-row>
-      <van-col>单位法人：{{noticeDetail.legalPerson}}</van-col>
-    </van-row>
-    <van-row>
-      <van-col>联系人：{{noticeDetail.realname}}</van-col>
-    </van-row>
-    <van-row>
-      <van-col>联系电话：{{noticeDetail.phone}}</van-col>
-    </van-row>
-    <van-row>
-      <van-col>身份证号：{{noticeDetail.idCardNum}}</van-col>
-    </van-row>
-    <van-row>
-      <van-col>邮箱：{{noticeDetail.email}}</van-col>
-    </van-row>
-    <van-row>
-      <van-col>需求开始时间：{{noticeDetail.needStartTime}}</van-col>
-    </van-row>
-    <van-row>
-      <van-col>需求结束时间：{{noticeDetail.needStopTime}}</van-col>
-    </van-row>
-    <van-row>
-      <van-col>用途与经营描述：{{noticeDetail.description}}</van-col>
-    </van-row>
-    <van-row>
-      <van-col>附件图片：</van-col>
-    </van-row>
-    <van-row>
-      <van-col><img :src="'/api'+item.fileUrl" v-for="(item , index) in noticeDetail.attachments" alt="" width="100%"></van-col>
-    </van-row>
+    <navBar title="需求项目" background="0" positionType="fixed"></navBar>
+    <div class="block_box">
+      <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">{{noticeDetail.projectName}}</van-divider>
+      <van-cell title="需求项目类别" :value="noticeDetail.projectNumber" />
+      <van-cell title="需求价格描述" :value="noticeDetail.price" />
+      <van-cell title="需求方名称" :value="noticeDetail.needname" />
+      <van-cell title="需求方地址" :value="noticeDetail.address" />
+      <van-cell title="单位性质" :value="noticeDetail.company" />
+      <van-cell title="单位法人" :value="noticeDetail.legalPerson" />
+      <van-cell title="联系人" :value="noticeDetail.realname" />
+      <van-cell title="联系电话" :value="noticeDetail.phone" />
+      <van-cell title="身份证号" :value="noticeDetail.idCardNum" />
+      <van-cell title="邮箱" :value="noticeDetail.email" />
+      <van-cell title="需求开始时间" :value="noticeDetail.needStartTime" />
+      <van-cell title="需求结束时间" :value="noticeDetail.needStopTime" />
+      <van-cell title="用途与经营描述" :value="noticeDetail.description" />
+
+    </div>
+    <div class="block_box gnbg">
+      <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">附件图片</van-divider>
+      <img :src="'/api'+item.fileUrl" v-for="(item , index) in noticeDetail.attachments" alt="" width="100%">
+    </div>
   </div>
 </template>
 
 <script>
 import { needProject } from "@/api/notice/index";
+import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "noticeDetail",
+  components: { navBar },
   data() {
     return {
       noticeDetail:''
@@ -99,7 +70,37 @@ export default {
 
 <style scoped lang="scss">
 .app-container {
-  padding: 0.5rem 5%;
+  background-color: #F4F8FB;
+  height: calc(100vh - 0Px);
+  overflow-y: scroll;
+}
+.block_box{
+  width: 94%;
+  margin: 3vw auto;
+  background: #ffffff;
+  padding: 3vw 0;
+  border-radius: 15Px;
+  overflow: hidden;
+  .block_tt{
+    font-size: 16Px;
+    display: flex;
+    align-items: center;
+    padding: 0 3vw;
+    line-height: 1;
+    i{
+      display: block;
+      width: 3Px;
+      height: 14Px;
+      background: #0CBEA6;
+      margin-right: 5PX;
+      border-radius: 5PX;
+    }
+    /*border-left: 3Px solid #0CBEA6;*/
+  }
+}
+.gnbg{
+  background: #ffffff linear-gradient(rgba(13,188,170,.28),#ffffff) no-repeat;
+  background-size: 100% 50Px;
 }
 .title{
   font-size: 0.5rem;

src/views/project/signUp.vue

@@ -1,181 +1,181 @@
 <template>
-  <div class="app-container" style="background: #fff;height: 100%">
-    <van-nav-bar
-      title="报名"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="$router.back(-1)"
-    />
-    <van-row>
-      <p class="" style="padding:20px 20px 0px;font-size: 0.4rem">
-        <span>项目名称:</span>
-        <span style="color:#007E72;font-size: 0.45rem;font-weight: bold;">{{ projectName }}</span>
-      </p>
-      <p style="padding:10px 20px 0;font-size: 0.4rem;">
-        <span>缴纳保证金:</span>
-        <span style="color:#C21F3A;font-size: 0.45rem;font-weight: bold;">¥{{ deposit }}</span>
-      </p>
-      <p class="" style="padding:10px 20px 0px;font-size: 0.4rem">
-        <span>保证金缴纳账号:</span>
-        <span style="color:#007E72;font-size: 0.45rem;font-weight: bold;">{{ payAccount }}</span>
-      </p>
-      <p class="" style="padding:10px 20px 0px;font-size: 0.4rem">
-        <span>账户名称:</span>
-        <span style="color:#007E72;font-size: 0.45rem;font-weight: bold;">{{ accountName }}</span>
-      </p>
-      <p class="" style="padding:10px 20px 0px;font-size: 0.4rem;margin-bottom: 20px">
-        <span>开户银行:</span>
-        <span style="color:#007E72;font-size: 0.45rem;font-weight: bold;">{{ bankName }}</span>
-      </p>
-    </van-row>
-    <van-row style="padding:0 20px;">
-      <h2 style="margin-bottom:10px;">1.竞买人条件确认</h2>
-      <p style="margin-bottom:10px;">· 已阅读并知晓：
-        <span style="color:#C21F3A" @click="show1=true">《乳山市农村产权交易项目报名服务协议》</span>
-      </p>
-      <van-dialog v-model="show1" title="乳山市农村产权交易项目报名服务协议" confirmButtonText="关闭">
+  <div class="app-container">
+    <navBar title="报名" background="0" positionType="relative"></navBar>
+    <div class="introduce gnbg">
+      <van-row>
+        <p style="padding:10px 0 0px;font-size: 0.4rem">
+          <span>项目名称:</span>
+          <span style="color:#007E72;font-size: 0.45rem;font-weight: bold;">{{ projectName }}</span>
+        </p>
+        <p style="padding:10px 0 0;font-size: 0.4rem;">
+          <span>缴纳保证金:</span>
+          <span style="color:#C21F3A;font-size: 0.45rem;font-weight: bold;">¥{{ deposit }}</span>
+        </p>
+        <p style="padding:10px 0 0px;font-size: 0.4rem">
+          <span>保证金缴纳账号:</span>
+          <span style="color:#007E72;font-size: 0.45rem;font-weight: bold;">{{ payAccount }}</span>
+        </p>
+        <p style="padding:10px 0 0px;font-size: 0.4rem">
+          <span>账户名称:</span>
+          <span style="color:#007E72;font-size: 0.45rem;font-weight: bold;">{{ accountName }}</span>
+        </p>
+        <p style="padding:10px 0 0px;font-size: 0.4rem;">
+          <span>开户银行:</span>
+          <span style="color:#007E72;font-size: 0.45rem;font-weight: bold;">{{ bankName }}</span>
+        </p>
+      </van-row>
+    </div>
+    <div class="introduce gnbg">
+      <van-row style="">
+        <h2 style="margin-bottom:10px;">1.竞买人条件确认</h2>
+        <p style="margin-bottom:10px;">· 已阅读并知晓：
+          <span style="color:#C21F3A" @click="show1=true">《乳山市农村产权交易项目报名服务协议》</span>
+        </p>
+        <van-dialog v-model="show1" title="乳山市农村产权交易项目报名服务协议" confirmButtonText="关闭">
 
-        <div class="dialog_content_center" v-html="fwxyConfig"></div>
+          <div class="dialog_content_center" v-html="fwxyConfig"></div>
 
-      </van-dialog>
+        </van-dialog>
 
 
-      <p style="margin-bottom:10px;">· 已阅读并知晓：
-        <span style="color:#C21F3A" @click="show2=true">《竞买人承诺书》</span>
-      </p>
-      <van-dialog v-model="show2" title="竞买人承诺书" confirmButtonText="关闭">
+        <p style="margin-bottom:10px;">· 已阅读并知晓：
+          <span style="color:#C21F3A" @click="show2=true">《竞买人承诺书》</span>
+        </p>
+        <van-dialog v-model="show2" title="竞买人承诺书" confirmButtonText="关闭">
 
-        <div class="dialog_content_center" v-html="cnsConfig"></div>
+          <div class="dialog_content_center" v-html="cnsConfig"></div>
 
-      </van-dialog>
+        </van-dialog>
 
-      <van-checkbox v-model="checked" shape="square" checked-color="#007E72" >
-        <p :style="{color:color}">确认已知晓并同意以上所有内容
-        </p>
-      </van-checkbox>
-    </van-row>
-    <van-row style="padding:0 20px;margin-top:10px;">
-    <h2 style="margin-bottom:10px;">竞买人身份确认说明：</h2>
-    <p>竞买人身份信息无法在此修改，请前往<span style="color: #c12e2a;">个人中心 > 账户设置 > 银行账户信息</span>进行修改维护</p>
-    </van-row>
-    <van-row style="padding:0 10px;margin-top: 20px;">
-      <h2 style="margin-bottom:10px;padding:0 10px">2.竞买人身份确认</h2>
-      <van-form @submit="onSubmit">
-        <van-field
-          readonly
-          v-model="realname"
-          name="realname"
-          label="姓名"
-          placeholder="姓名"
-          required
-          :rules="[{ required: true, message: '请填写姓名' }]"
-        />
-        <van-field
-          readonly
-          v-model="phone"
-          name="phone"
-          label="会员账号"
-          placeholder="会员账号"
-          required
-          :rules="[{ required: true, message: '请填写会员账号' }]"
-        />
-        <van-field
-          readonly
-          v-model="accountType"
-          name="accountType"
-          label="账户类型"
-          placeholder="账户类型"
-          required
-          :rules="[{ required: true, message: '请填写账户类型' }]"
-        />
-        <van-field
-          readonly
-          v-model="bankType"
-          name="bankType"
-          label="所属银行"
-          placeholder="所属银行"
-          required
-          :rules="[{ required: true, message: '请填写所属银行' }]"
-        />
-        <van-field
-          readonly
-          v-model="bankCardName"
-          name="bankCardName"
-          label="开户姓名"
-          placeholder="开户姓名"
-          required
-          :rules="[{ required: true, message: '请填写开户姓名' }]"
-        />
-        <van-field
-          readonly
-          v-model="bankAddress"
-          name="bankAddress"
-          label="开户银行"
-          placeholder="开户银行"
-          required
-          :rules="[{ required: true, message: '请填写开户银行' }]"
-        />
-        <van-field
-          readonly
-          v-model="bankCardNum"
-          name="bankCardNum"
-          label="银行卡号"
-          placeholder="银行卡号"
-          required
-          :rules="[{ required: true, message: '请填写银行卡号' }]"
-        />
-        <van-field
-          readonly
-          v-model="payeePaymentLines"
-          name="payeePaymentLines"
-          label="联行号"
-          placeholder="联行号"
-          required
-          :rules="[{ required: true, message: '请填写联行号' }]"
-        />
-        <van-field
-          readonly
-          v-model="idCardNum"
-          name="idCardNum"
-          label="身份证号"
-          placeholder="身份证号"
-          required
-          :rules="[{ required: true, message: '请填写身份证号' }]"
-        />
-        <van-field
-          v-model="projectId"
-          name="projectId"
-          style="display: none"
-        />
-        <van-field
-          v-model="memberId"
-          name="memberId"
-          style="display: none"
-        />
-        <van-field
-          v-model="status"
-          name="status"
-          style="display: none"
-        />
-        <van-field label="缴款凭证">
-          <template #input>
-            <van-uploader v-model="fileList" multiple>
-              <van-button icon="plus" size="small" round color="#007E72">点击上传</van-button>
-            </van-uploader>
-          </template>
-        </van-field>
-        <van-field label="电子签名" required name="signPic" v-model="signFileUrlUp">
-          <template #input>
-              <van-button @click="show=true" native-type="button" icon="plus" size="small" round color="#007E72">点击签名</van-button>
-          </template>
-        </van-field>
-        <img :src="signFileUrl" style="width: 100%;" alt="">
-        <div style="margin: 16px;">
-          <van-button round block type="info" native-type="submit" color="#007E72">保存</van-button>
-        </div>
-      </van-form>
-    </van-row>
+        <van-checkbox v-model="checked" shape="square" checked-color="#007E72" >
+          <p :style="{color:color}">确认已知晓并同意以上所有内容
+          </p>
+        </van-checkbox>
+      </van-row>
+      <van-row style="margin-top:10px;">
+        <h2 style="margin-bottom:10px;">竞买人身份确认说明：</h2>
+        <p>竞买人身份信息无法在此修改，请前往<span style="color: #c12e2a;">个人中心 > 账户设置 > 银行账户信息</span>进行修改维护</p>
+      </van-row>
+    </div>
+    <div class="introduce gnbg">
+      <van-row>
+        <h2 style="margin-bottom:10px;">2.竞买人身份确认</h2>
+        <van-form @submit="onSubmit">
+          <van-field
+            readonly
+            v-model="realname"
+            name="realname"
+            label="姓名"
+            placeholder="姓名"
+            required
+            :rules="[{ required: true, message: '请填写姓名' }]"
+          />
+          <van-field
+            readonly
+            v-model="phone"
+            name="phone"
+            label="会员账号"
+            placeholder="会员账号"
+            required
+            :rules="[{ required: true, message: '请填写会员账号' }]"
+          />
+          <van-field
+            readonly
+            v-model="accountType"
+            name="accountType"
+            label="账户类型"
+            placeholder="账户类型"
+            required
+            :rules="[{ required: true, message: '请填写账户类型' }]"
+          />
+          <van-field
+            readonly
+            v-model="bankType"
+            name="bankType"
+            label="所属银行"
+            placeholder="所属银行"
+            required
+            :rules="[{ required: true, message: '请填写所属银行' }]"
+          />
+          <van-field
+            readonly
+            v-model="bankCardName"
+            name="bankCardName"
+            label="开户姓名"
+            placeholder="开户姓名"
+            required
+            :rules="[{ required: true, message: '请填写开户姓名' }]"
+          />
+          <van-field
+            readonly
+            v-model="bankAddress"
+            name="bankAddress"
+            label="开户银行"
+            placeholder="开户银行"
+            required
+            :rules="[{ required: true, message: '请填写开户银行' }]"
+          />
+          <van-field
+            readonly
+            v-model="bankCardNum"
+            name="bankCardNum"
+            label="银行卡号"
+            placeholder="银行卡号"
+            required
+            :rules="[{ required: true, message: '请填写银行卡号' }]"
+          />
+          <van-field
+            readonly
+            v-model="payeePaymentLines"
+            name="payeePaymentLines"
+            label="联行号"
+            placeholder="联行号"
+            required
+            :rules="[{ required: true, message: '请填写联行号' }]"
+          />
+          <van-field
+            readonly
+            v-model="idCardNum"
+            name="idCardNum"
+            label="身份证号"
+            placeholder="身份证号"
+            required
+            :rules="[{ required: true, message: '请填写身份证号' }]"
+          />
+          <van-field
+            v-model="projectId"
+            name="projectId"
+            style="display: none"
+          />
+          <van-field
+            v-model="memberId"
+            name="memberId"
+            style="display: none"
+          />
+          <van-field
+            v-model="status"
+            name="status"
+            style="display: none"
+          />
+          <van-field label="缴款凭证">
+            <template #input>
+              <van-uploader v-model="fileList" multiple>
+                <van-button icon="plus" size="small" round color="#0DBCAA">点击上传</van-button>
+              </van-uploader>
+            </template>
+          </van-field>
+          <van-field label="电子签名" required name="signPic" v-model="signFileUrlUp">
+            <template #input>
+                <van-button @click="show=true" native-type="button" icon="plus" size="small" round color="#0DBCAA">点击签名</van-button>
+            </template>
+          </van-field>
+          <img :src="signFileUrl" style="width: 100%;" alt="">
+          <div style="margin: 16px;">
+            <van-button round block type="info" native-type="submit" color="#0DBCAA">保存</van-button>
+          </div>
+        </van-form>
+      </van-row>
+    </div>
     <van-popup v-model="show" closeable position="right" :style="{ height: '100%' }" >
       <van-cell-group style="width: 100%;height:100%;overflow: hidden;padding-top: 10px;padding-bottom: 10px;">
         <div class="signature-box" @mousedown="canvasTTdown" @touchstart="canvasTTdown">
@@ -206,9 +206,11 @@ import {getInfo} from "../../api/login";
   import $ from "jquery";
   import {signSecond} from "@/api/sunVillage_info/fixedAssets";
   import {Toast} from "vant";
+  import navBar from "@/components/common/nav_bar.vue";
 
 export default {
   name: "signUp",
+  components: { navBar },
   data() {
     return {
       projectId:this.$route.query.projectId,
@@ -442,6 +444,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
+  .app-container {
+    background: #F4F8FB;
+    height: 100vh;
+    overflow-y: scroll;
+  }
   .dialog_content_center{
     height: 40vh;
     overflow-y: scroll;
@@ -475,4 +482,15 @@ export default {
       width: 100%;
     }
   }
+  .introduce{
+    padding: 3vw;
+    background-color: #FFF;
+    width: 94%;
+    margin: 0.3rem auto 0;
+    border-radius: 10PX;
+  }
+  .gnbg{
+    background: #ffffff linear-gradient(rgba(13,188,170,.28),#ffffff) no-repeat;
+    background-size: 100% 50Px;
+  }
 </style>

src/views/register/companyRegister.vue

@@ -1,144 +1,143 @@
 <template>
   <div class="app-container" :style="{height:height+'px'}">
-    <van-nav-bar
-      title="单位用户注册"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
+    <navBar title="单位用户注册" background="0" positionType="fixed"></navBar>
     <van-form @submit="getSubmit">
 
-      <van-popup v-model="showPicker" position="bottom">
-        <van-picker
-          show-toolbar
-          :columns="columns"
-          @confirm="onConfirm"
-          @cancel="showPicker = false"
-        />
-      </van-popup>
-      <van-field v-model="form.phone" type="tel" label="手机号" placeholder="请输入手机号，作为登录账号！" required :rules="[{ required:true }]" />
-      <van-field v-model="form.password" type="password" label="密码" placeholder="请输入密码" required :rules="[{ required:true }]"/>
-      <van-field v-model="confirmPassWord" type="password" label="确认密码" placeholder="请再次输入密码" required :rules="[{ required:true }]"/>
-      <van-field readonly clickable name="picker" :value="value" label="经济类型" placeholder="点击选择经济类型" @click="showPicker = true" required :rules="[{ required:true }]"/>
-      <van-field v-model="form.companyName" label="公司名称" placeholder="请输入公司名称" required :rules="[{ required:true }]"/>
-      <van-field v-model="form.companyCode" label="社会信用代码" placeholder="请输入公司的社会信用代码" required :rules="[{ required:true }]"/>
-      <van-field v-model="form.address" label="联系地址" placeholder="请输入联系地址" />
+      <div class="block_box">
+        <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">基本信息</van-divider>
+        <van-popup v-model="showPicker" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="columns"
+            @confirm="onConfirm"
+            @cancel="showPicker = false"
+          />
+        </van-popup>
+        <van-field v-model="form.phone" type="tel" label="手机号" placeholder="请输入手机号，作为登录账号！" required :rules="[{ required:true }]" />
+        <van-field v-model="form.password" type="password" label="密码" placeholder="请输入密码" required :rules="[{ required:true }]"/>
+        <van-field v-model="confirmPassWord" type="password" label="确认密码" placeholder="请再次输入密码" required :rules="[{ required:true }]"/>
+        <van-field readonly clickable name="picker" :value="value" label="经济类型" placeholder="点击选择经济类型" @click="showPicker = true" required :rules="[{ required:true }]"/>
+        <van-field v-model="form.companyName" label="公司名称" placeholder="请输入公司名称" required :rules="[{ required:true }]"/>
+        <van-field v-model="form.companyCode" label="社会信用代码" placeholder="请输入公司的社会信用代码" required :rules="[{ required:true }]"/>
+        <van-field v-model="form.address" label="联系地址" placeholder="请输入联系地址" />
 
-      <van-field v-model="form.realname" label="法人姓名" placeholder="请输入法人姓名" required :rules="[{ required:true }]"/>
-      <van-field v-model="form.idCardNum" label="法人身份证号" placeholder="请输入法人身份证号" required :rules="[{ required:true }]"/>
-      <van-field name="uploader" label="法人证件照" required>
-        <template #input>
-          <van-uploader :after-read="afterReadFRZJZ" :before-delete="deleteFileFRZJZ" v-model="fileListFRZJZ" multiple :max-count="1" />
-        </template>
-      </van-field>
-      <van-field name="uploader" label="营业执照" required>
-        <template #input>
-          <van-uploader :after-read="afterReadYYZZ" :before-delete="deleteFileYYZZ" v-model="fileListYYZZ" multiple :max-count="1" />
-        </template>
-      </van-field>
+        <van-field v-model="form.realname" label="法人姓名" placeholder="请输入法人姓名" required :rules="[{ required:true }]"/>
+        <van-field v-model="form.idCardNum" label="法人身份证号" placeholder="请输入法人身份证号" required :rules="[{ required:true }]"/>
+        <van-field name="uploader" label="法人证件照" required>
+          <template #input>
+            <van-uploader :after-read="afterReadFRZJZ" :before-delete="deleteFileFRZJZ" v-model="fileListFRZJZ" multiple :max-count="1" />
+          </template>
+        </van-field>
+        <van-field name="uploader" label="营业执照" required>
+          <template #input>
+            <van-uploader :after-read="afterReadYYZZ" :before-delete="deleteFileYYZZ" v-model="fileListYYZZ" multiple :max-count="1" />
+          </template>
+        </van-field>
+      </div>
 
-      <van-divider>银行信息</van-divider>
-      <van-field name="uploader" label="开户证明" required>
-        <template #input>
-          <van-uploader :after-read="afterReadKHZM" :before-delete="deleteFileKHZM" v-model="fileListKHZM" multiple :max-count="1" />
-        </template>
-      </van-field>
-      <van-field v-model="form.bankCardName" label="开户姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
-      <van-field v-model="form.bankCardNum" label="开户账号" placeholder="请输入开户账号" required :rules="[{ required:true }]"/>
+      <div class="block_box">
+        <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">银行信息</van-divider>
+        <van-field name="uploader" label="开户证明" required>
+          <template #input>
+            <van-uploader :after-read="afterReadKHZM" :before-delete="deleteFileKHZM" v-model="fileListKHZM" multiple :max-count="1" />
+          </template>
+        </van-field>
+        <van-field v-model="form.bankCardName" label="开户姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
+        <van-field v-model="form.bankCardNum" label="开户账号" placeholder="请输入开户账号" required :rules="[{ required:true }]"/>
 
-      <van-field
-        v-model="accountType"
-        is-link
-        readonly
-        required
-        :rules="[{ required:true }]"
-        label="账户类型"
-        placeholder="请选择账户类型"
-        @click="showAccountType = true"
-      />
-      <van-popup v-model:show="showAccountType" position="bottom">
-        <van-picker
-          show-toolbar
-          value-key="dictLabel"
-          :columns="accountTypeOption"
-          @confirm="onConfirmAccountType"
-          @cancel="showAccountType = false"
+        <van-field
+          v-model="accountType"
+          is-link
+          readonly
+          required
+          :rules="[{ required:true }]"
+          label="账户类型"
+          placeholder="请选择账户类型"
+          @click="showAccountType = true"
         />
-      </van-popup>
+        <van-popup v-model:show="showAccountType" position="bottom">
+          <van-picker
+            show-toolbar
+            value-key="dictLabel"
+            :columns="accountTypeOption"
+            @confirm="onConfirmAccountType"
+            @cancel="showAccountType = false"
+          />
+        </van-popup>
 
-      <van-field
-        v-model="bankType"
-        is-link
-        readonly
-        required
-        :rules="[{ required:true }]"
-        label="所属银行"
-        placeholder="请选择所属银行"
-        @click="showBankType = true"
-      />
-      <van-popup v-model:show="showBankType" position="bottom">
-        <van-picker
-          show-toolbar
-          value-key="dictLabel"
-          :columns="bankTypeOption"
-          @confirm="onConfirmBankType"
-          @cancel="showArea = false"
+        <van-field
+          v-model="bankType"
+          is-link
+          readonly
+          required
+          :rules="[{ required:true }]"
+          label="所属银行"
+          placeholder="请选择所属银行"
+          @click="showBankType = true"
         />
-      </van-popup>
+        <van-popup v-model:show="showBankType" position="bottom">
+          <van-picker
+            show-toolbar
+            value-key="dictLabel"
+            :columns="bankTypeOption"
+            @confirm="onConfirmBankType"
+            @cancel="showArea = false"
+          />
+        </van-popup>
 
-      <van-field
-        v-model="sheng"
-        is-link
-        readonly
-        label="开户省市"
-        placeholder="请选择开户省市"
-        @click="showSheng = true"
-      />
-      <van-popup v-model:show="showSheng" position="bottom">
-        <van-picker
-          show-toolbar
-          value-key="label"
-          :columns="shengOption"
-          @confirm="onConfirmSheng"
-          @cancel="showSheng = false"
+        <van-field
+          v-model="sheng"
+          is-link
+          readonly
+          label="开户省市"
+          placeholder="请选择开户省市"
+          @click="showSheng = true"
         />
-      </van-popup>
+        <van-popup v-model:show="showSheng" position="bottom">
+          <van-picker
+            show-toolbar
+            value-key="label"
+            :columns="shengOption"
+            @confirm="onConfirmSheng"
+            @cancel="showSheng = false"
+          />
+        </van-popup>
 
-      <van-field v-model="form.bankDeposit" label="关键词" placeholder="请输入开户行地址关键词，如镇街名称"/>
-      <van-field
-        v-model="form.bankAddress"
-        label="开户银行"
-        placeholder="输入【开户省市、关键词】后："
-        required
-        :rules="[{ required:true }]"
-        readonly
-        @click="showBankAddress = true"
-      >
-        <template #button>
-          <van-button size="small" type="primary" native-type="button" @click="searchBankAddress">点击检索</van-button>
-        </template>
-      </van-field>
+        <van-field v-model="form.bankDeposit" label="关键词" placeholder="请输入开户行地址关键词，如镇街名称"/>
+        <van-field
+          v-model="form.bankAddress"
+          label="开户银行"
+          placeholder="输入【开户省市、关键词】后："
+          required
+          :rules="[{ required:true }]"
+          readonly
+          @click="showBankAddress = true"
+        >
+          <template #button>
+            <van-button size="small" type="primary" native-type="button" @click="searchBankAddress">点击检索</van-button>
+          </template>
+        </van-field>
 
-      <van-popup v-model:show="showBankAddress" position="bottom">
-        <van-picker
-          show-toolbar
-          value-key="bankDeposit"
-          :columns="bankAddressOption"
-          @confirm="onConfirmBankAddress"
-          @cancel="showBankAddress = false"
-        />
-      </van-popup>
-      <van-field v-model="form.payeePaymentLines" label="联行号" placeholder="开户银行选定后，自动填充！" required :rules="[{ required:true }]"/>
+        <van-popup v-model:show="showBankAddress" position="bottom">
+          <van-picker
+            show-toolbar
+            value-key="bankDeposit"
+            :columns="bankAddressOption"
+            @confirm="onConfirmBankAddress"
+            @cancel="showBankAddress = false"
+          />
+        </van-popup>
+        <van-field v-model="form.payeePaymentLines" label="联行号" placeholder="开户银行选定后，自动填充！" required :rules="[{ required:true }]"/>
 
-      <van-field v-model="form.code" center clearable label="验证码" placeholder="图形验证码" required :rules="[{ required:true }]">
+        <van-field v-model="form.code" center clearable label="验证码" placeholder="图形验证码" required :rules="[{ required:true }]">
         <template #button>
           <img class="code-img" :src="codeUrl" @click="getCode" />
         </template>
       </van-field>
+      </div>
       <div class="submit">
 <!--        <p>我已阅读并同意<span>《农村产权交易信息服务平台会员注册协议》</span></p>-->
-        <van-button round block type="info" color="#007E72" native-type="submit">立即注册</van-button>
+        <van-button round block type="info" color="#0DBCAA" native-type="submit">立即注册</van-button>
       </div>
     </van-form>
   </div>
@@ -148,8 +147,10 @@
 import { getCodeImg } from "@/api/login";
 import {attachmentUpload, realtimeBackList, userRegister,depositList} from "@/api/register/index";
 import {options} from "@/api/user";
+import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "companyRegister",
+  components: { navBar },
   data() {
     return {
       height:0,
@@ -407,7 +408,7 @@ export default {
 
 <style scoped lang="scss">
 .app-container {
-  background-color: #FFF;
+  background-color: #F4F8FB;
   .code-img {
     width: 220px;
   }
@@ -427,4 +428,28 @@ export default {
     }
   }
 }
+.block_box{
+  width: 94%;
+  margin: 3vw auto;
+  background: #ffffff;
+  padding: 3vw 0;
+  border-radius: 15Px;
+  overflow: hidden;
+  .block_tt{
+    font-size: 16Px;
+    display: flex;
+    align-items: center;
+    padding: 0 3vw;
+    line-height: 1;
+    i{
+      display: block;
+      width: 3Px;
+      height: 14Px;
+      background: #0CBEA6;
+      margin-right: 5PX;
+      border-radius: 5PX;
+    }
+    /*border-left: 3Px solid #0CBEA6;*/
+  }
+}
 </style>

src/views/register/index.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="app-container" :style="{height:height+'px'}">
-    <van-nav-bar
-      title="注册"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
+<!--    <van-nav-bar-->
+<!--      title="注册"-->
+<!--      left-arrow-->
+<!--      fixed-->
+<!--      placeholder-->
+<!--      @click-left="onClickLeft"-->
+<!--    />-->
+    <van-icon name="arrow-left" color="#ffffff" size="25" style="padding: 2vh 2.5vw" @click="onClickLeft" />
     <div class="title">
-      <p class="title_one">PROPERTY RIGHT</p>
-      <p class="title_two">TRANSACTION</p>
+      <!--      <p class="title_one">PROPERTY RIGHT</p>-->
+      <!--      <p class="title_two">TRANSACTION</p>-->
+      <p class="title_three">欢迎登录</p>
       <p class="title_three">农村产权交易平台</p>
     </div>
     <div class="text_box">
-      <h2>/ 注册须知 /</h2>
+      <h2>注册须知</h2>
       <van-divider />
       为营造公开、公平、公正的网络交易环境，维护农村产权交易平台（以下简称平台）会员秩序，确保网络交易的顺利进行，特将有关事项告知如下：
       <div class="text_box-content">
@@ -112,17 +114,27 @@
         <p>14.本须知自在农村产权交易网公示之日起生效，本须知解释权和修订权归农村产权交易网所有。</p>
         <p>农村产权交易网</p>
       </div>
+      <van-form @submit="onSubmit">
+        <div class="agree_box">
+          <van-field name="checkbox">
+            <template #input>
+              <van-checkbox v-model="checkbox" checked-color="#0DBCAA"/><p style="color: #333333;margin-left: 5px;font-size: 12px;">我已仔细阅读该须知，并同意该须知相关规定。</p>
+            </template>
+          </van-field>
+        </div>
+        <van-button native-type="submit" type="info" round color="linear-gradient(to right, #67D0DC, #6EE2B4)" block style="width: 90%;margin:0 auto;">注册</van-button>
+      </van-form>
     </div>
-    <van-form @submit="onSubmit">
-    <div class="agree_box">
-      <van-field name="checkbox">
-        <template #input>
-          <van-checkbox v-model="checkbox" checked-color="#007e72" shape="square"/><p style="color: #FFF;margin-left: 5px;">我已仔细阅读该须知，并同意该须知相关规定。</p>
-        </template>
-      </van-field>
-    </div>
-    <van-button native-type="submit" type="info" round color="#007e72" block style="width: 90%;margin:0 auto;">注册</van-button>
-    </van-form>
+<!--    <van-form @submit="onSubmit">-->
+<!--    <div class="agree_box">-->
+<!--      <van-field name="checkbox">-->
+<!--        <template #input>-->
+<!--          <van-checkbox v-model="checkbox" checked-color="#007e72" shape="square"/><p style="color: #FFF;margin-left: 5px;">我已仔细阅读该须知，并同意该须知相关规定。</p>-->
+<!--        </template>-->
+<!--      </van-field>-->
+<!--    </div>-->
+<!--    <van-button native-type="submit" type="info" round color="#007e72" block style="width: 90%;margin:0 auto;">注册</van-button>-->
+<!--    </van-form>-->
   </div>
 </template>
 
@@ -160,13 +172,13 @@ export default {
 
 <style scoped lang="scss">
 .app-container {
-  background: url("../../../static/images/index/registerBg.png") no-repeat;
-  background-size: 100% 100%;
+  background: url("../../../static/images/transaction_new/login_bg.png") no-repeat;
+  background-size: 100% auto;
   width: 100%;
   height: 100%;
 }
 .title{
-  padding-top: 20%;
+  padding: 10% 0;
   width: 88%;
   margin: 0 auto;
 }
@@ -179,13 +191,13 @@ export default {
   font-size: 0.6rem;
 }
 .title_three{
-  color: #FFF;
-  font-size: 0.8rem;
+  color: #333333;
+  font-size: 0.6rem;
 }
 .text_box{
   background: #ffffff;
   width: 90%;
-  height: 50%;
+  height: 70vh;
   margin: 0 auto;
   border-radius: 0.4rem;
   padding: 0.5rem 0.4rem 0;
@@ -194,16 +206,21 @@ export default {
 }
 .text_box h2{
   text-align: center;
-  color: #007E72;
+  color: #333333;
+  font-weight: normal;
+  font-size: .45rem;
+  padding-bottom: 10PX;
+  background: url("../../../static/images/transaction_new/tab_border.png") no-repeat center bottom;
+  background-size: auto 10PX;
 }
 .text_box-content{
-  height: 60%;
+  height: 35vh;
   overflow-y: scroll;
   margin: 0.2rem 0;
 }
 .agree_box{
   text-align: center;
-  width: 90%;
+  width: 100%;
   margin: 0 auto;
   margin-top: 0.4rem;
   margin-bottom: 15px;

src/views/register/registerType.vue

@@ -1,33 +1,28 @@
 <template>
   <div class="app-container" :style="{height:height+'px'}">
-    <van-nav-bar
-      title="注册"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
+    <van-icon name="arrow-left" color="#ffffff" size="25" style="padding: 2vh 2.5vw" @click="onClickLeft" />
     <div class="title">
-      <p class="title_one">PROPERTY RIGHT</p>
-      <p class="title_two">TRANSACTION</p>
+      <!--      <p class="title_one">PROPERTY RIGHT</p>-->
+      <!--      <p class="title_two">TRANSACTION</p>-->
+      <p class="title_three">欢迎登录</p>
       <p class="title_three">农村产权交易平台</p>
     </div>
     <div class="text_box">
       <p>请选择要注册的类型</p>
       <div class="img_box">
-        <van-image src="../../../static/images/register_icon2.png" width="18%" @click="goUserRegister()" style="margin-right: 20%" />
-        <van-image src="../../../static/images/register_icon1.png" width="18%" @click="goCompanyRegister()" />
-      </div>
-      <div class="type_box">
-        <van-row style="margin-bottom: 0.2rem">
-          <van-col span="6">个人用户 :</van-col>
-          <van-col span="18">参与农村产权交易的自然人</van-col>
-        </van-row>
-        <van-row>
-          <van-col span="6">单位用户 :</van-col>
-          <van-col span="18">主要是参与农村产权交易的机关 单位、社会组织、农业企业、家 庭农场、合作社等</van-col>
-        </van-row>
+        <van-image src="../../../static/images/transaction_new/register_btn_1.png" @click="goUserRegister()" style="margin-bottom: 2vh" />
+        <van-image src="../../../static/images/transaction_new/register_btn_2.png" @click="goCompanyRegister()" />
       </div>
+<!--      <div class="type_box">-->
+<!--        <van-row style="margin-bottom: 0.2rem">-->
+<!--          <van-col span="6">个人用户 :</van-col>-->
+<!--          <van-col span="18">参与农村产权交易的自然人</van-col>-->
+<!--        </van-row>-->
+<!--        <van-row>-->
+<!--          <van-col span="6">单位用户 :</van-col>-->
+<!--          <van-col span="18">主要是参与农村产权交易的机关 单位、社会组织、农业企业、家 庭农场、合作社等</van-col>-->
+<!--        </van-row>-->
+<!--      </div>-->
     </div>
   </div>
 </template>
@@ -56,14 +51,14 @@ export default {
 
 <style scoped lang="scss">
 .app-container {
-  background: url("../../../static/images/index/registerBg.png") no-repeat;
-  background-size: 100% 100%;
+  background: url("../../../static/images/transaction_new/login_bg.png") no-repeat;
+  background-size: 100% auto;
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
 .title{
-  padding-top: 20%;
+  padding: 10% 0;
   width: 88%;
   margin: 0 auto;
 }
@@ -76,24 +71,28 @@ export default {
   font-size: 0.8rem;
 }
 .title_three{
-  color: #FFF;
-  font-size: 0.9rem;
+  color: #333333;
+  font-size: 0.6rem;
 }
 .text_box{
   background: #ffffff;
-  background-image: linear-gradient(#fff, #c1c1c1);
-  width: 100%;
+  /*background-image: linear-gradient(#fff, #c1c1c1);*/
+  width: 94%;
   height: 100%;
-  border-radius: 1.5rem;
+  border-radius: .8rem;
   padding: 0.5rem 0.4rem 0;
-  margin-top: 0.6rem;
+  margin: 0.6rem auto;
   overflow: hidden;
 }
 .text_box p{
   text-align: center;
-  color: #007E72;
-  font-size: 0.5rem;
-  margin-top: 1rem;
+  color: #333333;
+  font-weight: normal;
+  font-size: .45rem;
+  padding-bottom: 10PX;
+  background: url("../../../static/images/transaction_new/tab_border.png") no-repeat center bottom;
+  background-size: auto 10PX;
+  margin-top: .5rem;
 }
   .img_box{
     text-align: center;

src/views/register/userRegister.vue

@@ -1,14 +1,21 @@
 <template>
   <div class="app-container" :style="{height:height+'px'}">
-    <van-nav-bar
-      title="个人用户注册"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
+<!--    <van-nav-bar-->
+<!--      title="个人用户注册"-->
+<!--      left-arrow-->
+<!--      fixed-->
+<!--      placeholder-->
+<!--      @click-left="onClickLeft"-->
+<!--      style="background: linear-gradient(to right,#91E1CA,#E0F4E4);"-->
+<!--    />-->
+    <navBar title="个人用户注册" background="0" positionType="fixed"></navBar>
     <van-form @submit="getSubmit">
-      <van-field v-model="form.phone" type="tel" label="手机号" placeholder="请输入手机号，作为登录账号" required :rules="[{ required:true }]" />
+      <div class="block_box">
+
+<!--        <div class="block_tt"><i></i>用户信息</div> color: '#0CBEA6',-->
+        <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">用户信息</van-divider>
+
+        <van-field v-model="form.phone" type="tel" label="手机号" placeholder="请输入手机号，作为登录账号" required :rules="[{ required:true }]" />
 <!--      <van-field-->
 <!--        center-->
 <!--        clearable-->
@@ -22,122 +29,128 @@
 <!--          <van-button size="small" type="primary" native-type="button" :rules="[{ required:true }]">发送验证码</van-button>-->
 <!--        </template>-->
 <!--      </van-field>-->
+        <van-field v-model="form.password" type="password" label="密码" placeholder="请输入密码" required :rules="[{ required:true }]"/>
+        <van-field v-model="confirmPassWord" type="password" label="确认密码" placeholder="请再次输入密码" required :rules="[{ required:true }]"/>
+        <van-field v-model="form.realname" label="姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
+        <van-field v-model="form.idCardNum" label="身份证号" placeholder="请输入身份证号" required :rules="[{ required:true }]"/>
+        <van-field v-model="form.address" label="联系地址" placeholder="请输入联系地址" />
+        <van-field name="uploader" label="身份证(正)" required :border="false"></van-field>
+        <van-field name="uploader">
+          <template #input>
+            <van-uploader :after-read="afterReadSFZ" :before-delete="deleteFileSFZ" v-model="fileListSFZ" multiple :max-count="1" />
+          </template>
+        </van-field>
+        <p style="color: red;padding: 2vw 3vw;">*身份证照片、本人和身份证的合影</p>
+      </div>
 
-      <van-field v-model="form.password" type="password" label="密码" placeholder="请输入密码" required :rules="[{ required:true }]"/>
-      <van-field v-model="confirmPassWord" type="password" label="确认密码" placeholder="请再次输入密码" required :rules="[{ required:true }]"/>
-      <van-field v-model="form.realname" label="姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
-      <van-field v-model="form.idCardNum" label="身份证号" placeholder="请输入身份证号" required :rules="[{ required:true }]"/>
-      <van-field v-model="form.address" label="联系地址" placeholder="请输入联系地址" />
-      <van-field name="uploader" label="身份证(正)" required>
-        <template #input>
-          <van-uploader :after-read="afterReadSFZ" :before-delete="deleteFileSFZ" v-model="fileListSFZ" multiple :max-count="1" />
-        </template>
-      </van-field>
-
-      <van-divider>银行信息</van-divider>
-      <van-field name="uploader" label="银行卡" required>
-        <template #input>
-          <van-uploader :after-read="afterReadYHK" :before-delete="deleteFileYHK" v-model="fileListYHK" multiple :max-count="1" />
-        </template>
-      </van-field>
+<!--      <van-divider>银行信息</van-divider>-->
+      <div class="block_box">
 
-      <van-field v-model="form.bankCardName" label="开户姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
-      <van-field v-model="form.bankCardNum" label="开户账号" placeholder="请输入开户账号" required :rules="[{ required:true }]"/>
+        <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">银行信息</van-divider>
+        <van-field name="uploader" label="银行卡" required :border="false"></van-field>
+        <van-field name="uploader">
+          <template #input>
+            <van-uploader :after-read="afterReadYHK" :before-delete="deleteFileYHK" v-model="fileListYHK" multiple :max-count="1" />
+          </template>
+        </van-field>
 
-      <van-field
-        v-model="accountType"
-        is-link
-        readonly
-        required
-        :rules="[{ required:true }]"
-        label="账户类型"
-        placeholder="请选择账户类型"
-        @click="showAccountType = true"
-      />
-      <van-popup v-model:show="showAccountType" position="bottom">
-        <van-picker
-          show-toolbar
-          value-key="dictLabel"
-          :columns="accountTypeOption"
-          @confirm="onConfirmAccountType"
-          @cancel="showAccountType = false"
-        />
-      </van-popup>
+        <van-field v-model="form.bankCardName" label="开户姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
+        <van-field v-model="form.bankCardNum" label="开户账号" placeholder="请输入开户账号" required :rules="[{ required:true }]"/>
 
-      <van-field
-        v-model="bankType"
-        is-link
-        readonly
-        required
-        :rules="[{ required:true }]"
-        label="所属银行"
-        placeholder="请选择所属银行"
-        @click="showBankType = true"
-      />
-      <van-popup v-model:show="showBankType" position="bottom">
-        <van-picker
-          show-toolbar
-          value-key="dictLabel"
-          :columns="bankTypeOption"
-          @confirm="onConfirmBankType"
-          @cancel="showArea = false"
+        <van-field
+          v-model="accountType"
+          is-link
+          readonly
+          required
+          :rules="[{ required:true }]"
+          label="账户类型"
+          placeholder="请选择账户类型"
+          @click="showAccountType = true"
         />
-      </van-popup>
+        <van-popup v-model:show="showAccountType" position="bottom">
+          <van-picker
+            show-toolbar
+            value-key="dictLabel"
+            :columns="accountTypeOption"
+            @confirm="onConfirmAccountType"
+            @cancel="showAccountType = false"
+          />
+        </van-popup>
 
-      <van-field
-        v-model="sheng"
-        is-link
-        readonly
-        label="开户省市"
-        placeholder="请选择开户省市"
-        @click="showSheng = true"
-      />
-      <van-popup v-model:show="showSheng" position="bottom">
-        <van-picker
-          show-toolbar
-          value-key="label"
-          :columns="shengOption"
-          @confirm="onConfirmSheng"
-          @cancel="showSheng = false"
+        <van-field
+          v-model="bankType"
+          is-link
+          readonly
+          required
+          :rules="[{ required:true }]"
+          label="所属银行"
+          placeholder="请选择所属银行"
+          @click="showBankType = true"
         />
-      </van-popup>
+        <van-popup v-model:show="showBankType" position="bottom">
+          <van-picker
+            show-toolbar
+            value-key="dictLabel"
+            :columns="bankTypeOption"
+            @confirm="onConfirmBankType"
+            @cancel="showArea = false"
+          />
+        </van-popup>
 
-      <van-field v-model="form.bankDeposit" label="关键词" placeholder="请输入开户行地址关键词，如镇街名称"/>
-      <van-field
-        v-model="form.bankAddress"
-        label="开户银行"
-        placeholder="输入【开户省市、关键词】后："
-        required
-        :rules="[{ required:true }]"
-        readonly
-        @click="showBankAddress = true"
-      >
-        <template #button>
-          <van-button size="small" type="primary" native-type="button" @click="searchBankAddress">点击检索</van-button>
-        </template>
-      </van-field>
-      <van-popup v-model:show="showBankAddress" position="bottom">
-        <van-picker
-          show-toolbar
-          value-key="bankDeposit"
-          :columns="bankAddressOption"
-          @confirm="onConfirmBankAddress"
-          @cancel="showBankAddress = false"
+        <van-field
+          v-model="sheng"
+          is-link
+          readonly
+          label="开户省市"
+          placeholder="请选择开户省市"
+          @click="showSheng = true"
         />
-      </van-popup>
+        <van-popup v-model:show="showSheng" position="bottom">
+          <van-picker
+            show-toolbar
+            value-key="label"
+            :columns="shengOption"
+            @confirm="onConfirmSheng"
+            @cancel="showSheng = false"
+          />
+        </van-popup>
 
+        <van-field v-model="form.bankDeposit" label="关键词" placeholder="请输入开户行地址关键词，如镇街名称"/>
+        <van-field
+          v-model="form.bankAddress"
+          label="开户银行"
+          placeholder="输入【开户省市、关键词】后："
+          required
+          :rules="[{ required:true }]"
+          readonly
+          @click="showBankAddress = true"
+        >
+          <template #button>
+            <van-button size="small" type="primary" native-type="button" @click="searchBankAddress">点击检索</van-button>
+          </template>
+        </van-field>
+        <van-popup v-model:show="showBankAddress" position="bottom">
+          <van-picker
+            show-toolbar
+            value-key="bankDeposit"
+            :columns="bankAddressOption"
+            @confirm="onConfirmBankAddress"
+            @cancel="showBankAddress = false"
+          />
+        </van-popup>
 
-      <van-field v-model="form.payeePaymentLines" label="联行号" placeholder="开户银行选定后，自动填充！" required :rules="[{ required:true }]"/>
 
-      <van-field v-model="form.code" center clearable label="验证码" placeholder="图形验证码" required :rules="[{ required:true }]">
-        <template #button>
-          <img class="code-img" :src="codeUrl" @click="getCode" />
-        </template>
-      </van-field>
+        <van-field v-model="form.payeePaymentLines" label="联行号" placeholder="开户银行选定后，自动填充！" required :rules="[{ required:true }]"/>
 
+        <van-field v-model="form.code" center clearable label="验证码" placeholder="图形验证码" required :rules="[{ required:true }]">
+          <template #button>
+            <img class="code-img" :src="codeUrl" @click="getCode" />
+          </template>
+        </van-field>
+      </div>
       <div class="submit">
 <!--        <p>我已阅读并同意<span>《农村产权交易信息服务平台会员注册协议》</span></p>-->
-        <van-button round block type="info" color="#007E72" native-type="submit">立即注册</van-button>
+        <van-button round block type="info" color="#0DBCAA" native-type="submit">立即注册</van-button>
       </div>
     </van-form>
   </div>
@@ -147,8 +160,10 @@
 import { getCodeImg } from "@/api/login";
 import {userRegister, attachmentUpload, realtimeBackList, depositList} from "@/api/register/index";
 import {deleteUserImg, options, realtimeList} from "@/api/user";
+import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "userRegister",
+  components: { navBar },
   data() {
     return {
       height:0,
@@ -370,11 +385,12 @@ export default {
 
 <style scoped lang="scss">
 .app-container {
-  background-color: #FFF;
+  background-color: #F4F8FB;
   .code-img {
     width: 220px;
   }
 }
+
 .submit{
   width: 90%;
   margin: 2vh auto 0;
@@ -387,4 +403,28 @@ export default {
     }
   }
 }
+  .block_box{
+    width: 94%;
+    margin: 3vw auto;
+    background: #ffffff;
+    padding: 3vw 0;
+    border-radius: 15Px;
+    overflow: hidden;
+    .block_tt{
+      font-size: 16Px;
+      display: flex;
+      align-items: center;
+      padding: 0 3vw;
+      line-height: 1;
+      i{
+        display: block;
+        width: 3Px;
+        height: 14Px;
+        background: #0CBEA6;
+        margin-right: 5PX;
+        border-radius: 5PX;
+      }
+      /*border-left: 3Px solid #0CBEA6;*/
+    }
+  }
 </style>

src/views/sunVillage_info/bankAgriculture/paymentApproval/approvalAdd.vue

@@ -1,26 +1,27 @@
 <template>
   <div class="app-container">
-<!--    <van-nav-bar-->
-<!--      left-arrow-->
-<!--      fixed-->
-<!--      placeholder-->
-<!--      @click-left="goBack"-->
-<!--    >-->
-<!--      <template #title>-->
-<!--        <p style="font-weight: bold;">添加银行卡转账申请</p>-->
-<!--      </template>-->
-<!--      <template #right>-->
-<!--        <van-icon name="../../../static/images/icon/icon_flow.png" size="20" @click="goFlow"/>-->
-<!--      </template>-->
-<!--    </van-nav-bar>-->
-    <div class="header_main">
-      添加银行卡转账申请
-      <div class="return_btn" @click="onClickLeft"></div>
-      <div class="add_btn" @click="goFlow"></div>
-    </div>
+    <van-nav-bar
+      left-arrow
+      fixed
+      placeholder
+      @click-left="$router.back(-1)"
+    >
+      <template #title>
+        <p style="font-weight: bold;">添加银行卡转账申请</p>
+      </template>
+      <template #right>
+        <van-icon name="../../../../static/images/sunVillage_info/icon_flow.png" size="20" @click="goFlow"/>
+      </template>
+    </van-nav-bar>
+<!--    <div class="header_main">-->
+<!--      添加银行卡转账申请-->
+<!--      <div class="return_btn" @click="onClickLeft"></div>-->
+<!--      <div class="add_btn" @click="goFlow"></div>-->
+<!--    </div>-->
     <van-form @submit="getChange" @failed="getError" :show-error-message="false" scroll-to-error validate-first>
-      <p class="main_title">基础信息</p>
+
       <div class="main_box">
+        <p class="main_title"><i></i>基础信息</p>
         <van-field
           readonly
           clickable
@@ -156,8 +157,8 @@
         <van-field label="说明情况" v-model="form.explainSituation" type="textarea" placeholder="请输入说明情况" input-align="right" rows="3" label-width="auto"/>
       </div>
 
-      <p class="main_title" v-if="capitalExpenditureOpen">关联项目</p>
       <div class="main_box" v-if="capitalExpenditureOpen" style="margin-bottom: 10px;margin-top: 10px;position:relative;">
+        <p class="main_title" v-if="capitalExpenditureOpen"><i></i>关联项目</p>
         <van-field
           readonly
           clickable
@@ -202,8 +203,8 @@
         </van-popup>
         <van-field required :rules="[{ required: true , message:'请输入工程发票号' }]" v-model="projectForm.projectBillNum" label="工程发票号" placeholder="请输入工程发票号" input-align="right" label-width="auto"/>
       </div>
-      <p class="main_title" v-if="contractOpen">关联合同</p>
       <div class="main_box" v-if="contractOpen" style="margin-bottom: 10px;margin-top: 10px;position:relative;">
+        <p class="main_title" v-if="contractOpen"><i></i>关联合同</p>
         <van-field
           readonly
           clickable
@@ -228,8 +229,8 @@
         <van-field required :rules="[{ required: true , message:'请输入合同价款' }]" v-model="infoForm.totalAmount" label="合同价款（元）" placeholder="请输入合同价款（元）" input-align="right" label-width="auto"/>
       </div>
 
-      <p class="main_title">付款方信息</p>
-      <div class="main_box">
+      <div class="main_box" style="margin-top: 10px;">
+        <p class="main_title"><i></i>付款方信息</p>
         <!--      <van-field label="付款方" v-model="form.payer" placeholder="请输入付款方" input-align="right" label-width="auto"/>-->
         <van-field
           readonly
@@ -256,13 +257,15 @@
         <van-field required label="余额" readonly v-model="form.balance" placeholder="请输入余额" input-align="right" label-width="auto"/>
       </div>
 
-      <div class="main_title main_title_box">
-        <p>收款方信息</p>
-        <router-link  v-if="!isModifyOrder && isCanBatch"  :to="{name:'sunVillageApprovalCollectionAdd', params: {accountType:form.accountType,isPeers:form.isPeers,bankType:form.bankType,option:form}}">添加收款方</router-link>
+      <div class="main_box" style="margin-top: 10px;display: flex;justify-content: space-between;align-items: center;">
+        <div class="main_title main_title_box" style="margin-top: 0.2rem;">
+          <p style="display: flex;align-items: center;margin-right: 10vw;"><i></i>收款方信息</p>
+          <router-link  v-if="!isModifyOrder && isCanBatch"  :to="{name:'sunVillageApprovalCollectionAdd', params: {accountType:form.accountType,isPeers:form.isPeers,bankType:form.bankType,option:form}}">添加收款方</router-link>
+        </div>
         <van-button icon="plus" @click="addChargeItme(chargeItme.length)" size="mini" type="info" native-type="button" class="addFamily"/>
       </div>
 
-      <div class="main_box" style="margin-bottom: 15px;" v-if="form.bankType==1||form.bankType==2||form.bankType==3||form.bankType==4">
+      <div class="main_box" style="margin-top: 10px;" v-if="form.bankType==1||form.bankType==2||form.bankType==3||form.bankType==4">
         <van-cell title="收款账户类型" v-if="form.bankType==1">
           <template #right-icon>
             <van-radio-group direction="horizontal" v-model="form.accountType" @change="accountTypeChange" >
@@ -280,7 +283,7 @@
           </template>
         </van-cell>
       </div>
-      <div :style="{position:'relative',padding: index == 0 ? '':'10px 0 0 0'}" v-for="(item, index) in chargeItme" :key="index">
+      <div style="margin-top: 10px;" :style="{position:'relative',padding: index == 0 ? '':'10px 0 0 0'}" v-for="(item, index) in chargeItme" :key="index">
         <van-button icon="minus" size="mini" type="danger" class="deleteFamily" native-type="button" v-if="index!=0" @click="deleteChargeItme(index)" />
         <div class="main_box" style="margin-bottom: 10px;position:relative;">
           <van-field
@@ -326,8 +329,8 @@
           </van-popup>-->
         </div>
       </div>
-      <p class="main_title"  v-if="isModifyOrder" style="margin: 0.2rem 3%;">上传附件<i style="margin-right: 0.5em;"></i><span style="font-size: 12px;color: red;">（若申请单未变动可不必点击底部的修改按钮）</span></p>
-      <div class="main_box" style="padding: 5px 0 0 0;"  v-if="isModifyOrder">
+      <div class="main_box" style="padding: 5px 0 0 0;margin-top: 10px;" v-if="isModifyOrder">
+        <p class="main_title"  v-if="isModifyOrder"><i></i>上传附件<span style="margin-left: 0.5em;font-size: 12px;color: #ff0000;">（若申请单未变动可不必点击底部的修改按钮）</span></p>
         <van-cell value="收据" />
         <van-uploader v-model="fileList1" :after-read="beforeRead('1')" @delete="deleteFile" @click-preview="previewPreview" style="margin-left:8px;">
           <template #preview-cover="file">
@@ -1421,6 +1424,12 @@
 </script>
 
 <style scoped lang="scss">
+  /deep/ .van-nav-bar{
+    background: linear-gradient(to right , #9EF7FF , #2637D8);
+    p,i{
+      color: #ffffff;
+    }
+  }
   .app-container {
     padding-bottom: 2%;
     .header_main{
@@ -1462,10 +1471,19 @@
     align-items: center;
   }
   .main_title{
-    font-size: 0.4rem;
-    color: #1D6FE9;
-    margin: 0.2rem 6%;
+    font-size: 0.45rem;
+    color: #333333;
+    margin: 0.4rem 3% 0.2rem;
     position: relative;
+    display: flex;
+    align-items: center;
+    i{
+      display: block;
+      width: 3PX;
+      height: 0.4rem;
+      background-color: #4B72E4;
+      margin-right: 10PX;
+    }
     a{
       background: #1989fa;
       color: #ffffff;
@@ -1492,6 +1510,7 @@
     //top: -2px;
     //right: 0;
     border-radius: 50%;
+    margin-right: 3%;
   }
   .deleteFamily{
     position: absolute;

src/views/sunVillage_info/bankAgriculture/paymentApproval/approvalDetail.vue

@@ -10,11 +10,11 @@
         <p style="font-weight: bold;">查看银行卡转账申请</p>
       </template>
       <template #right>
-        <van-icon name="../../../static/images/icon/icon_flow.png" size="20" @click="goFlow"/>
+        <van-icon name="../../../../static/images/sunVillage_info/icon_flow.png" size="20" @click="goFlow"/>
       </template>
     </van-nav-bar>
-    <p class="main_title">基础信息</p>
     <div class="main_box">
+      <p class="main_title"><i></i>基础信息</p>
       <van-field readonly label="申请时间" v-model="form.applyDate" input-align="right" />
       <van-field readonly label="资金支出类别" v-model="capitalExpenditureType" input-align="right" label-width="auto" />
       <van-field readonly label="支出总金额" v-model="form.expenditureAmount" input-align="right" label-width="auto"/>
@@ -37,8 +37,8 @@
       <van-field readonly label="说明情况" v-model="form.explainSituation" type="textarea" input-align="right" rows="3" label-width="auto"/>
     </div>
 
-    <p class="main_title">付款方信息</p>
-    <div class="main_box">
+    <div class="main_box" style="margin-top: 10px;">
+      <p class="main_title"><i></i>付款方信息</p>
       <van-field readonly label="付款方" v-model="form.payer" input-align="right" label-width="auto"/>
       <van-field readonly label="付款方账户" v-model="form.payerAccount" input-align="right" label-width="auto"/>
       <van-field readonly label="余额" v-model="form.balance" input-align="right" label-width="auto"/>
@@ -57,16 +57,11 @@
       <van-field readonly label="合同价款（元）" v-model="infoForm.totalAmount" input-align="right" label-width="auto"/>
     </div>
 
-    <p class="main_title">收款方信息</p>
-
-    <div class="main_box" style="margin-bottom: 15px;">
+    <div class="main_box" style="position:relative;margin-top: 10px;">
+      <p class="main_title"><i></i>收款方信息</p>
       <van-field readonly label="收款账户类型" v-if="form.bankType==1" v-model="form.accountType == 1 ? '公户':'私户'" input-align="right" label-width="auto" />
       <van-field readonly label="行内转账" v-if="form.bankType==2||form.bankType==3||form.bankType==4" v-model="form.isPeers == 'Y' ? '是':'否'" input-align="right" label-width="auto" />
-
-    </div>
-
-    <div style="position:relative;" >
-      <div class="main_box" style="margin-bottom: 10px;position:relative;" v-for="(item, index) in chargeItme" :key="index" v-if="index<listLength">
+      <div style="margin-bottom: 10px;position:relative;" v-for="(item, index) in chargeItme" :key="index" v-if="index<listLength">
         <van-field readonly label="收款方" v-model="item.payee" input-align="right" />
         <van-field readonly label="收款账户" v-model="item.payeeAccount" input-align="right" label-width="auto"/>
         <van-field readonly label="开户银行" v-model="item.bankDeposit" input-align="right" label-width="auto"/>
@@ -79,8 +74,8 @@
       <p class="main_more" v-if="chargeItme.length>1 && !showbtn" @click="listLength = 1,showbtn=true">收起列表</p>
     </div>
 
-    <p class="main_title">上传附件</p>
-    <div class="main_box" style="padding: 5px 0 0 0;">
+    <div class="main_box" style="padding: 5px 0 0 0;margin-top: 10px;">
+      <p class="main_title"><i></i>上传附件</p>
       <van-cell value="收据" />
       <van-uploader v-model="fileList1" v-if="fileList1==null||fileList1.length==0" :deletable="false"  disabled  :upload-text="'未上传附件'" style="margin-left:8px;"></van-uploader>
       <van-uploader v-model="fileList1" v-if="fileList1!=null&&fileList1.length>0" :deletable="false" @click-preview="previewPreview" :max-count="fileList1.length"  style="margin-left:8px;">
@@ -471,6 +466,12 @@
   .app-container {
     padding: 2% 0;
   }
+  /deep/ .van-nav-bar{
+    background: linear-gradient(to right , #9EF7FF , #2637D8);
+    p,i{
+      color: #ffffff;
+    }
+  }
   .main_more{
     width: 96%;
     margin: 0 auto;
@@ -483,10 +484,19 @@
     padding: 10PX 0;
   }
   .main_title{
-    font-size: 0.4rem;
-    color: #1D6FE9;
-    margin: 0.2rem 6%;
+    font-size: 0.45rem;
+    color: #333333;
+    margin: 0.4rem 3% 0.2rem;
     position: relative;
+    display: flex;
+    align-items: center;
+    i{
+      display: block;
+      width: 3PX;
+      height: 0.4rem;
+      background-color: #4B72E4;
+      margin-right: 10PX;
+    }
   }
   .main_box{
     width: 96%;

src/views/sunVillage_info/bankAgriculture/paymentApproval/approvalList.vue

@@ -1,25 +1,26 @@
 <template>
     <div class="app-container">
-<!--      <van-nav-bar-->
-<!--        left-arrow-->
-<!--        fixed-->
-<!--        placeholder-->
-<!--        @click-left="goBack()"-->
-<!--        @click-right="goAdd()"-->
-<!--      >-->
-<!--        <template #title>-->
-<!--          <p style="font-weight: bold;">银行卡转账申请列表</p>-->
-<!--        </template>-->
-<!--        <template #right>-->
-<!--          <van-icon name="add" size="18"/>-->
-<!--        </template>-->
-<!--      </van-nav-bar>-->
+      <van-nav-bar
+        left-arrow
+        fixed
+        placeholder
+        @click-left="onClickLeft"
+        @click-right="goAdd()"
+      >
+        <template #title>
+          <p style="font-weight: bold;">银行卡转账申请列表</p>
+        </template>
+        <template #right>
+          <van-icon name="add-o" size="25" v-show="showBtn"/>
+        </template>
+      </van-nav-bar>
 
-      <div class="header_main">
-        银行卡转账申请列表
-        <div class="return_btn" @click="onClickLeft"></div>
-        <div class="add_btn" @click="goAdd" v-show="showBtn"></div>
-      </div>
+<!--      <div class="header_main">-->
+<!--        银行卡转账申请列表-->
+<!--        <div class="return_btn" @click="onClickLeft"></div>-->
+<!--&lt;!&ndash;        <div class="add_btn" @click="goAdd" v-show="showBtn"></div>&ndash;&gt;-->
+<!--        <van-icon class="add_btn" name="add-o" size="25" @click="goAdd" v-show="showBtn" />-->
+<!--      </div>-->
 
       <van-list
         v-model="loading"
@@ -29,7 +30,7 @@
         <van-swipe-cell v-for="(item,index) in applicationList" :key="index">
           <van-cell :title="item.remark" center :to="{name:'sunVillageApprovalDetail', query: {id:item.id,auditbatchNo:item.auditbatchNo}}">
             <template #icon>
-              <van-icon name="../../../../../static/images/onlineHome/icon_yn1.png" size="30" color="#FF4646" style="margin-right: 10px;" />
+              <van-icon name="../../../../static/images/sunVillage_info/icon_yn1.png" size="30" color="#FF4646" style="margin-right: 10px;" />
             </template>
             <template #label>
               <p><span><i>￥</i>{{stateFormat(item.expenditureAmount)}}</span><i style="margin-right: 30px;"></i>{{item.applyDate}}</p>
@@ -189,10 +190,17 @@ export default {
 </script>
 
 <style scoped lang="scss">
+  /deep/ .van-nav-bar{
+    background: linear-gradient(to right , #9EF7FF , #2637D8);
+    p,i{
+      color: #ffffff;
+    }
+  }
   .app-container {
     .header_main{
       height: 116px;
-      background: url('../../../../assets/images/sunVillage_info/list_head.png') no-repeat;
+      /*background: url('../../../../assets/images/sunVillage_info/list_head.png') no-repeat;*/
+      background: linear-gradient(to right , #9EF7FF , #2637D8);
       background-size: 100% 100%;
       position: fixed;
       top: 0;
@@ -213,10 +221,10 @@ export default {
         top: 36px;
       }
       .add_btn{
-        width: 56.4px;
-        height: 40.8px;
-        background: url('../../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
-        background-size: 47px 34px;
+        /*width: 56.4px;*/
+        /*height: 40.8px;*/
+        /*background: url('../../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;*/
+        /*background-size: 47px 34px;*/
         position: absolute;
         right: 38px;
         top: 36px;
@@ -236,7 +244,7 @@ export default {
 
   }
   /deep/.van-cell__label span{
-    color: #1D6FE9;
+    color: #FF0000;
     font-weight: bold;
     i{
       font-size: 0.2rem;

src/views/sunVillage_info/bankAgriculture/paymentApproval/approvalModify.vue

@@ -10,12 +10,12 @@
         <p style="font-weight: bold;">修改银行卡转账申请</p>
       </template>
       <template #right>
-        <van-icon name="../../../static/images/icon/icon_flow.png" size="20" @click="goFlow"/>
+        <van-icon name="../../../../static/images/sunVillage_info/icon_flow.png" size="20" @click="goFlow"/>
       </template>
     </van-nav-bar>
     <van-form @submit="getChange" @failed="getError" :show-error-message="false" scroll-to-error validate-first>
-      <p class="main_title">基础信息</p>
       <div class="main_box">
+        <p class="main_title"><i></i>基础信息</p>
         <van-field
           readonly
           clickable
@@ -151,8 +151,8 @@
         <van-field label="说明情况" v-model="form.explainSituation" type="textarea" placeholder="请输入说明情况" input-align="right" rows="3" label-width="auto"/>
       </div>
 
-      <p class="main_title" v-if="capitalExpenditureOpen">关联项目</p>
       <div class="main_box" v-if="capitalExpenditureOpen" style="margin-bottom: 10px;margin-top: 10px;position:relative;">
+        <p class="main_title" v-if="capitalExpenditureOpen"><i></i>关联项目</p>
         <van-field
           readonly
           clickable
@@ -197,8 +197,8 @@
         </van-popup>
         <van-field required :rules="[{ required: true , message:'请输入工程发票号' }]" v-model="projectForm.projectBillNum" label="工程发票号" placeholder="请输入工程发票号" input-align="right" label-width="auto"/>
       </div>
-      <p class="main_title" v-if="contractOpen">关联合同</p>
       <div class="main_box" v-if="contractOpen" style="margin-bottom: 10px;margin-top: 10px;position:relative;">
+        <p class="main_title" v-if="contractOpen"><i></i>关联合同</p>
         <van-field
           readonly
           clickable
@@ -222,8 +222,8 @@
         <van-field required :rules="[{ required: true , message:'请输入合同编码' }]" v-model="infoForm.code" label="合同编码" placeholder="请输入合同编码" input-align="right" label-width="auto"/>
         <van-field required :rules="[{ required: true , message:'请输入合同价款' }]" v-model="infoForm.totalAmount" label="合同价款（元）" placeholder="请输入合同价款（元）" input-align="right" label-width="auto"/>
       </div>
-      <p class="main_title">付款方信息</p>
-      <div class="main_box">
+      <div class="main_box" style="margin-top: 10px;">
+        <p class="main_title"><i></i>付款方信息</p>
         <!--      <van-field label="付款方" v-model="form.payer" placeholder="请输入付款方" input-align="right" label-width="auto"/>-->
         <van-field
           readonly
@@ -250,13 +250,19 @@
         <van-field required label="余额" readonly v-model="form.balance" placeholder="请输入余额" input-align="right" label-width="auto"/>
       </div>
 
-      <p class="main_title">收款方信息<van-button icon="plus" @click="addChargeItme(chargeItme.length)" size="mini" type="info" native-type="button" class="addFamily"/></p>
 <!--      <div class="main_title main_title_box">-->
 <!--        <p>收款方信息</p>-->
 <!--        <router-link :to="{name:'collectionApprovalAdd', params: {accountType:form.accountType,isPeers:form.isPeers,bankType:form.bankType,option:form}}">添加收款方</router-link>-->
 <!--        <van-button icon="plus" @click="addChargeItme(chargeItme.length)" size="mini" type="info" native-type="button" class="addFamily"/>-->
 <!--      </div>-->
-      <div class="main_box" style="margin-bottom: 15px;">
+      <div class="main_box" style="margin-top: 10px;">
+        <div style="position:relative;">
+          <p class="main_title">
+            <i></i>收款方信息
+          </p>
+          <van-button icon="plus" @click="addChargeItme(chargeItme.length)" size="mini" type="info" native-type="button" class="addFamily"/>
+        </div>
+
         <van-cell title="收款账户类型" v-if="form.bankType==1">
           <template #right-icon>
             <van-radio-group direction="horizontal" v-model="form.accountType" @change="accountTypeChange" >
@@ -320,8 +326,8 @@
           </van-popup>
         </div>
       </div>
-      <p class="main_title" style="margin: 0.2rem 3%;">上传附件<i style="margin-right: 0.5em;"></i><span style="font-size: 12px;color: red;">（若申请单未变动可不必点击底部的修改按钮）</span></p>
       <div class="main_box" style="padding: 5px 0 0 0;">
+        <p class="main_title" style="margin: 0.2rem 3%;"><i></i>上传附件<span style="font-size: 12px;color: red;margin-left: 0.5em;">（若申请单未变动可不必点击底部的修改按钮）</span></p>
         <van-cell value="收据" />
         <van-uploader v-model="fileList1" :after-read="beforeRead('1')" @delete="deleteFile" @click-preview="previewPreview" style="margin-left:8px;">
           <template #preview-cover="file">
@@ -1288,22 +1294,31 @@
   .app-container {
     padding: 2% 0;
   }
+  /deep/ .van-nav-bar{
+    background: linear-gradient(to right , #9EF7FF , #2637D8);
+    p,i{
+      color: #ffffff;
+    }
+  }
   .main_title_box{
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   .main_title{
-    font-size: 0.4rem;
-    color: #1D6FE9;
-    margin: 0.2rem 6%;
+    font-size: 0.45rem;
+    color: #333333;
+    margin: 0.4rem 3% 0.2rem;
     position: relative;
-    /*a{*/
-    /*  background: #1989fa;*/
-    /*  color: #ffffff;*/
-    /*  padding: 0.05rem 0.3rem;*/
-    /*  border-radius: 5PX;*/
-    /*}*/
+    display: flex;
+    align-items: center;
+    i{
+      display: block;
+      width: 3PX;
+      height: 0.4rem;
+      background-color: #4B72E4;
+      margin-right: 10PX;
+    }
   }
   .main_box{
     width: 96%;
@@ -1322,7 +1337,7 @@
   .addFamily{
     position: absolute;
     top: -2px;
-    right: 0;
+    right: 3%;
     border-radius: 50%;
   }
   .deleteFamily{

src/views/sunVillage_info/bankAgriculture/paymentApproval/approvalProcess.vue

@@ -11,22 +11,29 @@
         </template>
       </van-nav-bar>
       <div class="main_box">
-        <van-row   v-for="(item,index) in processList" :key="index">
+        <van-row v-for="(item,index) in processList" :key="index">
           <van-divider content-position="center"><h4>批次号：{{index}}</h4></van-divider>
-          <van-row  v-for="(item1,index,i) in item" :key="i">
-            <van-col span="4" align="right">
-              <p class="icon_jian" v-show="item1.auditStatus=='1'"><van-icon name="minus" size="14" /></p>
-              <p class="icon_jian blue" v-show="item1.auditStatus=='3'"><van-icon name="success" size="14" /></p>
-              <p class="icon_jian red" v-show="item1.auditStatus=='2'"><van-icon name="cross" size="14" /></p>
+          <div>
+          <van-row class="row1" type="flex" align="center" v-for="(item1,index,i) in item" :key="i">
+            <van-col span="4">
+              <i></i>
+<!--              <p class="icon_jian" v-show="item1.auditStatus=='1'"><van-icon name="minus" size="14" /></p>-->
+<!--              <p class="icon_jian blue" v-show="item1.auditStatus=='3'"><van-icon name="success" size="14" /></p>-->
+<!--              <p class="icon_jian red" v-show="item1.auditStatus=='2'"><van-icon name="cross" size="14" /></p>-->
+              <p class="icon_jian" v-show="item1.auditStatus=='1'"></p>
+              <p class="icon_jian blue" v-show="item1.auditStatus=='3'"></p>
+              <p class="icon_jian red" v-show="item1.auditStatus=='2'"></p>
+              <i></i>
             </van-col>
             <van-col span="20">
+              <div class="right_main">
               <van-row>
-                <van-col span="12" style="padding: 0;">
+                <van-col span="8" style="padding: 0;">
                   <p v-show="item1.auditStatus == '1'">{{item1.actorName}}</p>
                   <p v-show="item1.auditStatus == '3'" class="textBlue">{{item1.actorName}}</p>
                   <p v-show="item1.auditStatus == '2'" class="textRed">{{item1.actorName}}</p>
                 </van-col>
-                <van-col span="12" style="padding: 0;" >
+                <van-col span="16" style="padding: 0;text-align: right;" >
                   <p v-show="item1.auditStatus == '1'">{{item1.auditTime}}</p>
                   <p v-show="item1.auditStatus == '3'" class="textBlue">{{item1.auditTime}}</p>
                   <p v-show="item1.auditStatus == '2'" class="textRed">{{item1.auditTime}}</p>
@@ -38,26 +45,32 @@
                   <p v-show="item1.auditStatus == '3'" class="textBlue">{{item1.auditBy}}</p>
                   <p v-show="item1.auditStatus == '2'" class="textRed">{{item1.auditBy}}</p>
                 </van-col>
-                <van-col span="12" style="padding: 0;">
+                <van-col span="12" style="padding: 0;text-align: right;">
                   <p v-show="item1.auditStatus == '1'">{{item1.auditRemark}}</p>
                   <p v-show="item1.auditStatus == '3'" class="textBlue">{{item1.auditRemark}}</p>
                   <p v-show="item1.auditStatus == '2'" class="textRed">{{item1.auditRemark}}</p>
                 </van-col>
               </van-row>
+              </div>
             </van-col>
           </van-row>
+          </div>
         </van-row>
         <van-divider content-position="center" v-if="approvalTemplateDetailList.length>0"><h4>审批流程</h4></van-divider>
-        <van-row v-if="approvalTemplateDetailList.length>0" v-for="(item1,index,i) in approvalTemplateDetailList" :key="i">
+        <div>
+        <van-row class="row2" type="flex" align="center" v-if="approvalTemplateDetailList.length>0" v-for="(item1,index,i) in approvalTemplateDetailList" :key="i">
           <van-col span="4" align="right">
-            <p class="icon_jian" ><van-icon name="minus" size="14" /></p>
+            <i></i>
+            <p class="icon_jian" ></p>
+            <i></i>
           </van-col>
           <van-col span="20">
+            <div class="right_main">
             <van-row>
               <van-col span="12" style="padding: 0;">
                 <p>{{item1.name}}</p>
               </van-col>
-              <van-col span="12" style="padding: 0;">
+              <van-col span="12" style="padding: 0;text-align: right;">
                 <p v-show="item1.approvalLevel == 1">组级审批</p>
                 <p v-show="item1.approvalLevel == 2">村级审批</p>
                 <p v-show="item1.approvalLevel == 3">镇级审批</p>
@@ -69,8 +82,10 @@
                 <p>{{item1.nickName}}<span v-if="item1.feeLimit != 0 && item1.nickName != null">({{item1.feeLimit}}元)</span></p>
               </van-col>
             </van-row>
+            </div>
           </van-col>
         </van-row>
+        </div>
       </div>
     </div>
 </template>
@@ -160,6 +175,12 @@ export default {
   .app-container {
     padding: 0.2rem 0;
   }
+  /deep/ .van-nav-bar{
+    background: linear-gradient(to right , #9EF7FF , #2637D8);
+    p,i{
+      color: #ffffff;
+    }
+  }
   .main_box{
     width: 96%;
     margin: 0 auto;
@@ -170,20 +191,18 @@ export default {
     padding: 20Px 0;
   }
   .icon_jian{
-    background-color: #C9C9C9;
+    border: 3PX solid #2638D8;
     display: inline-block;
     width: 20Px;
     height: 20Px;
-    line-height: 24Px;
-    text-align: center;
     border-radius: 50%;
     color: #FFF;
   }
   .blue{
-    background-color: #1D6FE9;
+    border-color: #2638D8;
   }
   .red{
-    background-color: rgb(245, 108, 108);
+    border-color: rgb(245, 108, 108);
   }
   .textBlue{
     color: #1D6FE9!important;
@@ -192,11 +211,57 @@ export default {
     color: rgb(245, 108, 108)!important;
   }
   .van-col{
-    padding: 10Px 10Px;
+    padding: 0Px 10Px;
+  }
+  .van-col--20{
+    padding: 10Px 20Px 10Px 0;
   }
   .van-col:nth-child(2){
     font-size: 16Px;
     color: #878787;
     line-height: 22Px;
   }
+  .van-col--4{
+    height: 94PX;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    /*justify-content: right;*/
+    i{
+      display: block;
+      height: 37PX;
+      border-right: 2PX dashed #929BEB;
+    }
+  }
+  .van-row{
+
+    .van-row{
+      .van-col{
+        /*padding: 5Px 0 0 0!important;*/
+        color: #878787;
+      }
+    }
+  }
+  .row1,.row2{
+    &:first-child{
+      .van-col--4{
+        i:first-child{
+          border-color: transparent;
+        }
+      }
+    }
+
+    &:last-child{
+      .van-col--4{
+        i:last-child{
+          border-color: transparent;
+        }
+      }
+    }
+  }
+  .right_main{
+    background-color: #F2F5FE;
+    padding: 10PX;
+    border-radius: 10PX;
+  }
 </style>

src/views/sunVillage_info/bankAgriculture/paymentApproval/approvalProcess3.vue

@@ -11,27 +11,38 @@
         </template>
       </van-nav-bar>
       <div class="main_box">
-        <van-row v-if="approvalTemplateDetailList.length>0" v-for="(item1,index,i) in approvalTemplateDetailList" :key="i">
+        <van-row type="flex" align="center" v-if="approvalTemplateDetailList.length>0" v-for="(item1,index,i) in approvalTemplateDetailList" :key="i">
           <van-col span="4" align="right">
-            <p class="icon_jian" ><van-icon name="minus" size="14" /></p>
+            <i></i>
+            <p class="icon_jian"></p>
+            <i></i>
+<!--            <van-icon name="minus" size="14" /><van-icon name="circle" size="14" color="#2638D8" />-->
           </van-col>
           <van-col span="20">
-            <van-row>
-              <van-col span="12" style="padding: 0;">
-                <p>{{item1.name}}</p>
-              </van-col>
-              <van-col span="12" style="padding: 0;">
-                <p v-show="item1.approvalLevel == 1">组级审批</p>
-                <p v-show="item1.approvalLevel == 2">村级审批</p>
-                <p v-show="item1.approvalLevel == 3">镇级审批</p>
-                <p v-show="item1.approvalLevel == 4">区县审批</p>
-              </van-col>
-            </van-row>
-            <van-row>
-              <van-col span="24" style="padding: 0;">
-                <p>{{item1.nickName}}<span v-if="item1.feeLimit != 0 && item1.nickName != null">({{item1.feeLimit}}元)</span></p>
-              </van-col>
-            </van-row>
+            <div class="right_main">
+              <van-row>
+                <van-col span="24" style="padding: 0;">
+                  <p>{{item1.name}}</p>
+                </van-col>
+<!--                <van-col span="12" style="padding: 0;">-->
+<!--                  <p v-show="item1.approvalLevel == 1">组级审批</p>-->
+<!--                  <p v-show="item1.approvalLevel == 2">村级审批</p>-->
+<!--                  <p v-show="item1.approvalLevel == 3">镇级审批</p>-->
+<!--                  <p v-show="item1.approvalLevel == 4">区县审批</p>-->
+<!--                </van-col>-->
+              </van-row>
+              <van-row>
+                <van-col span="16" style="padding: 10px 0 0 0;">
+                  <p>{{item1.nickName}}<span v-if="item1.feeLimit != 0 && item1.nickName != null" style="color: #FC0303;margin-left: 5PX;">{{item1.feeLimit}}元</span></p>
+                </van-col>
+                <van-col span="8" style="padding: 10px 0 0 0;text-align: right;">
+                  <p style="color: #2C41DA;" v-show="item1.approvalLevel == 1">组级审批</p>
+                  <p style="color: #2C41DA;" v-show="item1.approvalLevel == 2">村级审批</p>
+                  <p style="color: #2C41DA;" v-show="item1.approvalLevel == 3">镇级审批</p>
+                  <p style="color: #2C41DA;" v-show="item1.approvalLevel == 4">区县审批</p>
+                </van-col>
+              </van-row>
+            </div>
           </van-col>
         </van-row>
       </div>
@@ -78,6 +89,12 @@ export default {
   .app-container {
     padding: 0.2rem 0;
   }
+  /deep/ .van-nav-bar{
+    background: linear-gradient(to right , #9EF7FF , #2637D8);
+    p,i{
+      color: #ffffff;
+    }
+  }
   .main_box{
     width: 96%;
     margin: 0 auto;
@@ -88,7 +105,7 @@ export default {
     padding: 20Px 0;
   }
   .icon_jian{
-    background-color: #C9C9C9;
+    border: 3PX solid #2638D8;
     display: inline-block;
     width: 20Px;
     height: 20Px;
@@ -110,7 +127,27 @@ export default {
     color: rgb(245, 108, 108)!important;
   }
   .van-col{
-    padding: 10Px 10Px;
+    padding: 0Px 10Px;
+  }
+  .van-col--20{
+    padding: 10Px 20Px 10Px 0;
+  }
+  .van-col--4{
+    height: 94PX;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    /*justify-content: right;*/
+    i{
+      display: block;
+      height: 37PX;
+      border-right: 2PX dashed #929BEB;
+    }
+  }
+  .right_main{
+    background-color: #F2F5FE;
+    padding: 10PX;
+    border-radius: 10PX;
   }
   .van-col:nth-child(2){
     font-size: 16Px;
@@ -118,9 +155,23 @@ export default {
     line-height: 22Px;
   }
   .van-row{
+    &:first-child{
+      .van-col--4{
+        i:first-child{
+          border-color: transparent;
+        }
+      }
+    }
+    &:last-child{
+      .van-col--4{
+        i:last-child{
+          border-color: transparent;
+        }
+      }
+    }
     .van-row{
       .van-col{
-        padding: 5Px 0 0 0!important;
+        /*padding: 5Px 0 0 0!important;*/
         color: #878787;
       }
     }

src/views/sunVillage_info/index.vue

@@ -25,9 +25,8 @@
             </van-popover>
 <!--          @click="logout"-->
         </div>
+        <img src="../../../static/images/sunVillage_info/sunVillage_info_index_header.png" style="display:block;width:94%;margin:2vh auto 0;" alt="">
         <div class="index_info">
-            <div class="title"></div>
-
             <div class="nav_list" v-for="(item,idx) in menusList" :key="idx">
               <div class="nav_list_box">
                 <van-cell :border="false" style="border-radius: 6px;">
@@ -226,23 +225,26 @@
 </script>
 <style scoped lang="scss">
 .home_wrapper{
-    background: #f1f2f2;
     width: 100vw;
     min-height: 100vh;
+    background: #F5F6F9 url('../../../static/images/sunVillage_info/page_bg.png') no-repeat top center;
+    background-size: 100% auto;
     .head_main{
-        height: 340px;
-        background: url('../../assets/images/sunVillage_info/index_head.png') no-repeat;
-        background-size: 100% 100%;
         position: relative;
+        display: flex;
+        align-items: self-start;
+        justify-content: space-between;
+        width: 94%;
+        margin: 0 auto;
+        padding: 2vh 0 0;
         .location{
-            height: 42px;
+            /*height: 42px;*/
             line-height: 42px;
-            position: absolute;
-            left: 38px;
-            top: 72px;
             display: flex;
+            flex-direction: column;
+            align-items: self-start;
             .address{
-                padding:0 18px;
+                padding:0 18PX;
                 background:rgba(255,255,255,0.75);
                 border-radius: 42px;
                 font-size: 28px;
@@ -250,20 +252,19 @@
                 margin-right: 12px;
                 display: flex;
                 align-items:center;
+                margin-bottom: 10PX;
                 .icon{
                     display: block;
                     width: 20px;
                     height: 26px;
-                    background: url('../../assets/images/sunVillage_info/index_icon_1.png') no-repeat;
+                    background: url('../../../static/images/sunVillage_info/index_icon_1.png') no-repeat;
                     background-size: 100% 100%;
-                    margin-right: 10px;
+                    margin-right: 10PX;
                 }
             }
         }
         /deep/ .van-popover__wrapper{
-          position: absolute;
-          top: 64px;
-          right: 36px;
+
         }
         /deep/ .van-popover__action{
           width: 4rem;
@@ -282,13 +283,13 @@
             .icon{
                 width: 100%;
                 height: 100%;
-                background: url('../../assets/images/sunVillage_info/login_head_h.png') no-repeat;
+                background: url('../../../static/images/sunVillage_info/login_head_h.png') no-repeat;
                 background-size: 100% 100%;
             }
         }
     }
     .index_info{
-        padding-top: 4.1vh;
+        /*padding-top: 4.1vh;*/
         .title{
             width: 521px;
             height: 52px;
@@ -297,11 +298,11 @@
             margin:0 auto;
         }
         .nav_list{
-          margin-top: 3vh;
-          padding:0 38px;
-          &:nth-child(2){
-            margin-top: 6vh;
-          }
+          width: 94%;
+          margin: 3vh auto 0;
+          /*&:nth-child(2){*/
+          /*  margin-top: 6vh;*/
+          /*}*/
           .van-cell{
             background: transparent;
           }

src/views/sunVillage_info/index_code.vue

@@ -12,8 +12,8 @@
                 <i class="icon"></i>
             </div>
         </div>
-        <div class="index_info">
-            <div class="title"></div>
+      <img src="../../../static/images/sunVillage_info/sunVillage_info_index_code_header.png" style="display:block;width:94%;margin:0 auto;" alt="">
+      <div class="index_info">
             <div class="nav_list">
 
               <!--党务-->
@@ -166,23 +166,25 @@
     box-shadow: 0px 2px 5px #ccc;
   }
 .home_wrapper{
-    background: #f1f2f2;
     width: 100vw;
     min-height: 100vh;
+    background: #F5F6F9 url('../../../static/images/sunVillage_info/page_bg.png') no-repeat top center;
+    background-size: 100% auto;
     .head_main{
-        height: 340px;
-        background: url('../../assets/images/sunVillage_info/index_head_red.png') no-repeat;
-        background-size: 100% 100%;
         position: relative;
+        display: flex;
+        align-items: self-start;
+        justify-content: space-between;
+        width: 94%;
+        margin: 0 auto;
+        padding: 2vh 0 0;
         .location{
-            height: 42px;
             line-height: 42px;
-            position: absolute;
-            left: 38px;
-            top: 72px;
             display: flex;
+            flex-direction: column;
+            align-items: self-start;
             .address{
-                padding:0 18px;
+                padding:0 18PX;
                 background:rgba(255,255,255,0.75);
                 border-radius: 42px;
                 font-size: 28px;
@@ -190,13 +192,14 @@
                 margin-right: 12px;
                 display: flex;
                 align-items:center;
+                margin-bottom: 10PX;
                 .icon{
-                    display: block;
-                    width: 20px;
-                    height: 26px;
-                    background: url('../../assets/images/sunVillage_info/index_icon_1.png') no-repeat;
-                    background-size: 100% 100%;
-                    margin-right: 10px;
+                  display: block;
+                  width: 20px;
+                  height: 26px;
+                  background: url('../../../static/images/sunVillage_info/index_icon_1.png') no-repeat;
+                  background-size: 100% 100%;
+                  margin-right: 10PX;
                 }
             }
         }
@@ -207,9 +210,6 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            position: absolute;
-            top: 64px;
-            right: 36px;
             .icon{
                 width: 100%;
                 height: 100%;
@@ -219,7 +219,7 @@
         }
     }
     .index_info{
-        padding-top: 4.1vh;
+        padding-top: 2.1vh;
         .title{
             width: 521px;
             height: 52px;
@@ -228,7 +228,6 @@
             margin:0 auto;
         }
       .nav_list{
-        margin-top: 6vh;
         padding:0 30px;
         display: flex;
         flex-flow: wrap;

src/views/sunVillage_info/index_code_rights.vue

@@ -13,8 +13,8 @@
                 <i class="icon"></i>
             </div>
         </div>
-        <div class="index_info">
-            <div class="title"></div>
+      <img src="../../../static/images/sunVillage_info/sunVillage_info_index_code_right_header.png" style="display:block;width:94%;margin:0 auto;" alt="">
+      <div class="index_info">
             <div class="nav_box" style="margin-top: 3vh;" v-for="(item,idx) in menusList" :key="idx">
               <p class="nav_tit">{{item.modleName}}</p>
               <div class="nav_list">
@@ -131,37 +131,40 @@
     box-shadow: 0px 2px 5px #ccc;
   }
 .home_wrapper{
-    background: #f1f2f2;
     width: 100vw;
     min-height: 100vh;
+    background: #F5F6F9 url('../../../static/images/sunVillage_info/page_bg.png') no-repeat top center;
+    background-size: 100% auto;
     .head_main{
-        height: 340px;
-        background: url('../../assets/images/sunVillage_info/index_head_green.png') no-repeat;
-        background-size: 100% 100%;
-        position: relative;
+      position: relative;
+      display: flex;
+      align-items: self-start;
+      justify-content: space-between;
+      width: 94%;
+      margin: 0 auto;
+      padding: 2vh 0 0;
         .location{
-            height: 42px;
-            line-height: 42px;
-            position: absolute;
-            left: 38px;
-            top: 72px;
-            display: flex;
+          line-height: 42px;
+          display: flex;
+          flex-direction: column;
+          align-items: self-start;
             .address{
-                padding:0 18px;
-                background:rgba(132,131,147,0.75);
-                border-radius: 42px;
-                font-size: 28px;
-                color: #ffffff;
-                margin-right: 12px;
-                display: flex;
-                align-items:center;
+              padding:0 18PX;
+              background:rgba(255,255,255,0.75);
+              border-radius: 42px;
+              font-size: 28px;
+              color: #3f3d56;
+              margin-right: 12px;
+              display: flex;
+              align-items:center;
+              margin-bottom: 10PX;
                 .icon{
-                    display: block;
-                    width: 20px;
-                    height: 26px;
-                    background: url('../../assets/images/sunVillage_info/index_icon_1_green.png') no-repeat;
-                    background-size: 100% 100%;
-                    margin-right: 10px;
+                  display: block;
+                  width: 20px;
+                  height: 26px;
+                  background: url('../../../static/images/sunVillage_info/index_icon_1.png') no-repeat;
+                  background-size: 100% 100%;
+                  margin-right: 10PX;
                 }
             }
           .user{
@@ -178,9 +181,6 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            position: absolute;
-            top: 64px;
-            right: 36px;
             p{
               background: #3f3d56;
               color: #ffffff;
@@ -202,7 +202,7 @@
         }
     }
     .index_info{
-        padding-top: 4.1vh;
+        /*padding-top: 4.1vh;*/
         .title{
             width: 521px;
             height: 52px;

src/views/sunVillage_info/login.vue

@@ -1,56 +1,63 @@
 <template>
     <div class="home_wrapper">
-        <div class="focus_head">
+      <div class="focus_head">
+        <div class="title">
+          <p>您好，欢迎使用</p>
+          <p>阳光村务·事务管理~</p>
         </div>
+        <img src="../../../static/images/sunVillage_info/sunVillage_info_login_icon.png" alt="">
+      </div>
+
+      <div style="position:relative;top: -50PX;">
         <div class="focus_info">
-            <div class="icon"></div>
-            <div class="title"></div>
-        </div>
-      <van-form @submit="handleLogin">
-        <div class="login_from">
-            <div class="flex_block">
-                <div class="flex_input_main">
-                    <div class="icon_wrap user"></div>
-                    <div class="input_wrap">
-                        <input type="text" v-model="formData.username" class="ipt" placeholder="用户名"/>
-                    </div>
-                </div>
-            </div>
-            <div class="flex_block">
-                <div class="flex_input_main">
-                    <div class="icon_wrap password"></div>
-                    <div class="input_wrap">
-                        <input :type="show ? 'password' : 'text'" v-model="formData.password" class="ipt" maxlength="16" placeholder="密码"/>
-                    </div>
-                    <div :class="{'showHidden':true,'ico_hide':show}" @click="showPassword"></div>
-                </div>
-            </div>
-            <div class="flex_block">
-                <div class="flex_input_main valid">
-                    <div class="icon_wrap valid"></div>
-                    <div class="input_wrap">
-                        <input type="text" v-model="formData.code" class="ipt" maxlength="4" placeholder="请输入验证码"/>
-                    </div>
-                </div>
-                <div class="valid_main">
-                    <img :src="codeUrl" @click="getCode" />
-                </div>
-            </div>
-            <van-checkbox v-model="formData.rememberMe" shape="square">记住密码</van-checkbox>
-        </div>
-        <div class="login_btn">
-<!--            <div class="btn" :loading="loading">登录</div>-->
-            <van-button
-              class="btn"
-              round
-              block
-              type="info"
-              native-type="submit"
-              :loading="loading"
-            >登录</van-button>
+          <img src="../../../static/images/sunVillage_info/sunVillage_info_login_header.png" alt="">
         </div>
+        <van-form @submit="handleLogin">
+          <div class="login_from">
+              <div class="flex_block">
+                  <div class="flex_input_main">
+                      <div class="icon_wrap user"></div>
+                      <div class="input_wrap">
+                          <input type="text" v-model="formData.username" class="ipt" placeholder="用户名"/>
+                      </div>
+                  </div>
+              </div>
+              <div class="flex_block">
+                  <div class="flex_input_main">
+                      <div class="icon_wrap password"></div>
+                      <div class="input_wrap">
+                          <input :type="show ? 'password' : 'text'" v-model="formData.password" class="ipt" maxlength="16" placeholder="密码"/>
+                      </div>
+                      <div :class="{'showHidden':true,'ico_hide':show}" @click="showPassword"></div>
+                  </div>
+              </div>
+              <div class="flex_block">
+                  <div class="flex_input_main valid">
+                      <div class="icon_wrap valid"></div>
+                      <div class="input_wrap">
+                          <input type="text" v-model="formData.code" class="ipt" maxlength="4" placeholder="请输入验证码"/>
+                      </div>
+                  </div>
+                  <div class="valid_main">
+                      <img :src="codeUrl" @click="getCode" />
+                  </div>
+              </div>
+              <van-checkbox v-model="formData.rememberMe" shape="square">记住密码</van-checkbox>
+          </div>
+          <div class="login_btn">
+  <!--            <div class="btn" :loading="loading">登录</div>-->
+              <van-button
+                class="btn"
+                round
+                block
+                type="info"
+                native-type="submit"
+                :loading="loading"
+              >登录</van-button>
+          </div>
 
-      </van-form>
+        </van-form>
+      </div>
     </div>
 </template>
 
@@ -188,42 +195,41 @@
 
 <style scoped lang="scss">
   /deep/ .van-checkbox__label{
-    color: #ffffff;
+    color: #2376EC;
   }
 .home_wrapper{
-    background: #f1f2f2;
     width: 100vw;
     min-height: 100vh;
+    background: #F5F6F9 url('../../../static/images/sunVillage_info/sunVillage_info_login_bg.png') no-repeat center top;
+    background-size: 100% auto;
     .focus_head{
-        height: 450px;
-        background: url('../../assets/images/sunVillage_info/login_head.png') no-repeat;
-        background-size: 100% 100%;
-
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8vh 0 0 3vw;
+      .title{
+        color: #0B2554;
+        font-family: 黑体;
+        font-size: 2.5vh;
+        p{
+          margin-bottom: 1vh;
+        }
+      }
     }
     .focus_info{
-        margin-top: -74px;
-        .icon{
-            background: url('../../assets/images/sunVillage_info/login_head_t.png') no-repeat;
-            background-size: 100% 100%;
-            width: 145px;
-            height: 148px;
-            margin:0 auto;
-        }
-        .title{
-            width: 512px;
-            height: 52px;
-            background: url('../../assets/images/sunVillage_info/login_head_nr.png') no-repeat;
-            background-size: 100% 100%;
-            margin:30px auto 0;
-        }
+      img{
+        width: 94%;
+        margin: 0 auto;
+        display: block;
+      }
     }
     .login_from{
-        width: 676px;
-        height: 450px;
-        background: url('../../assets/images/sunVillage_info/login_main.png') no-repeat;
+        width: 94%;
+        background: #ffffff;
         background-size: 100% 100%;
-        margin: 50px auto 0;
-        padding:60px 50px 0;
+        margin: -1PX auto 0;
+        padding:20px 50px 50px;
+        border-radius: 0 0 20PX 20PX;
         .flex_block{
             margin-bottom: 40px;
             display: flex;
@@ -233,9 +239,9 @@
                 display: flex;
                 flex: 1;
                 align-items:center;
-                background: rgba(255,255,255,0.7);
+                background: #E7F0FF;
                  border-radius: 62px;
-                 height: 62px;
+                 height: 50Px;
                 .icon_wrap{
                     width: 35px;
                     height: 35px;
@@ -285,13 +291,13 @@
                 }
             }
             .valid_main{
-                width: 165px;
-                height: 62px;
-                border-radius: 30px;
+                width: 120PX;
+                height: 50PX;
+                border-radius: 50PX;
                 img{
                   width: 100%;
                   height: 100%;
-                  border-radius: 30px;
+                  border-radius: 50PX;
                 }
             }
         }
@@ -299,16 +305,15 @@
     .login_btn{
         padding-top: 80px;
         .btn{
-          width: 315px;
-          height: 70px;
-          background:url('../../assets/images/sunVillage_info/login_btn.png') no-repeat;
-          background-size: 100% 100%;
+          width: 90%;
+          height: 50PX;
           margin:0 auto;
           font-size: 32px;
           color: #fff;
-          line-height: 70px;
+          line-height: 50PX;
           text-align: center;
           border: none;
+          background: linear-gradient(to right , #97EDF7 , #2376EC);
         }
     }
 }

src/views/sunVillage_info/login_code.vue

@@ -1,61 +1,66 @@
 <template>
     <div class="home_wrapper">
       <div class="return_btn" @click="onClickLeft"></div>
-        <div class="focus_head">
+      <div class="focus_head">
+        <div class="title">
+          <p>您好，</p>
+          <p>村民身份验证</p>
         </div>
+        <img src="../../../static/images/sunVillage_info/sunVillage_info_login_code_icon.png" alt="">
+      </div>
+      <div style="position:relative;top: -70PX;">
         <div class="focus_info">
-            <div class="icon"></div>
-            <div class="title"></div>
+          <img src="../../../static/images/sunVillage_info/sunVillage_info_login_code_header.png" alt="">
         </div>
-      <van-form @submit="handleLogin">
-        <div class="login_from">
-            <div class="flex_block">
-                <div class="flex_input_main">
-                    <div class="icon_wrap user"></div>
-                    <div class="input_wrap">
-                        <input type="text" v-model="formData.memberName" class="ipt" placeholder="姓名"/>
-                    </div>
-                </div>
-            </div>
-            <div class="flex_block">
-                <div class="flex_input_main">
-                    <div class="icon_wrap password"></div>
-                    <div class="input_wrap">
-                        <input type="text" v-model="formData.idcard" class="ipt" placeholder="身份证号码"/>
-                    </div>
-                </div>
-            </div>
-<!--            <div class="flex_block">-->
-<!--                <div class="flex_input_main valid">-->
-<!--                    <div class="icon_wrap valid"></div>-->
-<!--                    <div class="input_wrap">-->
-<!--                        <input type="text" v-model="formData.code" class="ipt" maxlength="4" placeholder="请输入验证码"/>-->
-<!--                    </div>-->
-<!--                </div>-->
-<!--                <div class="valid_main">-->
-<!--                    <img :src="codeUrl" @click="getCode" />-->
-<!--                </div>-->
-<!--            </div>-->
-            <!-- <div style="display: flex;align-items: center;justify-content: space-between;">
-              <van-checkbox v-model="formData.identityCheck">核身校验</van-checkbox>
+        <van-form @submit="handleLogin">
+          <div class="login_from">
+              <div class="flex_block">
+                  <div class="flex_input_main">
+                      <div class="icon_wrap user"></div>
+                      <div class="input_wrap">
+                          <input type="text" v-model="formData.memberName" class="ipt" placeholder="姓名"/>
+                      </div>
+                  </div>
+              </div>
+              <div class="flex_block">
+                  <div class="flex_input_main">
+                      <div class="icon_wrap password"></div>
+                      <div class="input_wrap">
+                          <input type="text" v-model="formData.idcard" class="ipt" placeholder="身份证号码"/>
+                      </div>
+                  </div>
+              </div>
+  <!--            <div class="flex_block">-->
+  <!--                <div class="flex_input_main valid">-->
+  <!--                    <div class="icon_wrap valid"></div>-->
+  <!--                    <div class="input_wrap">-->
+  <!--                        <input type="text" v-model="formData.code" class="ipt" maxlength="4" placeholder="请输入验证码"/>-->
+  <!--                    </div>-->
+  <!--                </div>-->
+  <!--                <div class="valid_main">-->
+  <!--                    <img :src="codeUrl" @click="getCode" />-->
+  <!--                </div>-->
+  <!--            </div>-->
+              <!-- <div style="display: flex;align-items: center;justify-content: space-between;">
+                <van-checkbox v-model="formData.identityCheck">核身校验</van-checkbox>
+                <van-checkbox v-model="formData.rememberMe">记住我的信息</van-checkbox>
+              </div> -->
               <van-checkbox v-model="formData.rememberMe">记住我的信息</van-checkbox>
-            </div> -->
-            <van-checkbox v-model="formData.rememberMe">记住我的信息</van-checkbox>
-        </div>
-        <div class="login_btn">
-<!--            <div class="btn" :loading="loading">登录</div>-->
-            <van-button
-              class="btn"
-              round
-              block
-              type="info"
-              native-type="submit"
-              color="linear-gradient(to right, #2ec8c4, #30c271)"
-              :loading="loading"
-            >验证</van-button>
-        </div>
+          </div>
+          <div class="login_btn">
+  <!--            <div class="btn" :loading="loading">登录</div>-->
+              <van-button
+                class="btn"
+                round
+                block
+                type="info"
+                native-type="submit"
+                :loading="loading"
+              >验证</van-button>
+          </div>
 
-      </van-form>
+        </van-form>
+      </div>
     </div>
 </template>
 
@@ -165,15 +170,16 @@
 
 <style scoped lang="scss">
   /deep/ .van-checkbox__label{
-    color: #ffffff;
+    color: #2376EC;
   }
   /deep/ .van-checkbox{
-    justify-content: right;
+    /*justify-content: right;*/
   }
 .home_wrapper{
-    background: #f1f2f2;
     width: 100vw;
     min-height: 100vh;
+    background: #F5F6F9 url('../../../static/images/sunVillage_info/sunVillage_info_login_code_bg.png') no-repeat center top;
+    background-size: 100% auto;
     .return_btn {
       width: 24px;
       height: 43.2px;
@@ -184,47 +190,46 @@
       top: 36px;
     }
     .focus_head{
-        height: 450px;
-        background: url('../../assets/images/sunVillage_info/login_head_code_green.png') no-repeat;
-        background-size: 100% 100%;
-
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8vh 0 0 3vw;
+      .title{
+        color: #0B2554;
+        font-family: 黑体;
+        font-size: 2.5vh;
+        p{
+          margin-bottom: 1vh;
+        }
+      }
     }
     .focus_info{
-        margin-top: -74px;
-        .icon{
-            background: url('../../assets/images/sunVillage_info/login_head_t.png') no-repeat;
-            background-size: 100% 100%;
-            width: 145px;
-            height: 148px;
-            margin:0 auto;
-        }
-        .title{
-            width: 180PX;
-            height: 52px;
-            background: url('../../assets/images/sunVillage_info/login_head_nr_code.png') no-repeat;
-            background-size: 100% 100%;
-            margin:30px auto 0;
-        }
+      img{
+        width: 94%;
+        margin: 0 auto;
+        display: block;
+      }
     }
     .login_from{
-        width: 676px;
-        height: 350px;
-        background: url('../../assets/images/sunVillage_info/login_main_green.png') no-repeat;
-        background-size: 100% 100%;
-        margin: 50px auto 0;
-        padding:60px 50px 0;
+      width: 94%;
+      /*height: 550px;*/
+      background: #ffffff;
+      background-size: 100% 100%;
+      margin: -1PX auto 0;
+      padding:20px 50px 50px;
+      border-radius: 0 0 20PX 20PX;
         .flex_block{
             margin-bottom: 40px;
             display: flex;
             justify-content:space-between;
             .flex_input_main{
-                position: relative;
-                display: flex;
-                flex: 1;
-                align-items:center;
-                background: rgba(255,255,255,0.7);
-                 border-radius: 62px;
-                 height: 62px;
+              position: relative;
+              display: flex;
+              flex: 1;
+              align-items:center;
+              background: #E7F0FF;
+              border-radius: 62px;
+              height: 50Px;
                 .icon_wrap{
                     width: 35px;
                     height: 35px;
@@ -286,18 +291,20 @@
             }
         }
     }
-    .login_btn{
-        padding-top: 80px;
-        .btn{
-          width: 315px;
-          height: 80px;
-          margin:0 auto;
-          font-size: 32px;
-          color: #fff;
-          text-align: center;
-          border: none;
-        }
+  .login_btn{
+    padding-top: 80px;
+    .btn{
+      width: 90%;
+      height: 50PX;
+      margin:0 auto;
+      font-size: 32px;
+      color: #fff;
+      line-height: 50PX;
+      text-align: center;
+      border: none;
+      background: linear-gradient(to right , #97EDF7 , #2376EC);
     }
+  }
 }
 
 </style>

src/views/supply/index.vue

@@ -1,15 +1,8 @@
 <template>
   <div class="app-container">
-    <van-nav-bar
-      title="个人供求"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
-    <van-tabs animated color="#007b76" type="card" style="margin-top: 10px;">
-      <van-tab>
-        <template #title><van-icon name="label" size="18" style="top: 4px"/>供应信息</template>
+    <navBar title="个人供求" background="0" positionType="fixed"></navBar>
+    <van-tabs animated :swipeable="true">
+      <van-tab title="供应信息">
         <van-list
           v-model="loading"
           :finished="finished"
@@ -17,18 +10,25 @@
           style="margin-top: 10px;"
           @load="getList"
         >
-          <van-cell icon="play" v-for="(item,index) in supplyList" :key="index" :to="{path:'/supply/supplyDetail',query:{id:item.id}}"  >
+          <van-cell v-for="(item,index) in supplyList" :key="index" :to="{path:'/supply/supplyDetail',query:{id:item.id}}"  >
             <template #title>
               {{item.location}}
             </template>
             <template #label>
-              联系电话：{{item.phone}} <p style="float: right;">发布时间：{{item.logintime}}</p>
+              <div style="display: flex;align-items: center;justify-content: space-between;">
+                <p style="color:#2D87E8;display: flex;align-items: center;"><img src="../../../static/images/transaction_new/supply/supply_icon_01.png" alt="">{{item.phone}}</p>
+                <p style="float: right;"><van-icon name="clock-o" color="#AAB1B5" style="margin-right: 5px;" />{{item.logintime}}</p>
+              </div>
+            </template>
+            <template #right-icon>
+              <div style="width: 5%;">
+                <img src="../../../static/images/transaction_new/supply/supply_icon_02.png" style="position:absolute;right: 0;top: 0;" alt="">
+              </div>
             </template>
           </van-cell>
         </van-list>
       </van-tab>
-      <van-tab title="选项">
-        <template #title><van-icon name="bookmark" size="18" style="top: 4px"/>需求信息</template>
+      <van-tab title="需求信息">
         <van-list
           v-model="loadingSecond"
           :finished="finishedSecond"
@@ -36,12 +36,20 @@
           style="margin-top: 10px;"
           @load="getSecondList"
         >
-          <van-cell icon="play"  v-for="(item,index) in supplySecondList" :key="index" :to="{path:'/supply/supplyDetail',query:{id:item.id}}">
+          <van-cell v-for="(item,index) in supplySecondList" :key="index" :to="{path:'/supply/supplyDetail',query:{id:item.id}}">
             <template #title>
               {{item.location}}
             </template>
             <template #label>
-              联系电话：{{item.phone}} <p style="float: right;">发布时间：{{item.logintime}}</p>
+              <div style="display: flex;align-items: center;justify-content: space-between;">
+                <p style="color:#2D87E8;display: flex;align-items: center;"><img src="../../../static/images/transaction_new/supply/supply_icon_01.png" alt="">{{item.phone}}</p>
+                <p style="float: right;"><van-icon name="clock-o" color="#AAB1B5" style="margin-right: 5px;" />{{item.logintime}}</p>
+              </div>
+            </template>
+            <template #right-icon>
+              <div style="width: 5%;">
+                <img src="../../../static/images/transaction_new/supply/supply_icon_03.png" style="position:absolute;right: 0;top: 0;" alt="">
+              </div>
             </template>
           </van-cell>
         </van-list>
@@ -52,8 +60,11 @@
 
 <script>
 import { supplyList } from "@/api/supply/index";
+import navBar from "@/components/common/nav_bar.vue";
+
 export default {
   name: "supply",
+  components: { navBar },
   data() {
     return {
       //是否显示加载
@@ -118,9 +129,60 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.app-container {
-}
-  .titleClass{
-
+  .app-container {
+    height: 100vh;
+    background: #F4F8FB;
+  }
+  /deep/ .van-tabs__content{
+    background: transparent;
+    /*border-radius: 20PX;*/
+  }
+  /deep/ .van-tabs__nav{
+    /*background: transparent;*/
+    padding-bottom: 0;
+  }
+  /deep/ .van-tab--active{
+    background: #fff;
+  }
+  /deep/ .van-tab::after{
+    display: none;
+  }
+  /deep/ .van-tabs__wrap{
+    overflow: initial;
+  }
+  /deep/ .van-tabs__line{
+    /*background: linear-gradient(to right, #5166f5, #97eedc);*/
+    background: url("../../../static/images/transaction_new/tab_border.png") no-repeat center;
+    height: 0.35rem;
+    bottom: 0;
+  }
+  /deep/ .van-tab:nth-child(1)::before{
+    content: "";
+    position: absolute;
+    left: auto;
+    top: 0;
+    right: -19%;
+    bottom: 0;
+    background: url("../../../static/images/yinnong/login_tab_icon.png") no-repeat center;
+    background-size: 100% 100%;
+    width: 20%;
+  }
+  /deep/ .van-tab:nth-child(2)::before{
+    content: "";
+    position: absolute;
+    left: -19%;
+    top: 0;
+    right: auto;
+    bottom: 0;
+    /*background: url("../../../static/images/yinnong/login_tab_icon_right.png") no-repeat center;*/
+    /*background-size: 100% 100%;*/
+    width: 20%;
+  }
+  .van-cell{
+    border-radius: 10Px;
+    overflow: hidden;
+    position: relative;
+    width: 94%;
+    margin: 0 auto 1vh;
   }
 </style>

src/views/supply/supplyDetail.vue

@@ -1,37 +1,26 @@
 <template>
   <div class="app-container">
-    <van-nav-bar
-      title="供求详情"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
-    <van-row>
-      <van-col>项目名称：{{supplyDetails.projectName}}</van-col>
-    </van-row>
-    <van-row>
-      <van-col>项目地址：{{supplyDetails.location}}</van-col>
-    </van-row>
-    <van-row>
-      <van-col>姓名：{{supplyDetails.realname}}</van-col>
-    </van-row>
-    <van-row>
-      <van-col>联系电话：{{supplyDetails.phone}}</van-col>
-    </van-row>
-    <van-row>
-      <van-col>项目详情：{{supplyDetails.projectContent}}</van-col>
-    </van-row>
-    <van-row>
-      <van-col><img :src="'/api'+supplyDetails.fileUrl" alt="" width="100%"></van-col>
-    </van-row>
+    <navBar title="供求详情" background="0" positionType="fixed"></navBar>
+    <div class="block_box">
+      <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">供应详情信息</van-divider>
+      <van-cell title="项目名称" :value="supplyDetails.projectName" />
+      <van-cell title="项目地址" :value="supplyDetails.location" />
+      <van-cell title="姓名" :value="supplyDetails.realname" />
+      <van-cell title="联系电话" :value="supplyDetails.phone" />
+      <van-cell title="项目详情" :value="supplyDetails.projectContent" />
+      <van-row>
+        <van-col><img :src="'/api'+supplyDetails.fileUrl" alt="" width="100%"></van-col>
+      </van-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { supplyDetail } from "@/api/supply/index";
+import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "noticeDetail",
+  components: { navBar },
   data() {
     return {
       supplyDetails:''
@@ -56,18 +45,33 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.app-container {
-  padding: 0.5rem 5%;
-}
-.title{
-  font-size: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-.van-row{
-  margin-bottom: 0.4rem;
-}
-.van-col{
-  font-size: 0.4rem;
-  color: #666666;
-}
+  .app-container {
+    background-color: #F4F8FB;
+    height: calc(100vh - 0Px);
+    overflow-y: scroll;
+  }
+  .block_box{
+    width: 94%;
+    margin: 3vw auto;
+    background: #ffffff;
+    padding: 3vw 0;
+    border-radius: 15Px;
+    overflow: hidden;
+    .block_tt{
+      font-size: 16Px;
+      display: flex;
+      align-items: center;
+      padding: 0 3vw;
+      line-height: 1;
+      i{
+        display: block;
+        width: 3Px;
+        height: 14Px;
+        background: #0CBEA6;
+        margin-right: 5PX;
+        border-radius: 5PX;
+      }
+      /*border-left: 3Px solid #0CBEA6;*/
+    }
+  }
 </style>

src/views/user/accountSetting/index.vue

@@ -1,36 +1,33 @@
 <template>
   <div class="app-container" >
-    <van-nav-bar
-      title="账户设置"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
-    <van-cell title="用户资料修改" v-if="memberType==1" to="userInformation" is-link icon="points" />
-    <van-cell title="用户资料修改" v-if="memberType==2" to="companyInformation" is-link icon="points" />
+    <navBar title="账户设置" background="0" positionType="fixed"></navBar>
+    <van-cell title="用户资料修改" v-if="memberType==1" to="userInformation" is-link icon="edit" />
+    <van-cell title="用户资料修改" v-if="memberType==2" to="companyInformation" is-link icon="edit" />
 <!--    <van-cell title="银行账户信息修改" to="bankInformation" is-link icon="credit-pay" />-->
-    <van-cell title="密码修改" to="passWordInformation" is-link icon="lock" />
+    <van-cell title="密码修改" to="passWordInformation" is-link icon="shield-o" />
   </div>
 </template>
 
 <script>
 import { getInfo } from "@/api/login/index";
 import { getMember , showUserImg } from "@/api/user/index";
+import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "Setting",
+  components: { navBar },
   data() {
     return {
       memberType:1
     };
   },
   created() {
-    getInfo().then(response => {
-      getMember(response.user.userId).then(response => {
-        this.memberType = response.data.memberType;
-        console.log(this.memberType)
-      });
-    });
+    // getInfo().then(response => {
+    //   getMember(response.user.userId).then(response => {
+    //     this.memberType = response.data.memberType;
+    //     console.log(this.memberType)
+    //   });
+    // });
+    this.memberType = this.$route.query.memberType
   },
   methods: {
   },
@@ -61,6 +58,6 @@ export default {
     }
   }
   .van-icon{
-    color: #007E72;
+    /*color: #007E72;*/
   }
 </style>

src/views/user/accountSetting/passWordInformation/index.vue

@@ -1,18 +1,40 @@
 <template>
   <div class="app-container" :style="{height:height+'px'}">
-    <van-nav-bar
-      title="银行账户修改"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
+    <navBar title="密码修改" background="0" positionType="fixed"></navBar>
     <van-form @submit="submitBank">
-      <van-field v-model="form.oldPassWord" type="password" label="原密码" placeholder="请输入原密码" required :rules="[{ required:true }]"/>
-      <van-field v-model="form.newPassWord" type="password" label="新密码" placeholder="请输入新密码" required :rules="[{ required:true }]"/>
-      <van-field v-model="form.determinePassWord" type="password" label="确认密码" placeholder="请确认密码" required :rules="[{ required:true }]"/>
+
+      <div class="block_box">
+        <van-field
+          v-model="form.oldPassWord"
+          type="password"
+          label="原密码"
+          placeholder="请输入原密码"
+          required
+          :rules="[{ required:true }]"
+        />
+      </div>
+      <div class="block_box">
+        <van-field
+          v-model="form.newPassWord"
+          type="password"
+          label="新密码"
+          placeholder="请输入新密码"
+          required
+          :rules="[{ required:true }]"
+        />
+      </div>
+      <div class="block_box">
+        <van-field
+          v-model="form.determinePassWord"
+          type="password"
+          label="确认密码"
+          placeholder="请确认密码"
+          required
+          :rules="[{ required:true }]"
+        />
+      </div>
       <div class="submit">
-        <van-button round block type="info" color="#007E72" native-type="submit">保存</van-button>
+        <van-button round block type="info" color="#0DBCAA" native-type="submit">保存</van-button>
       </div>
     </van-form>
   </div>
@@ -20,10 +42,12 @@
 
 <script>
   import {getMember, passWordUpdate} from "@/api/user/index";
-import {Dialog} from "vant";
+  import {Dialog} from "vant";
   import {getInfo} from "@/api/login";
+  import navBar from "@/components/common/nav_bar.vue";
   export default {
     name: "bankInformation",
+    components: { navBar },
     data() {
       return {
         height:0,
@@ -69,7 +93,32 @@ import {Dialog} from "vant";
 
 <style scoped lang="scss">
   .app-container {
-    background-color: #FFF;
+    background-color: #F4F8FB;
+    height: calc(100vh - 0Px);
+    overflow-y: scroll;
+  }
+  .block_box{
+    width: 94%;
+    margin: 3vw auto;
+    background: #ffffff;
+    border-radius: 15Px;
+    overflow: hidden;
+    .block_tt{
+      font-size: 16Px;
+      display: flex;
+      align-items: center;
+      padding: 0 3vw;
+      line-height: 1;
+      i{
+        display: block;
+        width: 3Px;
+        height: 14Px;
+        background: #0CBEA6;
+        margin-right: 5PX;
+        border-radius: 5PX;
+      }
+      /*border-left: 3Px solid #0CBEA6;*/
+    }
   }
   .submit{
     position: absolute;

src/views/user/accountSetting/userInformation/companyInformation.vue

@@ -1,178 +1,175 @@
 <template>
   <div class="app-container">
-    <van-nav-bar
-      title="资料修改"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
+    <navBar title="资料修改" background="0" positionType="fixed"></navBar>
     <van-form @submit="submitForm">
-      <van-field v-model="tel" readonly type="tel" label="手机号" placeholder="请输入手机号" required :rules="[{ required:true }]" >
-<!--        <template #extra >-->
-<!--          <p style="color: #007e72" onclick="window.location='phoneInformation'">修改手机号</p>-->
-<!--        </template>-->
-      </van-field>
-<!--      <van-field value="15314031621" label="密码" placeholder="请输入密码" required :rules="[{ required:true }]"/>-->
-      <van-field v-model="userForm.companyName" label="公司名称" placeholder="请输入公司名称" required :rules="[{ required:true }]"/>
-      <van-field v-model="userForm.companyCode" label="社会信用代码" placeholder="请输入公司的社会信用代码"/>
+      <div class="block_box">
+        <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">用户信息</van-divider>
+        <van-field v-model="tel" readonly type="tel" label="手机号" placeholder="请输入手机号" required :rules="[{ required:true }]" >
+  <!--        <template #extra >-->
+  <!--          <p style="color: #007e72" onclick="window.location='phoneInformation'">修改手机号</p>-->
+  <!--        </template>-->
+        </van-field>
+  <!--      <van-field value="15314031621" label="密码" placeholder="请输入密码" required :rules="[{ required:true }]"/>-->
+        <van-field v-model="userForm.companyName" label="公司名称" placeholder="请输入公司名称" required :rules="[{ required:true }]"/>
+        <van-field v-model="userForm.companyCode" label="社会信用代码" placeholder="请输入公司的社会信用代码"/>
 
-      <van-field
-        readonly
-        clickable
-        label="企业性质"
-        :value="companyNameValue"
-        placeholder="选择企业性质"
-        @click="showPickerPiker = true"
-      />
-      <van-popup v-model="showPickerPiker" round position="bottom">
-        <van-picker
-          show-toolbar
-          :columns="companyNameList"
-          @cancel="showPickerPiker = false"
-          @confirm="onConfirmCompany"
+        <van-field
+          readonly
+          clickable
+          label="企业性质"
+          :value="companyNameValue"
+          placeholder="选择企业性质"
+          @click="showPickerPiker = true"
         />
-      </van-popup>
-<!--      <van-field v-model="userForm.companyNature" label="企业性质" placeholder="请输入企业性质" required :rules="[{ required:true }]" />-->
+        <van-popup v-model="showPickerPiker" round position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="companyNameList"
+            @cancel="showPickerPiker = false"
+            @confirm="onConfirmCompany"
+          />
+        </van-popup>
+  <!--      <van-field v-model="userForm.companyNature" label="企业性质" placeholder="请输入企业性质" required :rules="[{ required:true }]" />-->
 
 
-      <van-field v-model="userForm.companyScope" label="经营范围" placeholder="请输入经营范围" />
-      <van-field v-model="userForm.companyTimeLimit" label="经营期限" placeholder="请输入经营期限" />
-      <van-field
-        readonly
-        clickable
-        label="成立时间"
-        :value="userForm.companySetupTime"
-        placeholder="选择成立时间"
-        @click="showPicker = true"
-      />
-      <van-popup v-model="showPicker" round position="bottom">
-        <van-datetime-picker
-          v-model="currentDate"
-          type="date"
-          title="选择年月日"
-          :min-date="minDate"
-          :max-date="maxDate"
-          @cancel="showPicker = false"
-          @confirm="onConfirm"
+        <van-field v-model="userForm.companyScope" label="经营范围" placeholder="请输入经营范围" />
+        <van-field v-model="userForm.companyTimeLimit" label="经营期限" placeholder="请输入经营期限" />
+        <van-field
+          readonly
+          clickable
+          label="成立时间"
+          :value="userForm.companySetupTime"
+          placeholder="选择成立时间"
+          @click="showPicker = true"
         />
-      </van-popup>
+        <van-popup v-model="showPicker" round position="bottom">
+          <van-datetime-picker
+            v-model="currentDate"
+            type="date"
+            title="选择年月日"
+            :min-date="minDate"
+            :max-date="maxDate"
+            @cancel="showPicker = false"
+            @confirm="onConfirm"
+          />
+        </van-popup>
 
-      <!--<van-field v-model="userForm.companySetupTime" label="成立时间" placeholder="请输入成立时间" required :rules="[{ required:true }]" />-->
-      <van-field v-model="userForm.companyCapital" label="注册资金" placeholder="请输入注册资金" />
-      <van-field v-model="userForm.address" label="联系地址" placeholder="请输入联系地址" />
-      <van-field v-model="userForm.realname" label="法人姓名" placeholder="请输入法人姓名" required :rules="[{ required:true }]"/>
-      <van-field v-model="userForm.idCardNum" label="身份证号" placeholder="请输入法人身份证号" required :rules="[{ required:true }]"/>
+        <!--<van-field v-model="userForm.companySetupTime" label="成立时间" placeholder="请输入成立时间" required :rules="[{ required:true }]" />-->
+        <van-field v-model="userForm.companyCapital" label="注册资金" placeholder="请输入注册资金" />
+        <van-field v-model="userForm.address" label="联系地址" placeholder="请输入联系地址" />
+        <van-field v-model="userForm.realname" label="法人姓名" placeholder="请输入法人姓名" required :rules="[{ required:true }]"/>
+        <van-field v-model="userForm.idCardNum" label="身份证号" placeholder="请输入法人身份证号" required :rules="[{ required:true }]"/>
 
-      <van-field name="uploader" label="法人证件照" required>
-        <template #input>
-          <van-uploader :after-read="afterReadFRZJZ" :before-delete="deleteFileFRZJZ" v-model="fileListFRZJZ" multiple :max-count="1" />
-        </template>
-      </van-field>
+        <van-field name="uploader" label="法人证件照" required>
+          <template #input>
+            <van-uploader :after-read="afterReadFRZJZ" :before-delete="deleteFileFRZJZ" v-model="fileListFRZJZ" multiple :max-count="1" />
+          </template>
+        </van-field>
 
-      <van-field name="uploader" label="营业执照" required>
-        <template #input>
-          <van-uploader :after-read="afterReadYYZZ" :before-delete="deleteFileYYZZ" v-model="fileListYYZZ" multiple :max-count="1" />
-        </template>
-      </van-field>
+        <van-field name="uploader" label="营业执照" required>
+          <template #input>
+            <van-uploader :after-read="afterReadYYZZ" :before-delete="deleteFileYYZZ" v-model="fileListYYZZ" multiple :max-count="1" />
+          </template>
+        </van-field>
 
-      <van-field name="uploader" label="开户证明" required>
-        <template #input>
-          <van-uploader :after-read="afterReadKHZM" :before-delete="deleteFileKHZM" v-model="fileListKHZM" multiple :max-count="1" />
-        </template>
-      </van-field>
+        <van-field name="uploader" label="开户证明" required>
+          <template #input>
+            <van-uploader :after-read="afterReadKHZM" :before-delete="deleteFileKHZM" v-model="fileListKHZM" multiple :max-count="1" />
+          </template>
+        </van-field>
 
-      <van-field v-model="userForm.bankCardName" label="开户姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
-      <van-field v-model="userForm.bankCardNum" label="开户账号" placeholder="请输入开户账号" required :rules="[{ required:true }]"/>
+        <van-field v-model="userForm.bankCardName" label="开户姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
+        <van-field v-model="userForm.bankCardNum" label="开户账号" placeholder="请输入开户账号" required :rules="[{ required:true }]"/>
 
-      <van-field
-        v-model="accountType"
-        is-link
-        readonly
-        required
-        :rules="[{ required:true }]"
-        label="账户类型"
-        placeholder="请选择账户类型"
-        @click="showAccountType = true"
-      />
-      <van-popup v-model:show="showAccountType" position="bottom">
-        <van-picker
-          show-toolbar
-          value-key="dictLabel"
-          :columns="accountTypeOption"
-          @confirm="onConfirmAccountType"
-          @cancel="showAccountType = false"
+        <van-field
+          v-model="accountType"
+          is-link
+          readonly
+          required
+          :rules="[{ required:true }]"
+          label="账户类型"
+          placeholder="请选择账户类型"
+          @click="showAccountType = true"
         />
-      </van-popup>
-
-      <van-divider>银行信息</van-divider>
-      <van-field
-        v-model="bankType"
-        is-link
-        readonly
-        required
-        :rules="[{ required:true }]"
-        label="所属银行"
-        placeholder="请选择所属银行"
-        @click="showBankType = true"
-      />
-      <van-popup v-model:show="showBankType" position="bottom">
-        <van-picker
-          show-toolbar
-          value-key="dictLabel"
-          :columns="bankTypeOption"
-          @confirm="onConfirmBankType"
-          @cancel="showArea = false"
-        />
-      </van-popup>
+        <van-popup v-model:show="showAccountType" position="bottom">
+          <van-picker
+            show-toolbar
+            value-key="dictLabel"
+            :columns="accountTypeOption"
+            @confirm="onConfirmAccountType"
+            @cancel="showAccountType = false"
+          />
+        </van-popup>
+      </div>
 
-      <van-field
-        v-model="sheng"
-        is-link
-        readonly
-        label="开户省市"
-        placeholder="请选择开户省市"
-        @click="showSheng = true"
-      />
-      <van-popup v-model:show="showSheng" position="bottom">
-        <van-picker
-          show-toolbar
-          value-key="label"
-          :columns="shengOption"
-          @confirm="onConfirmSheng"
-          @cancel="showSheng = false"
+      <div class="block_box">
+        <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">银行信息</van-divider>
+        <van-field
+          v-model="bankType"
+          is-link
+          readonly
+          required
+          :rules="[{ required:true }]"
+          label="所属银行"
+          placeholder="请选择所属银行"
+          @click="showBankType = true"
         />
-      </van-popup>
+        <van-popup v-model:show="showBankType" position="bottom">
+          <van-picker
+            show-toolbar
+            value-key="dictLabel"
+            :columns="bankTypeOption"
+            @confirm="onConfirmBankType"
+            @cancel="showArea = false"
+          />
+        </van-popup>
 
-      <van-field v-model="userForm.bankDeposit" label="关键词" placeholder="请输入开户行地址关键词"/>
-      <van-field
-        v-model="userForm.bankAddress"
-        label="开户银行"
-        placeholder="请输入开户银行"
-        required
-        :rules="[{ required:true }]"
-        readonly
-        @click="showBankAddress = true"
-      >
-        <template #button>
-          <van-button size="small" type="primary" native-type="button" @click="searchBankAddress">点击检索</van-button>
-        </template>
-      </van-field>
-      <van-popup v-model:show="showBankAddress" position="bottom">
-        <van-picker
-          show-toolbar
-          value-key="bankDeposit"
-          :columns="bankAddressOption"
-          @confirm="onConfirmBankAddress"
-          @cancel="showBankAddress = false"
+        <van-field
+          v-model="sheng"
+          is-link
+          readonly
+          label="开户省市"
+          placeholder="请选择开户省市"
+          @click="showSheng = true"
         />
-      </van-popup>
-
+        <van-popup v-model:show="showSheng" position="bottom">
+          <van-picker
+            show-toolbar
+            value-key="label"
+            :columns="shengOption"
+            @confirm="onConfirmSheng"
+            @cancel="showSheng = false"
+          />
+        </van-popup>
 
-      <van-field v-model="userForm.payeePaymentLines" label="联行号" placeholder="请输入开户银行" required :rules="[{ required:true }]"/>
+        <van-field v-model="userForm.bankDeposit" label="关键词" placeholder="请输入开户行地址关键词"/>
+        <van-field
+          v-model="userForm.bankAddress"
+          label="开户银行"
+          placeholder="请输入开户银行"
+          required
+          :rules="[{ required:true }]"
+          readonly
+          @click="showBankAddress = true"
+        >
+          <template #button>
+            <van-button size="small" type="primary" color="#FD683F" native-type="button" @click="searchBankAddress">检索</van-button>
+          </template>
+        </van-field>
+        <van-popup v-model:show="showBankAddress" position="bottom">
+          <van-picker
+            show-toolbar
+            value-key="bankDeposit"
+            :columns="bankAddressOption"
+            @confirm="onConfirmBankAddress"
+            @cancel="showBankAddress = false"
+          />
+        </van-popup>
 
+        <van-field v-model="userForm.payeePaymentLines" label="联行号" placeholder="请输入开户银行" required :rules="[{ required:true }]"/>
+      </div>
       <div class="submit" v-if="activitiStatus != '1'">
-        <van-button round block type="info" color="#007E72" native-type="submit" style="width: 90%;margin: 0 auto;">保存</van-button>
+        <van-button round block type="info" color="#0DBCAA" native-type="submit" style="width: 90%;margin: 0 auto;">保存</van-button>
       </div>
     </van-form>
   </div>
@@ -183,8 +180,10 @@ import { getInfo } from "@/api/login/index";
 import {getMember, base64Attach, userUpdate, showUserImg, deleteUserImg, options} from "@/api/user/index";
 import {Dialog} from "vant";
 import {base64Upload, depositList, realtimeBackList} from "@/api/register";
+import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "companyInformation",
+  components: { navBar },
   data() {
     return {
       activitiStatus:0,
@@ -499,15 +498,37 @@ export default {
 
 <style scoped lang="scss">
 .app-container {
-  background-color: #FFF;
-  padding-bottom: 3rem;
+  background-color: #F4F8FB;
+  height: calc(100vh - 0Px);
+  overflow-y: scroll;
+}
+.block_box{
+  width: 94%;
+  margin: 3vw auto;
+  background: #ffffff;
+  padding: 3vw 0;
+  border-radius: 15Px;
+  overflow: hidden;
+  .block_tt{
+    font-size: 16Px;
+    display: flex;
+    align-items: center;
+    padding: 0 3vw;
+    line-height: 1;
+    i{
+      display: block;
+      width: 3Px;
+      height: 14Px;
+      background: #0CBEA6;
+      margin-right: 5PX;
+      border-radius: 5PX;
+    }
+    /*border-left: 3Px solid #0CBEA6;*/
+  }
 }
 .submit{
-  position: fixed;
-  bottom: 0;
   width: 100%;
   padding: 5% 0;
-  background-color: #F9F9F9;
   p{
     text-align: center;
     margin-bottom: 0.2rem;

src/views/user/accountSetting/userInformation/userInformation.vue

@@ -1,47 +1,42 @@
 <template>
   <div class="app-container">
-    <van-nav-bar
-      title="资料修改"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
+    <navBar title="资料修改" background="0" positionType="fixed"></navBar>
     <van-form @submit="submitForm">
-      <van-field v-model="tel" readonly type="tel" label="手机号" placeholder="请输入手机号" readonly required :rules="[{ required:true }]" >
-<!--        <template #extra >-->
-<!--            <p style="color: #007e72" onclick="window.location='phoneInformation'">修改手机号</p>-->
-<!--        </template>-->
-      </van-field>
-      <van-field v-model="userForm.realname" label="姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
-      <van-field v-model="userForm.idCardNum" label="身份证号" placeholder="请输入身份证号" required :rules="[{ required:true }]"/>
-      <van-field v-model="userForm.address" label="联系地址" placeholder="请输入联系地址" />
-      <van-field name="uploader" label="身份证(正)" required>
-        <template #input>
-          <van-uploader :after-read="afterReadSFZ" :before-delete="deleteFileSFZ" v-model="fileListSFZ" multiple :max-count="1" />
-        </template>
-      </van-field>
-      <van-field name="uploader" label="银行卡" required>
-        <template #input>
-          <van-uploader :after-read="afterReadYHK" :before-delete="deleteFileYHK" v-model="fileListYHK" multiple :max-count="1" />
-        </template>
-      </van-field>
+      <div class="block_box">
+        <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">用户信息</van-divider>
+        <van-field v-model="tel" readonly type="tel" label="手机号" placeholder="请输入手机号" readonly required :rules="[{ required:true }]" >
+  <!--        <template #extra >-->
+  <!--            <p style="color: #007e72" onclick="window.location='phoneInformation'">修改手机号</p>-->
+  <!--        </template>-->
+        </van-field>
+        <van-field v-model="userForm.realname" label="姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
+        <van-field v-model="userForm.idCardNum" label="身份证号" placeholder="请输入身份证号" required :rules="[{ required:true }]"/>
+        <van-field v-model="userForm.address" label="联系地址" placeholder="请输入联系地址" />
+        <van-field name="uploader" label="身份证(正)" required>
+          <template #input>
+            <van-uploader :after-read="afterReadSFZ" :before-delete="deleteFileSFZ" v-model="fileListSFZ" multiple :max-count="1" />
+          </template>
+        </van-field>
+        <van-field name="uploader" label="银行卡" required>
+          <template #input>
+            <van-uploader :after-read="afterReadYHK" :before-delete="deleteFileYHK" v-model="fileListYHK" multiple :max-count="1" />
+          </template>
+        </van-field>
 
+        <van-field v-model="userForm.bankCardName" label="开户姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
+        <van-field v-model="userForm.bankCardNum" label="开户账号" placeholder="请输入开户账号" required :rules="[{ required:true }]"/>
 
-      <van-field v-model="userForm.bankCardName" label="开户姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
-      <van-field v-model="userForm.bankCardNum" label="开户账号" placeholder="请输入开户账号" required :rules="[{ required:true }]"/>
-
-      <van-field
-        v-model="accountType"
-        is-link
-        readonly
-        required
-        :rules="[{ required:true }]"
-        label="账户类型"
-        placeholder="请选择账户类型"
-        @click="showAccountType = true"
-      />
-      <van-popup v-model:show="showAccountType" position="bottom">
+        <van-field
+          v-model="accountType"
+          is-link
+          readonly
+          required
+          :rules="[{ required:true }]"
+          label="账户类型"
+          placeholder="请选择账户类型"
+          @click="showAccountType = true"
+        />
+        <van-popup v-model:show="showAccountType" position="bottom">
         <van-picker
           show-toolbar
           value-key="dictLabel"
@@ -50,75 +45,76 @@
           @cancel="showAccountType = false"
         />
       </van-popup>
+      </div>
 
-      <van-divider>银行信息</van-divider>
-      <van-field
-        v-model="bankType"
-        is-link
-        readonly
-        required
-        :rules="[{ required:true }]"
-        label="所属银行"
-        placeholder="请选择所属银行"
-        @click="showBankType = true"
-      />
-      <van-popup v-model:show="showBankType" position="bottom">
-        <van-picker
-          show-toolbar
-          value-key="dictLabel"
-          :columns="bankTypeOption"
-          @confirm="onConfirmBankType"
-          @cancel="showArea = false"
-        />
-      </van-popup>
-
-      <van-field
-        v-model="sheng"
-        is-link
-        readonly
-        label="开户省市"
-        placeholder="请选择开户省市"
-        @click="showSheng = true"
-      />
-      <van-popup v-model:show="showSheng" position="bottom">
-        <van-picker
-          show-toolbar
-          value-key="label"
-          :columns="shengOption"
-          @confirm="onConfirmSheng"
-          @cancel="showSheng = false"
+      <div class="block_box">
+        <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">银行信息</van-divider>
+        <van-field
+          v-model="bankType"
+          is-link
+          readonly
+          required
+          :rules="[{ required:true }]"
+          label="所属银行"
+          placeholder="请选择所属银行"
+          @click="showBankType = true"
         />
-      </van-popup>
+        <van-popup v-model:show="showBankType" position="bottom">
+          <van-picker
+            show-toolbar
+            value-key="dictLabel"
+            :columns="bankTypeOption"
+            @confirm="onConfirmBankType"
+            @cancel="showArea = false"
+          />
+        </van-popup>
 
-      <van-field v-model="userForm.bankDeposit" label="关键词" placeholder="请输入开户行地址关键词"/>
-      <van-field
-        v-model="userForm.bankAddress"
-        label="开户银行"
-        placeholder="请输入开户银行"
-        required
-        :rules="[{ required:true }]"
-        readonly
-        @click="showBankAddress = true"
-      >
-        <template #button>
-          <van-button size="small" type="primary" native-type="button" @click="searchBankAddress">点击检索</van-button>
-        </template>
-      </van-field>
-      <van-popup v-model:show="showBankAddress" position="bottom">
-        <van-picker
-          show-toolbar
-          value-key="bankDeposit"
-          :columns="bankAddressOption"
-          @confirm="onConfirmBankAddress"
-          @cancel="showBankAddress = false"
+        <van-field
+          v-model="sheng"
+          is-link
+          readonly
+          label="开户省市"
+          placeholder="请选择开户省市"
+          @click="showSheng = true"
         />
-      </van-popup>
-
+        <van-popup v-model:show="showSheng" position="bottom">
+          <van-picker
+            show-toolbar
+            value-key="label"
+            :columns="shengOption"
+            @confirm="onConfirmSheng"
+            @cancel="showSheng = false"
+          />
+        </van-popup>
 
-      <van-field v-model="userForm.payeePaymentLines" label="联行号" placeholder="请输入开户银行" required :rules="[{ required:true }]"/>
+        <van-field v-model="userForm.bankDeposit" label="关键词" placeholder="请输入开户行地址关键词"/>
+        <van-field
+          v-model="userForm.bankAddress"
+          label="开户银行"
+          placeholder="请输入开户银行"
+          required
+          :rules="[{ required:true }]"
+          readonly
+          @click="showBankAddress = true"
+        >
+          <template #button>
+            <van-button size="small" type="primary" color="#FD683F" native-type="button" @click="searchBankAddress">检索</van-button>
+          </template>
+        </van-field>
+        <van-popup v-model:show="showBankAddress" position="bottom">
+          <van-picker
+            show-toolbar
+            value-key="bankDeposit"
+            :columns="bankAddressOption"
+            @confirm="onConfirmBankAddress"
+            @cancel="showBankAddress = false"
+          />
+        </van-popup>
 
+        <van-field v-model="userForm.payeePaymentLines" label="联行号" placeholder="请输入开户银行" required :rules="[{ required:true }]"/>
+      </div>
       <div class="submit" v-if="activitiStatus != '1'">
-        <van-button round block type="info" color="#007E72" native-type="submit" style="width: 90%;margin: 0 auto;" >保存</van-button>
+        <van-button round block type="info" color="#0DBCAA" native-type="submit" style="width: 90%;margin: 0 auto;" >保存</van-button>
       </div>
     </van-form>
   </div>
@@ -129,8 +125,10 @@ import { getInfo } from "@/api/login/index";
 import {getMember, base64Attach, userUpdate, showUserImg, deleteUserImg, options} from "@/api/user/index";
 import {Dialog} from "vant";
 import {base64Upload, depositList, realtimeBackList} from "@/api/register";
+import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "userInformation",
+  components: { navBar },
   data() {
     return {
       height:0,
@@ -359,16 +357,38 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.app-container {
-  background-color: #FFF;
-  padding-bottom: 3rem;
-}
+  .app-container {
+    background-color: #F4F8FB;
+    height: calc(100vh - 0Px);
+    overflow-y: scroll;
+  }
+  .block_box{
+    width: 94%;
+    margin: 3vw auto;
+    background: #ffffff;
+    padding: 3vw 0;
+    border-radius: 15Px;
+    overflow: hidden;
+    .block_tt{
+      font-size: 16Px;
+      display: flex;
+      align-items: center;
+      padding: 0 3vw;
+      line-height: 1;
+      i{
+        display: block;
+        width: 3Px;
+        height: 14Px;
+        background: #0CBEA6;
+        margin-right: 5PX;
+        border-radius: 5PX;
+      }
+      /*border-left: 3Px solid #0CBEA6;*/
+    }
+  }
 .submit{
-  position: fixed;
-  bottom: 0;
   width: 100%;
   padding: 5% 0;
-  background-color: #F9F9F9;
   p{
     text-align: center;
     margin-bottom: 0.2rem;

src/views/user/application/index.vue

@@ -1,34 +1,30 @@
 <template>
   <div class="app-container">
-    <van-nav-bar
-      title="我的报名"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="goClickLeft"
-    />
-      <van-list
-        v-model="loading"
-        :finished="finished"
-        finished-text="没有更多了"
-        style="margin-top: 10px;"
-      >
-        <van-cell icon="play" v-for="(item , index) in supplyList" :key="index" :to="{path:'project/projectDetail',query:{id:item.projectId}}">
-          <template #title>
-             {{item.projectName}}
-          </template>
-          <template #label>
-            <p>报名状态：<span :style="{color:item.depositStatus == '1' ? '#007E72':'#c21F3a'}">{{item.depositStatus}}</span></p>
-            <p>竞价开始时间：{{item.biddingStartTime}}</p>
-            <p>实际竞价结束时间：{{item.biddingStopTime}}</p>
-            <p>距<span style="margin: 0 0.5em">结</span>束：
-              <van-count-down :time="item.endTime">
-                <template #default="timeData">{{timeData.days}}天{{timeData.hours}}时{{timeData.minutes}}分{{timeData.seconds}}秒</template>
-              </van-count-down>
-            </p>
-          </template>
-        </van-cell>
-      </van-list>
+    <navBar title="我的报名" background="0" positionType="fixed"></navBar>
+    <van-list
+      v-model="loading"
+      :finished="finished"
+      finished-text="没有更多了"
+      style="margin-top: 10px;"
+    >
+      <van-cell v-for="(item , index) in supplyList" :key="index" :to="{path:'project/projectDetail',query:{id:item.projectId}}">
+        <template #title>
+          {{item.projectName}}
+          <span class="tag_i" :style="{color:item.depositStatus == '1' ? '#0DBCAA':'#7368E4',background:item.depositStatus == '1' ? 'rgba(13,188,170,.15)':'rgba(115,104,228,.15)'}">{{item.depositStatus}}</span>
+        </template>
+        <template #label>
+          <p class="active_time"><van-icon name="bell" style="margin-right: 5PX;" />距结束：
+            <van-count-down :time="item.endTime">
+              <template #default="timeData">
+                <span>{{timeData.days}}</span>天<span>{{timeData.hours}}</span>时<span>{{timeData.minutes}}</span>分<span>{{timeData.seconds}}</span>秒
+              </template>
+            </van-count-down>
+          </p>
+          <p style="margin-top: 15px;">竞价开始时间：{{item.biddingStartTime}}</p>
+          <p style="margin-top: 15px;">实际结束时间：{{item.biddingStopTime}}</p>
+        </template>
+      </van-cell>
+    </van-list>
   </div>
 </template>
 
@@ -36,8 +32,10 @@
 import { getMember , getSignupByMemberId , deleteSupply} from "@/api/user/index";
 import { getInfo } from "@/api/login/index";
 import {Dialog} from "vant";
+import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "userSupply",
+  components: { navBar },
   data() {
     return {
       //是否显示加载
@@ -118,10 +116,49 @@ export default {
 </script>
 
 <style scoped lang="scss">
+  .app-container {
+    height: 100vh;
+    background: #F4F8FB;
+    overflow-y: scroll;
+  }
   .van-count-down{
     color: #969799;
     font-size: 0.32rem;
     line-height: 0.48rem;
     display: inline-block;
   }
+  .van-cell{
+    border-radius: 10Px;
+    overflow: hidden;
+    width: 94%;
+    margin: 0 auto 1vh;
+    position: relative;
+  }
+  .active_time{
+    background: rgba(253,104,63,.09);
+    color: rgba(253,104,63,1);
+    padding: 8PX 15PX;
+    border-radius: 5PX;
+    margin-top: 5PX;
+    .van-count-down{
+      color: rgba(253,104,63,1);
+      span{
+        background: rgba(253,104,63,1);
+        color: #ffffff;
+        font-weight: bold;
+        padding: 0 5PX;
+        margin: 0 5PX;
+        border-radius: 2PX;
+      }
+    }
+  }
+  .tag_i{
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: #ffffff;
+    padding: 0Px 15Px;
+    font-size: 12PX;
+    border-bottom-left-radius: 10PX;
+  }
 </style>

src/views/user/bidding/index.vue

@@ -1,13 +1,6 @@
 <template>
   <div class="app-container" >
-    <van-nav-bar
-      title="我的竞价"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
-
+    <navBar title="我的竞价" background="0" positionType="fixed"></navBar>
     <van-list
       v-model="loading"
       :finished="finished"
@@ -18,63 +11,95 @@
 
         <div class="list_li_tt" @click="$router.push({name:'projectDetailCJ', query: {id:item.id}})">
           <p>{{item.projectName}}</p>
-          <p :style="{
-                color: {
-                  '正在报名': '#007E72','等待竞价': '#848484','等待成交': '#848484','已经成交': '#848484','正在竞价': '#c21F3a',
-                }[item.projectShowStatus]}">{{item.projectShowStatus}}</p>
-        </div>
-        <div class="list_li_time" @click="$router.push({name:'projectDetailCJ', query: {id:item.id}})">
-          <van-count-down :time="item.biddingStopTime">
-            <template #default="timeData">
-              <span style="color: #848484;font-size: 14PX;">距结束</span>
-              <span :style="{'font-size':'14px',
-                color: {
-                  '正在报名': '#007E72','等待竞价': '#848484','等待成交': '#848484','已经成交': '#848484','正在竞价': '#c21F3a',
-                }[item.projectShowStatus]}">
-                    <span style="font-size: 18PX;">{{timeData.days}}</span>天
-                    <span style="font-size: 18PX;">{{timeData.hours}}</span>时
-                    <span style="font-size: 18PX;">{{timeData.minutes}}</span>分
-                    <span style="font-size: 18PX;">{{timeData.seconds}}</span>秒
-                  </span>
-            </template>
-          </van-count-down>
+          <p class="showList" @click="showList(item.id)">竞价记录</p>
         </div>
-        <div class="list_li_time" @click="$router.push({name:'projectDetailCJ', query: {id:item.id}})">
-          <p>
-            <span style="color: #848484">当前价格</span>
-            <span :style="{'font-size':'14px',
-                  color: {
-                    '正在报名': '#007E72','等待竞价': '#848484','等待成交': '#848484','已经成交': '#848484','正在竞价': '#c21F3a',
-                  }[item.projectShowStatus]}" v-if="item.biddingType=='1'&&item.projectShowStatus=='正在竞价'">
-                    *
-                  </span>
+        <div style="background: rgba(13,188,170,.05);padding: 3vw;border-radius: 10px;">
+          <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;" @click="$router.push({name:'projectDetailCJ', query: {id:item.id}})">
+            <div class="list_li_time">
+              <van-count-down :time="item.biddingStopTime">
+                <template #default="timeData">
+                  <span style="color: #848484;font-size: 14PX;">距结束</span>
+                  <span :style="{'font-size':'14px',
+                    color: {
+                      '正在报名': '#007E72',
+                      '等待竞价': '#848484',
+                      '等待成交': '#848484',
+                      '已经成交': '#848484',
+                      '正在竞价': '#c21F3a',
+                    }[item.projectShowStatus]}">
+                        <span style="font-size: 18PX;">{{timeData.days}}</span>天
+                        <span style="font-size: 18PX;">{{timeData.hours}}</span>时
+                        <span style="font-size: 18PX;">{{timeData.minutes}}</span>分
+                        <span style="font-size: 18PX;">{{timeData.seconds}}</span>秒
+                      </span>
+                </template>
+              </van-count-down>
+            </div>
+            <div class="list_li_time">
+              <p :style="{
+                      color: {
+                        '正在报名': '#007E72',
+                        '等待竞价': '#848484',
+                        '等待成交': '#848484',
+                        '已经成交': '#848484',
+                        '正在竞价': '#c21F3a',
+                      }[item.projectShowStatus]}">{{item.projectShowStatus}}</p>
+            </div>
+          </div>
+          <div style="display: flex;justify-content: space-between;align-items: center;" @click="$router.push({name:'projectDetailCJ', query: {id:item.id}})">
+            <div class="list_li_time">
+              <p>
+                <span style="color: #848484">当前价格</span>
+                <span :style="{'font-size':'14px',
+                      color: {
+                        '正在报名': '#007E72',
+                        '等待竞价': '#848484',
+                        '等待成交': '#848484',
+                        '已经成交': '#848484',
+                        '正在竞价': '#c21F3a',
+                      }[item.projectShowStatus]}" v-if="item.biddingType=='1'&&item.projectShowStatus=='正在竞价'">
+                        *
+                      </span>
 
-            <span :style="{'font-size':'14px',
-                  color: {
-                    '正在报名': '#007E72','等待竞价': '#848484','等待成交': '#848484','已经成交': '#848484','正在竞价': '#c21F3a',
-                  }[item.projectShowStatus]}" v-if="(item.biddingType=='1'&&item.projectShowStatus!='正在竞价'&&item.money) || (item.biddingType!='1'&&item.money)">
-                    {{item.money}}{{item.unit}}
-                  </span>
+                <span :style="{'font-size':'14px',
+                      color: {
+                        '正在报名': '#007E72',
+                        '等待竞价': '#848484',
+                        '等待成交': '#848484',
+                        '已经成交': '#848484',
+                        '正在竞价': '#c21F3a',
+                      }[item.projectShowStatus]}" v-if="(item.biddingType=='1'&&item.projectShowStatus!='正在竞价'&&item.money) || (item.biddingType!='1'&&item.money)">
+                        {{item.money}}{{item.unit}}
+                      </span>
 
-            <span :style="{'font-size':'14px',
+                <span :style="{'font-size':'14px',
+                      color: {
+                        '正在报名': '#007E72',
+                        '等待竞价': '#848484',
+                        '等待成交': '#848484',
+                        '已经成交': '#848484',
+                        '正在竞价': '#c21F3a',
+                      }[item.projectShowStatus]}" v-if="(item.biddingType!='1'&&!item.money) || (item.biddingType=='1'&&item.projectShowStatus!='正在竞价'&&!item.money)">
+                        暂无出价
+                </span>
+              </p>
+            </div>
+            <div class="list_li_time">
+              <p @click="$router.push({name:'projectDetailCJ', query: {id:item.id}})">
+                <span style="color: #848484">我的出价</span>
+                <span :style="{'font-size':'14px',
                   color: {
-                    '正在报名': '#007E72','等待竞价': '#848484','等待成交': '#848484','已经成交': '#848484','正在竞价': '#c21F3a',
-                  }[item.projectShowStatus]}" v-if="(item.biddingType!='1'&&!item.money) || (item.biddingType=='1'&&item.projectShowStatus!='正在竞价'&&!item.money)">
-                    暂无出价
-            </span>
-          </p>
-        </div>
-        <div class="list_li_time">
-          <p @click="$router.push({name:'projectDetailCJ', query: {id:item.id}})">
-            <span style="color: #848484">我的出价</span>
-            <span :style="{'font-size':'14px',
-              color: {
-                '正在报名': '#007E72','等待竞价': '#848484','等待成交': '#848484','已经成交': '#848484','正在竞价': '#c21F3a',
-              }[item.projectShowStatus]}" v-if="item.biddingType!='自由竞价'&&item.money">
-                {{item.memberMoney}}{{item.unit}}
-            </span>
-          </p>
-          <p class="showList" @click="showList(item.id)">竞价记录</p>
+                    '正在报名': '#007E72',
+                    '等待竞价': '#848484',
+                    '等待成交': '#848484',
+                    '已经成交': '#848484',
+                    '正在竞价': '#c21F3a',
+                  }[item.projectShowStatus]}" v-if="item.biddingType!='自由竞价'&&item.money">
+                    {{item.memberMoney}}{{item.unit}}
+                </span>
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     </van-list>
@@ -122,8 +147,10 @@
 import { getMember , biddinglist,userBiddingList } from "@/api/user/index";
 import { getInfo } from "@/api/login/index";
 import Cookies from "js-cookie";
+import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "userBidding",
+  components: { navBar },
   data() {
     return {
       loading: false,
@@ -181,6 +208,9 @@ export default {
 <style scoped lang="scss">
 .app-container {
   /*background-color: #FFF;*/
+  background: #F4F8FB;
+  height: 100vh;
+  overflow-y: scroll;
 }
 .biddingList{
   padding: 0 2%;
@@ -198,20 +228,18 @@ export default {
 .list_li{
   width: 94%;
   background: #ffffff;
-  border-radius: 8PX;
+  border-radius: 10PX;
   margin: 10PX auto 0;
-  padding: 3vw 5%;
+  padding: 3vw;
   .list_li_tt{
     display: flex;
     justify-content: space-between;
     padding-bottom: 10PX;
-    border-bottom: 1PX solid rgb(239,239,239);
     align-items: center;
     p{
       line-height: 22PX;
       &:nth-child(1){
         color: #333333;
-        font-weight: bold;
         font-size: 16PX;
         display: -webkit-box;
         -webkit-box-orient: vertical;
@@ -230,14 +258,13 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-top: 10PX;
   }
 
 }
   .showList{
-    background: #007E72;
-    color: #ffffff;
-    padding: 5PX 10PX;
+    border: 1px solid #0DBCAA;
+    color: #0DBCAA;
+    padding: 2PX 15PX;
     border-radius: 20PX;
   }
 /deep/ .van-cell__title{flex: 0.8}

src/views/user/index.vue

@@ -8,32 +8,61 @@
       </div>
       <van-row style="width: 90%; margin: 0 auto">
         <van-col span="7">
-          <img v-if="user.avatar" :src="'/api'+user.avatar" style="border: 2px solid #FFF;width: 2rem;height: 2rem;border-radius: 50%;">
-          <img v-else src="../../assets/images/user_tx.png" style="width: 2rem;height: 2rem;border-radius: 50%;">
+          <img v-if="user.avatar" :src="'/api'+user.avatar" style="border: 2px solid #21B6AB;width: 2rem;height: 2rem;border-radius: 50%;">
+          <img v-else src="../../assets/images/user_tx.png" style="border: 2px solid #21B6AB;width: 2rem;height: 2rem;border-radius: 50%;">
         </van-col>
         <van-col span="17">
-          <p @click="openView = true">
-            {{phone}}
-            <span class="activitiStatus">
+          <p>
+            {{realname}}
+            <span class="activitiStatus" @click="openView = true">
               {{
                 activitiStatus == '1' ? '待审':
                 activitiStatus == '2' ? '驳回':
                 activitiStatus == '3' ? '通过':''
               }}
             </span>
+            <img src="../../../static/images/transaction_new/user/user_icon_02.png" style="display:block;" alt="" @click="$router.push({name:'accountSettingCJ',query: {memberType:memberType}})">
           </p>
-          <p onclick="window.location='accountSetting'">账户设置</p>
+          <p><img src="../../../static/images/transaction_new/user/user_icon_01.png" alt="">{{phone}}</p>
+<!--          <p>账户设置</p>-->
         </van-col>
       </van-row>
     </div>
-    <div style="width: 96%;transform: translateY(-18%);margin: 0 auto;border-radius: 0.4rem;overflow: hidden;">
-      <van-cell title="我的报名" is-link icon="balance-list-o" to="application" />
-      <van-cell title="我的竞价" is-link icon="bar-chart-o" to="bidding" />
-      <van-cell title="我的咨询" is-link icon="service-o" to="userInteraction" />
-      <van-cell title="我的供求" is-link icon="bag-o" to="userSupply" />
-      <van-cell title="合同网签" is-link icon="orders-o" to="/user/signature/signatureList" />
+    <div class="user_nav">
+      <p class="tt">我的报名<span>12</span></p>
+      <p class="time">截止 2024.06.30</p>
+      <img src="../../../static/images/transaction_new/user/user_icon_04.png" style="position:absolute;transform: translateY(-30%);right: 0;top: 0;" alt="">
     </div>
-    <van-button class="loginOut" round color="#007E72" @click="loginOut">
+    <div style="width: 96%;margin: 1vh auto 0;border-radius: 0.4rem;overflow: hidden;">
+      <van-cell title="我的报名" is-link to="application" :border="false" >
+        <template #icon>
+          <img src="../../../static/images/transaction_new/user/user_icon_06.png" style="margin-right: 10px;" alt="">
+        </template>
+      </van-cell>
+      <van-cell title="我的竞价" is-link to="bidding" :border="false" >
+        <template #icon>
+          <img src="../../../static/images/transaction_new/user/user_icon_07.png" style="margin-right: 10px;" alt="">
+        </template>
+      </van-cell>
+    </div>
+    <div style="width: 96%;margin: 1vh auto 0;border-radius: 0.4rem;overflow: hidden;">
+      <van-cell title="我的咨询" is-link to="userInteraction" :border="false" >
+        <template #icon>
+          <img src="../../../static/images/transaction_new/user/user_icon_08.png" style="margin-right: 10px;" alt="">
+        </template>
+      </van-cell>
+      <van-cell title="我的供求" is-link to="userSupply" :border="false" >
+        <template #icon>
+          <img src="../../../static/images/transaction_new/user/user_icon_09.png" style="margin-right: 10px;" alt="">
+        </template>
+      </van-cell>
+      <van-cell title="合同网签" is-link to="/user/signature/signatureList" :border="false" >
+        <template #icon>
+          <img src="../../../static/images/transaction_new/user/user_icon_10.png" style="margin-right: 10px;" alt="">
+        </template>
+      </van-cell>
+    </div>
+    <van-button class="loginOut" round color="#0DBCAA" @click="loginOut">
       退出登录
     </van-button>
     <van-dialog v-model="openView" title="审核记录">
@@ -80,6 +109,7 @@ export default {
   data() {
     return {
       phone:'',
+      realname:'',
       user:'',
       activitiStatus:'',
       instanceId:'',
@@ -142,6 +172,7 @@ export default {
           this.phone = response.data.phone;
           this.activitiStatus = response.data.activitiStatus;
           this.memberType = response.data.memberType;
+          this.realname = response.data.realname;
           /* this.instanceId = response.data.instanceId;
           if(this.instanceId !== "" && this.instanceId != null){
             this.getHistoryList()
@@ -212,11 +243,40 @@ export default {
 
 <style scoped lang="scss">
 .app-container {
+  background: #F4F8FB url("../../../static/images/transaction_new/user/user_bg.png") no-repeat;
+  background-size: 100% auto;
+  width: 100%;
+  height: 100vh;
+}
 
+.user_nav{
+  width: 96%;
+  margin: 0 auto;
+  background: url("../../../static/images/transaction_new/user/user_icon_03.png") no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  padding: 4vw;
+  .tt{
+    background: url("../../../static/images/transaction_new/user/user_icon_05.png") no-repeat;
+    background-position: 8.5% bottom;
+    font-size: 22PX;
+    font-weight: bold;
+    padding-bottom: 5PX;
+    span{
+      font-family: Arial;
+      color: #0DBCAA;
+      margin-left:15PX;
+    }
+  }
+  .time{
+    font-size: 16PX;
+    color: #0DBCAA;
+    margin-top: 10PX;
+  }
 }
 
 .font_size{
-  color: #fff;
+  color: #21B6AB;
   font-size: .4rem;
   position: absolute;
   top: 1vh;
@@ -228,15 +288,15 @@ export default {
   }
   span:nth-child(n+2){
     font-size: .3rem;
-    border: 1px solid #ffffff;
+    border: 1px solid #21B6AB ;
     padding: 5px 15px;
     margin-right: 10PX;
   }
 }
 
 .activitiStatus{
-  color: #FEE1AA;
-  border: 1px solid #FEE1AA;
+  color: #21B6AB;
+  border: 1px solid #21B6AB;
   display: inline-block;
   padding: 2px 10px;
   border-radius: 5px;
@@ -245,27 +305,28 @@ export default {
   font-size: 14Px;
 }
   .header{
-    background-color: #007E72;
-    padding: 1rem 0rem 1.5rem;
+    padding: 1rem 0rem .5rem;
     width: 100%;
     p{
-      color: #FFF;
+      color: #333333;
       font-size: 0.4rem;
       margin-top: 0.2rem;
+      display: flex;
+      align-items: center;
+      line-height: 1;
+    }
+    p:nth-child(1){
+      img{
+        margin-left: auto;
+      }
     }
     p:nth-child(2){
-      width: 40%;
-      text-align: center;
-      padding: 10px;
-      border-radius: 0.5rem;
       margin-top: 0.4rem;
-      font-size: 12PX;
-      background: #FEE1AA url("../../assets/images/seting.png") no-repeat left center;
-      background-size: 0.5rem;
-      color: #007E72;
-      padding-left: 7%;
-      background-position-x: 6%;
-      line-height: 1;
+      font-size: 14PX;
+      /*background: url("../../../static/images/transaction_new/user/user_icon_01.png") no-repeat left center;*/
+      color: #333333;
+      display: flex;
+      align-items: center;
     }
   }
   .van-icon{
@@ -273,9 +334,13 @@ export default {
   }
   .loginOut{
     width: 94%;
-    margin-left: 3%;
+    margin: 2vh auto 0;
+    display: block;
   }
   .cell_value {
     min-width: 70%;
   }
+.van-cell{
+  align-items: center;
+}
 </style>

src/views/user/interaction/index.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="app-container">
-    <van-nav-bar
-      title="我的咨询"
-      left-arrow
-      right-text="发布"
-      fixed
-      placeholder
-      @click-left="goClickLeft"
-      @click-right="goAdd"
-    />
+<!--    <van-nav-bar-->
+<!--      title="我的咨询"-->
+<!--      left-arrow-->
+<!--      right-text="发布"-->
+<!--      fixed-->
+<!--      placeholder-->
+<!--      @click-left="goClickLeft"-->
+<!--      @click-right="goAdd"-->
+<!--    />-->
+    <navBar title="我的咨询" background="0" positionType="fixed"></navBar>
     <van-list
       v-model="loading"
       :finished="finished"
@@ -17,30 +18,29 @@
       style="margin-top: 10px;"
       @load="getList()"
     >
-      <van-cell v-for="(item,index) in interactionList" :key="index">
+      <van-cell v-for="(item,index) in interactionList" :key="index" style="margin-top: 3vw;">
         <template #title>
-          <van-row>
-            <van-col span="20"><van-icon name="../../static/images/icon/questions.png" size="18" style="top: 5px;margin-right: 5px;"/>
-              {{item.content}}</van-col>
-            <van-col span="4" style="text-align: right;font-size: 0.2rem;color: #007E72;" v-if="item.reply">已回复</van-col>
-            <van-col span="4" style="text-align: right;font-size: 0.2rem;color: #c21F3a;" v-if="!item.reply">未回复</van-col>
-          </van-row>
+          <p style="display: flex;align-items: center;">
+            <img src="../../../../static/images/transaction_new/interaction/interaction_icon_01.png" alt="" style="margin-right: 5px;"/>
+            <span>{{item.content}}</span>
+            <span style="font-size: 12px;color: #007E72;margin-left: auto;" v-if="item.reply">已回复</span>
+            <span style="font-size: 12px;color: #c21F3a;margin-left: auto;" v-if="!item.reply">未回复</span>
+          </p>
         </template>
         <template #label>
-          <van-icon name="../../static/images/icon/answer.png" size="18" style="top: 5px;margin-right: 5px;"/>{{item.reply}}
-          <van-row>
-            <van-col span="18">发布时间：{{item.logintime}}</van-col>
-            <van-col span="3" style="color: #007E72;text-align: right;" @click="goAdd('update',item.id)" v-if="!item.reply">
-              <van-icon name="edit" size="15" style="top:3px"/>修改
-            </van-col>
-            <van-col span="3" style="color: #007E72;text-align: right;" @click="deleteInteraction(item.id)" v-if="!item.reply">
-              <van-icon name="delete-o" size="15" style="top:3px"/>删除
-            </van-col>
-          </van-row>
-          <p></p>
+          <p style="display: flex;align-items: self-start;">
+            <img src="../../../../static/images/transaction_new/interaction/interaction_icon_02.png" alt="" style="margin: 5px 10px 0px 4px;"/>{{item.reply}}
+          </p>
+          <p style="margin-left: 22px;margin-top: 10px;font-size: 12px;display: flex;">
+            <span>发布时间：{{item.logintime}}</span>
+<!--            -->
+            <span style="color: #007E72;display: flex;align-items: center;line-height: 1;margin-left: auto;" @click="goAdd('update',item.id)" v-if="!item.reply"><van-icon name="edit" size="15"/>修改</span>
+            <span style="color: #007E72;display: flex;align-items: center;line-height: 1;margin-left: 10px;" @click="deleteInteraction(item.id)" v-if="!item.reply"><van-icon name="delete-o" size="15"/>删除</span>
+          </p>
         </template>
       </van-cell>
     </van-list>
+    <div class="fixed_add" @click="goAdd"><van-icon name="plus" color="#ffffff" size="25" /></div>
   </div>
 </template>
 
@@ -48,8 +48,10 @@
 import { getMember , userConsulting , deleteInteraction } from "@/api/user/index";
 import { getInfo } from "@/api/login/index";
 import {Dialog} from "vant";
+import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "interaction",
+  components: { navBar },
   data() {
     return {
       //是否显示加载
@@ -124,9 +126,28 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.app-container {
-}
-  .titleClass{
-
+  .app-container {
+    height: 100vh;
+    background: #ffffff;
+    overflow-y: scroll;
+  }
+  .van-cell{
+    border-radius: 10Px;
+    overflow: hidden;
+    width: 94%;
+    margin: 0 auto;
+    background: rgba(13,188,170,0.05);
+  }
+  .fixed_add{
+    position: fixed;
+    bottom: 10vh;
+    right: 3vw;
+    background:linear-gradient(rgba(13,188,170,.5),rgba(13,188,170,.1));
+    width: 50PX;
+    height: 50PX;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 100%;
   }
 </style>

src/views/user/interaction/interactionAdd.vue

@@ -1,19 +1,16 @@
 <template>
   <div class="app-container" :style="{height:height+'px'}">
-    <van-nav-bar
-      :title="pageTit"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
+    <navBar :title="pageTit" background="0" positionType="fixed"></navBar>
     <van-form @submit="submitInteraction">
-      <van-field v-model="form.title" label="标题" placeholder="请输入标题" required :rules="[{ required:true }]"/>
-      <van-field v-model="form.realname" label="姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
-      <van-field v-model="form.phone" label="联系电话" placeholder="请输入联系电话" required :rules="[{ required:true }]"/>
-      <van-field v-model="form.content" label="咨询内容" type="textarea" autosize placeholder="请输入咨询内容" required :rules="[{ required:true }]"/>
+      <div class="block_box">
+        <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">发布信息</van-divider>
+        <van-field v-model="form.title" label="标题" placeholder="请输入标题" required :rules="[{ required:true }]"/>
+        <van-field v-model="form.realname" label="姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
+        <van-field v-model="form.phone" label="联系电话" placeholder="请输入联系电话" required :rules="[{ required:true }]"/>
+        <van-field v-model="form.content" label="咨询内容" type="textarea" autosize placeholder="请输入咨询内容" required :rules="[{ required:true }]"/>
+      </div>
       <div class="submit">
-        <van-button round block type="info" color="#007E72" native-type="submit">发布</van-button>
+        <van-button round block type="info" color="#0DBCAA" native-type="submit">发布</van-button>
       </div>
     </van-form>
   </div>
@@ -23,8 +20,10 @@
 import { getMember , userCommunicate , updateCommunicate , selectCommunicate } from "@/api/user/index";
 import { getInfo } from "@/api/login/index";
 import {Dialog} from "vant";
+import navBar from "@/components/common/nav_bar.vue";
   export default {
     name: "interactionAdd",
+    components: { navBar },
     data() {
       return {
         height:0,
@@ -107,7 +106,33 @@ import {Dialog} from "vant";
 
 <style scoped lang="scss">
   .app-container {
-    background-color: #FFF;
+    background-color: #F4F8FB;
+    height: calc(100vh - 0Px);
+    overflow-y: scroll;
+  }
+  .block_box{
+    width: 94%;
+    margin: 3vw auto;
+    background: #ffffff;
+    padding: 3vw 0;
+    border-radius: 15Px;
+    overflow: hidden;
+    .block_tt{
+      font-size: 16Px;
+      display: flex;
+      align-items: center;
+      padding: 0 3vw;
+      line-height: 1;
+      i{
+        display: block;
+        width: 3Px;
+        height: 14Px;
+        background: #0CBEA6;
+        margin-right: 5PX;
+        border-radius: 5PX;
+      }
+      /*border-left: 3Px solid #0CBEA6;*/
+    }
   }
   .submit{
     position: absolute;

src/views/user/signature/signatureDetail.vue

@@ -1,50 +1,52 @@
 <template>
   <div class="home_wrapper">
-    <van-nav-bar
-      title="合同详情"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
-    <div class="list_main">
-      <van-divider>合同信息</van-divider>
-      <van-field v-model="form.contractCode" label="合同编号" placeholder="合同编号" input-align="right" :border="false" />
-      <van-field v-model="form.contractName" label="合同名称" placeholder="合同名称" input-align="right" :border="false" />
-      <van-field v-model="form.contractType" label="合同类别" placeholder="合同类别" input-align="right" :border="false" />
-      <van-field v-model="form.firstParty" label="甲方" placeholder="甲方" input-align="right" :border="false" />
-      <van-field v-model="form.secondParty" label="乙方" placeholder="乙方" input-align="right" :border="false" />
-      <van-field v-model="form.contractMoney" label="合同金额" placeholder="合同金额" input-align="right" :border="false" />
-      <van-field v-model="form.contractDate" label="登记日期" placeholder="登记日期" input-align="right" :border="false" />
-      <van-field v-model="form.startTime" label="开始日期" placeholder="开始日期" input-align="right" :border="false" />
-      <van-field v-model="form.endTime" label="结束日期" placeholder="结束日期" input-align="right" :border="false" />
-      <van-field v-model="form.status" label="是否有效" placeholder="是否有效" input-align="right" :border="false" />
-      <van-field v-model="form.signingMode" label="签订方式" placeholder="签订方式" input-align="right" :border="false" />
-      <van-field v-model="form.signingStatus" label="签订状态" placeholder="签订状态" input-align="right" :border="false" />
-      <van-field v-model="form.contractRemark" label="合同备注" placeholder="合同备注" input-align="right" :border="false" />
+    <navBar title="合同网签" background="0" positionType="fixed"></navBar>
 
-      <van-divider>甲方信息</van-divider>
-      <van-field v-model="form.firstIsSign" label="甲方已签" placeholder="甲方已签" input-align="right" :border="false" />
-      <van-field v-model="form.firstPartyAt" label="甲方签字日期" placeholder="甲方签字日期" input-align="right" :border="false" />
-      <van-field label="甲方签字" input-align="right" :border="false" />
+    <div class="block_box">
+      <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">合同信息</van-divider>
+      <van-field readonly v-model="form.contractCode" label="合同编号" placeholder="合同编号" input-align="right" :border="false" />
+      <van-field readonly v-model="form.contractName" label="合同名称" placeholder="合同名称" input-align="right" :border="false" />
+      <van-field readonly v-model="form.contractType" label="合同类别" placeholder="合同类别" input-align="right" :border="false" />
+      <van-field readonly v-model="form.firstParty" label="甲方" placeholder="甲方" input-align="right" :border="false" />
+      <van-field readonly v-model="form.secondParty" label="乙方" placeholder="乙方" input-align="right" :border="false" />
+      <van-field readonly v-model="form.contractMoney" label="合同金额" placeholder="合同金额" input-align="right" :border="false" />
+      <van-field readonly v-model="form.contractDate" label="登记日期" placeholder="登记日期" input-align="right" :border="false" />
+      <van-field readonly v-model="form.startTime" label="开始日期" placeholder="开始日期" input-align="right" :border="false" />
+      <van-field readonly v-model="form.endTime" label="结束日期" placeholder="结束日期" input-align="right" :border="false" />
+      <van-field readonly v-model="form.status" label="是否有效" placeholder="是否有效" input-align="right" :border="false" />
+      <van-field readonly v-model="form.signingMode" label="签订方式" placeholder="签订方式" input-align="right" :border="false" />
+      <van-field readonly v-model="form.signingStatus" label="签订状态" placeholder="签订状态" input-align="right" :border="false" />
+      <van-field readonly v-model="form.contractRemark" label="合同备注" placeholder="合同备注" input-align="right" :border="false" />
+    </div>
+
+    <div class="block_box gnbg">
+      <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">甲方信息</van-divider>
+      <van-field readonly v-model="form.firstIsSign" label="甲方已签" placeholder="甲方已签" input-align="right" :border="false" />
+      <van-field readonly v-model="form.firstPartyAt" label="甲方签字日期" placeholder="甲方签字日期" input-align="right" :border="false" />
+      <van-field readonly label="甲方签字" input-align="right" :border="false" />
       <img :src="'/api'+form.firstSigning" width="100%" alt="" v-if="form.firstSigning">
-      <van-field label="村级公章" input-align="right" :border="false" />
+      <van-field readonly label="村级公章" input-align="right" :border="false" />
       <img :src="'/api'+form.firstSeal" width="100%" alt="" v-if="form.firstSeal">
+    </div>
 
-      <van-divider>乙方信息</van-divider>
-      <van-field v-model="form.secondIsSign" label="乙方已签" placeholder="乙方已签" input-align="right" :border="false" />
-      <van-field v-model="form.secondPartyAt" label="乙方签字日期" placeholder="乙方签字日期" input-align="right" :border="false" />
-      <van-field label="乙方签字" input-align="right" :border="false" />
+    <div class="block_box orbg">
+      <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">乙方信息</van-divider>
+      <van-field readonly v-model="form.secondIsSign" label="乙方已签" placeholder="乙方已签" input-align="right" :border="false" />
+      <van-field readonly v-model="form.secondPartyAt" label="乙方签字日期" placeholder="乙方签字日期" input-align="right" :border="false" />
+      <van-field readonly label="乙方签字" input-align="right" :border="false" />
       <img :src="'/api'+form.secondSigning" width="100%" alt="" v-if="form.secondSigning" >
     </div>
+
   </div>
 </template>
 
 <script>
   import { contractGet } from "@/api/sunVillage_info/fixedAssets";
   import Cookies from "js-cookie";
+  import navBar from "@/components/common/nav_bar.vue";
   export default {
     name: "certificateList",
+    components:{navBar},
     data() {
       return {
         showBuildTime:false,
@@ -104,9 +106,10 @@
     border: none;
   }
   .home_wrapper{
-    background: #e9e9e9;
-    min-height: 100vh;
     width: 100vw;
+    background-color: #F4F8FB;
+    height: calc(100vh - 0Px);
+    overflow-y: scroll;
     .header_main {
       height: 116px;
       background: url('../../../assets/images/sunVillage_info/list_head.png') no-repeat;
@@ -196,9 +199,7 @@
       font-weight: bold;
     }
     /deep/ .van-cell{
-      padding-left: 0!important;
-      padding-right: 0!important;
-      padding-bottom: 0!important;
+
     }
     /deep/ .van-field__label{
       /*padding-left: 10PX;*/
@@ -213,4 +214,36 @@
       display: none;
     }
   }
+  .block_box{
+    width: 94%;
+    margin: 3vw auto;
+    background: #ffffff;
+    padding: 3vw 0;
+    border-radius: 15Px;
+    overflow: hidden;
+    .block_tt{
+      font-size: 16Px;
+      display: flex;
+      align-items: center;
+      padding: 0 3vw;
+      line-height: 1;
+      i{
+        display: block;
+        width: 3Px;
+        height: 14Px;
+        background: #0CBEA6;
+        margin-right: 5PX;
+        border-radius: 5PX;
+      }
+      /*border-left: 3Px solid #0CBEA6;*/
+    }
+  }
+  .gnbg{
+    background: #ffffff linear-gradient(rgba(13,188,170,.28),#ffffff) no-repeat;
+    background-size: 100% 50Px;
+  }
+  .orbg{
+    background: #ffffff linear-gradient(rgba(253,104,63,.28),#ffffff) no-repeat;
+    background-size: 100% 50Px;
+  }
 </style>

src/views/user/signature/signatureList.vue

@@ -1,13 +1,7 @@
 <template>
   <div class="home_wrapper">
-    <van-nav-bar
-      title="合同网签"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
 
+    <navBar title="合同网签" background="0" positionType="fixed"></navBar>
     <div class="list_main">
       <van-list
         v-model="loading"
@@ -18,17 +12,19 @@
         <!----1-->
         <van-swipe-cell v-for="(item,index) in applicationList" :key="index" :disabled="item.secondIsSign =='是'&&item.attachement ==  null&&item.isArchive == '否'" >
           <div class="item" @click="goDetail(item.id)">
+            <span class="tag_i" :style="{'background': item.secondSigning!=null?'#0DBCAA':'#FF2D2D'}">{{item.signingStatus}}</span>
             <div class="info">
               <div class="title">
                 <i class="icon_box" v-if="item.secondSigning==null"></i>
                 <i class="icon_box1" v-if="item.secondSigning!=null"></i>
                 <p class="news_title" :style="{'color': item.secondSigning!=null?'#2bc30c':'#eb1616'}">{{item.contractCode}}</p>
-                <p class="tips_mark" :style="{'color': item.secondSigning!=null?'#79bc29':'#f8a83d','background': item.secondSigning!=null?'#e8ffcd':'#ffedcd'}">{{item.signingMode}}</p>
-                <p class="tips_mark2" :style="{'background': item.secondSigning!=null?'#2bc30c':'#eb1616'}">{{item.signingStatus}}</p>
               </div>
               <div class="time">
                 <p>{{item.contractName}}</p>
-                <p style="color:#eb1616;font-weight: bold;"><span style="font-size: 12px;">￥</span>{{item.contractMoney.toFixed(2)}}</p>
+              </div>
+              <div class="time">
+                <p class="tips_mark" :style="{'color': item.secondSigning!=null?'rgba(13,188,170)':'rgba(115,104,228)','background': item.secondSigning!=null?'rgba(13,188,170,.2)':'rgba(115,104,228,.2)'}">{{item.signingMode}}</p>
+                <p style="color:#eb1616;font-size: 16px;"><span style="font-size: 12px;">￥</span>{{item.contractMoney.toFixed(2)}}</p>
               </div>
             </div>
           </div>
@@ -93,9 +89,10 @@
   import vueEsign from "vue-esign";
   import signatureUploadSignature from "@/views/yinnong/signatureUploadSignature";
   import $ from 'jquery'
+  import navBar from "@/components/common/nav_bar.vue";
   export default {
     name: "sunVillageInfoListSignature",
-    components:{vueEsign,signatureUploadSignature},
+    components:{vueEsign,signatureUploadSignature,navBar},
     data() {
       return {
         applicationList:[],
@@ -230,9 +227,18 @@
 
 <style scoped lang="scss">
   .home_wrapper{
-    background: #e9e9e9;
+    background: #F4F8FB;
     min-height: 100vh;
     width: 100vw;
+    .tag_i{
+      position: absolute;
+      top: 0;
+      right: 0;
+      color: #ffffff;
+      padding: 5Px 15Px;
+      font-size: 12PX;
+      border-bottom-left-radius: 10PX;
+    }
     .header_main{
       height: 116px;
       background: url('../../../assets/images/sunVillage_info/list_head.png') no-repeat;
@@ -322,11 +328,13 @@
       padding:0 22px;
       margin-top: 15PX;
       .item{
-        border-radius: 30px;
+        border-radius: 10Px;
         background: #fff;
         box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
         padding:25px 32px;
         margin-bottom: 20px;
+        position: relative;
+        overflow: hidden;
         .info{
           .title{
             display: flex;
@@ -358,40 +366,39 @@
               word-break: break-all;
               overflow: hidden;
             }
-            .tips_mark{
-              background: #ffedcd;
-              border-radius: 8px;
-              font-size: 24px;
-              color: #f8a83d;
-              text-align: center;
-              line-height: 34px;
-              flex-shrink: 0;
-              padding: 0 5Px;
-              margin-left: auto;
-            }
-            .tips_mark2{
-              background: #eb1616;
-              border-radius: 8px;
-              font-size: 24px;
-              color: #ffffff;
-              text-align: center;
-              line-height: 34px;
-              flex-shrink: 0;
-              padding: 0 5Px;
-              margin-left: 10PX;
-            }
+          }
+          .tips_mark{
+            background: #ffedcd;
+            border-radius: 8px;
+            font-size: 24px;
+            color: #f8a83d;
+            text-align: center;
+            line-height: 34px;
+            flex-shrink: 0;
+            padding: 0 10Px;
+          }
+          .tips_mark2{
+            background: #eb1616;
+            border-radius: 8px;
+            font-size: 24px;
+            color: #ffffff;
+            text-align: center;
+            line-height: 34px;
+            flex-shrink: 0;
+            padding: 0 5Px;
+            margin-left: 10PX;
           }
           .time{
             font-size: 16PX;
             color: #333333;
             display: flex;
             align-items: center;
-            margin-top: 5PX;
+            margin-top: 10PX;
             justify-content: space-between;
             p:first-child{
               display: -webkit-box;
               -webkit-box-orient: vertical;
-              -webkit-line-clamp: 1;
+              -webkit-line-clamp: 2;
               word-break: break-all;
               overflow: hidden;
             }

src/views/user/supply/index.vue

@@ -1,70 +1,59 @@
 <template>
   <div class="app-container">
-    <van-nav-bar
-      title="我的供求"
-      right-text="发布"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="goClickLeft"
-      @click-right="goAdd"
-    />
-    <van-tabs animated color="#007b76" type="card" style="margin-top: 10px;">
-      <van-tab>
-        <template #title><van-icon name="label" size="18" style="top: 4px"/>供应信息</template>
+    <navBar title="我的供求" background="0" positionType="fixed"></navBar>
+    <van-tabs animated :swipeable="true">
+      <van-tab title="供应信息">
         <van-list
           v-model="loading"
           :finished="finished"
           finished-text="没有更多了"
           style="margin-top: 10px;"
         >
-          <van-cell icon="play" v-for="(item , index) in supplyList" v-if="item.supplyDemandType == 1" :key="index">
+          <van-cell v-for="(item , index) in supplyList" v-if="item.supplyDemandType == 1" :key="index">
             <template #title>
-              <span :style="{color:item.isAuditStatus == 'Y' ? '#007E72':'#c21F3a'}">{{item.isAuditStatus == 'Y' ? '已审核':'未审核'}}</span> {{item.projectName}}
+              <span class="tag_i" :style="{background:item.isAuditStatus == 'Y' ? '#0DBCAA':'#FD683F'}">{{item.isAuditStatus == 'Y' ? '已审核':'未审核'}}</span>
+              {{item.projectName}}
             </template>
             <template #label>
-              联系电话：{{item.phone}} <p style="float: right;">发布时间：{{item.logintime}}</p>
-              <van-row style="margin-top: 5px;" v-if="item.isAuditStatus == 'N'">
-                <van-col span="16"></van-col>
-                <van-col span="4" style="color: #007E72;text-align: right;" @click="goAdd('update',item.id)" v-if="item.reply == null">
-                  <van-icon name="edit" size="15" style="top:3px"/>修改
-                </van-col>
-                <van-col span="4" style="color: #007E72;text-align: right;" @click="deleteSupply(item.id)" v-if="item.reply == null">
-                  <van-icon name="delete-o" size="15" style="top:3px"/>删除
-                </van-col>
-              </van-row>
+              <div style="display: flex;justify-content: space-between;align-items: center;">
+                <p>{{item.phone}}</p>
+                <p>{{item.logintime}}</p>
+              </div>
+              <div style="margin-top: 5px;display: flex;justify-content: space-between;align-items: center;" v-if="item.isAuditStatus == 'N'">
+                <span class="ad_btn" style="background: #0DBCAA;" @click="goAdd('update',item.id)" v-if="item.reply == null">修改</span>
+                <span class="ad_btn" style="background: #FD683F;" @click="deleteSupply(item.id)" v-if="item.reply == null">删除</span>
+              </div>
             </template>
           </van-cell>
         </van-list>
       </van-tab>
-      <van-tab title="选项">
-        <template #title><van-icon name="bookmark" size="18" style="top: 4px"/>需求信息</template>
+      <van-tab title="需求信息">
         <van-list
           v-model="loading"
           :finished="finished"
           finished-text="没有更多了"
           style="margin-top: 10px;"
         >
-          <van-cell icon="play" v-for="(item , index) in supplyList" v-if="item.supplyDemandType == 2" :key="index">
+          <van-cell v-for="(item , index) in supplyList" v-if="item.supplyDemandType == 2" :key="index">
             <template #title>
-              <span :style="{color:item.isAuditStatus == 'Y' ? '#007E72':'#c21F3a'}">{{item.isAuditStatus == 'Y' ? '已审核':'未审核'}}</span> {{item.projectName}}
+              <span class="tag_i" :style="{background:item.isAuditStatus == 'Y' ? '#0DBCAA':'#FD683F'}">{{item.isAuditStatus == 'Y' ? '已审核':'未审核'}}</span>
+              {{item.projectName}}
             </template>
             <template #label>
-              联系电话：{{item.phone}} <p style="float: right;">发布时间：{{item.logintime}}</p>
-              <van-row style="margin-top: 5px;" v-if="item.isAuditStatus == 'N'">
-                <van-col span="16"></van-col>
-                <van-col span="4" style="color: #007E72;text-align: right;" @click="goAdd('update',item.id)" v-if="item.reply == null">
-                  <van-icon name="edit" size="15" style="top:3px"/>修改
-                </van-col>
-                <van-col span="4" style="color: #007E72;text-align: right;" @click="deleteSupply(item.id)" v-if="item.reply == null">
-                  <van-icon name="delete-o" size="15" style="top:3px"/>删除
-                </van-col>
-              </van-row>
+              <div style="display: flex;justify-content: space-between;align-items: center;">
+                <p>{{item.phone}}</p>
+                <p>{{item.logintime}}</p>
+              </div>
+              <div style="margin-top: 5px;display: flex;justify-content: space-between;align-items: center;" v-if="item.isAuditStatus == 'N'">
+                <span class="ad_btn" style="background: #0DBCAA;" @click="goAdd('update',item.id)" v-if="item.reply == null">修改</span>
+                <span class="ad_btn" style="background: #FD683F;" @click="deleteSupply(item.id)" v-if="item.reply == null">删除</span>
+              </div>
             </template>
           </van-cell>
         </van-list>
       </van-tab>
     </van-tabs>
+    <div class="fixed_add" @click="goAdd"><van-icon name="plus" color="#ffffff" size="25" /></div>
   </div>
 </template>
 
@@ -72,8 +61,10 @@
 import { getMember , supplyList , deleteSupply} from "@/api/user/index";
 import { getInfo } from "@/api/login/index";
 import {Dialog} from "vant";
+import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "userSupply",
+  components: { navBar },
   data() {
     return {
       //是否显示加载
@@ -145,3 +136,95 @@ export default {
   },
 };
 </script>
+
+<style scoped lang="scss">
+  .app-container {
+    height: 100vh;
+    background: #F4F8FB;
+    overflow-y: scroll;
+  }
+  /deep/ .van-tabs__content{
+    background: transparent;
+    /*border-radius: 20PX;*/
+  }
+  /deep/ .van-tabs__nav{
+    /*background: transparent;*/
+    padding-bottom: 0;
+  }
+  /deep/ .van-tab--active{
+    background: #fff;
+  }
+  /deep/ .van-tab::after{
+    display: none;
+  }
+  /deep/ .van-tabs__wrap{
+    overflow: initial;
+  }
+  /deep/ .van-tabs__line{
+    /*background: linear-gradient(to right, #5166f5, #97eedc);*/
+    background: url("../../../../static/images/transaction_new/tab_border.png") no-repeat center;
+    height: 0.35rem;
+    bottom: 0;
+  }
+  /deep/ .van-tab:nth-child(1)::before{
+    content: "";
+    position: absolute;
+    left: auto;
+    top: 0;
+    right: -19%;
+    bottom: 0;
+    background: url("../../../../static/images/yinnong/login_tab_icon.png") no-repeat center;
+    background-size: 100% 100%;
+    width: 20%;
+  }
+  /deep/ .van-tab:nth-child(2)::before{
+    content: "";
+    position: absolute;
+    left: -19%;
+    top: 0;
+    right: auto;
+    bottom: 0;
+    /*background: url("../../../static/images/yinnong/login_tab_icon_right.png") no-repeat center;*/
+    /*background-size: 100% 100%;*/
+    width: 20%;
+  }
+  .van-cell{
+    border-radius: 10Px;
+    overflow: hidden;
+    position: relative;
+    width: 94%;
+    margin: 0 auto 1vh;
+  }
+  .tag_i{
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: #ffffff;
+    padding: 0Px 15Px;
+    font-size: 12PX;
+    border-bottom-left-radius: 10PX;
+  }
+  .ad_btn{
+    color: #ffffff;
+    padding: 8Px 15Px;
+    line-height: 1;
+    border-radius: 5Px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /*margin-left: 10Px;*/
+    width: 48%;
+  }
+  .fixed_add{
+    position: fixed;
+    bottom: 10vh;
+    right: 3vw;
+    background:linear-gradient(rgba(13,188,170,.5),rgba(13,188,170,.1));
+    width: 50PX;
+    height: 50PX;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 100%;
+  }
+</style>

src/views/user/supply/supplyAdd.vue

@@ -1,44 +1,42 @@
 <template>
   <div class="app-container" :style="{height:height+'px'}">
-    <van-nav-bar
-      :title="pageTit"
-      left-arrow
-      fixed
-      placeholder
-      @click-left="onClickLeft"
-    />
+    <navBar :title="pageTit" background="0" positionType="fixed"></navBar>
     <van-form @submit="submitInteraction">
-      <van-field
-        readonly
-        clickable
-        name="picker"
-        :value="value"
-        label="供求类型"
-        placeholder="点击选择供求类型"
-        @click="showPicker = true"
-        required
-        :rules="[{ required:true }]"
-      />
-      <van-popup v-model="showPicker" position="bottom">
-        <van-picker
-          show-toolbar
-          :columns="columns"
-          @confirm="onConfirm"
-          @cancel="showPicker = false"
+      <div class="block_box">
+        <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">发布信息</van-divider>
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          :value="value"
+          label="供求类型"
+          placeholder="点击选择供求类型"
+          @click="showPicker = true"
+          required
+          :rules="[{ required:true }]"
         />
-      </van-popup>
-      <van-field v-model="form.projectName" label="项目名称" placeholder="请输入项目名称" required :rules="[{ required:true }]"/>
-      <van-field v-model="form.location" label="项目地址" placeholder="请输入项目地址" required :rules="[{ required:true }]"/>
-      <van-field v-model="form.realname" label="姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
-      <van-field v-model="form.phone" label="联系电话" placeholder="请输入联系电话" required :rules="[{ required:true }]"/>
-      <van-field v-model="form.projectContent" label="项目详情" type="textarea" autosize placeholder="请输入项目详情" required :rules="[{ required:true }]"/>
-      <van-field name="uploader" label="上传相关附件" required :rules="[{ required:true }]">
-        <template #input>
+        <van-popup v-model="showPicker" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="columns"
+            @confirm="onConfirm"
+            @cancel="showPicker = false"
+          />
+        </van-popup>
+        <van-field v-model="form.projectName" label="项目名称" placeholder="请输入项目名称" required :rules="[{ required:true }]"/>
+        <van-field v-model="form.location" label="项目地址" placeholder="请输入项目地址" required :rules="[{ required:true }]"/>
+        <van-field v-model="form.realname" label="姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
+        <van-field v-model="form.phone" label="联系电话" placeholder="请输入联系电话" required :rules="[{ required:true }]"/>
+        <van-field v-model="form.projectContent" label="项目详情" type="textarea" autosize placeholder="请输入项目详情" required :rules="[{ required:true }]"/>
+      </div>
+      <div class="block_box">
+        <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">上传相关附件</van-divider>
+        <div style="padding: 0 16px;">
           <van-uploader :after-read="afterRead" :before-delete="deleteFile" v-model="fileList" multiple :max-count="5" />
-        </template>
-      </van-field>
+        </div>
+      </div>
       <div class="submit">
-        <van-button round block type="info" color="#007E72" native-type="submit">发布</van-button>
+        <van-button round block type="info" color="#0DBCAA" native-type="submit">发布</van-button>
       </div>
     </van-form>
   </div>
@@ -48,8 +46,10 @@
 import { getMember , userDemand , updateDemand , selectDemand , base64Attach , showImg , deleteUserImg ,supplyDetail} from "@/api/user/index";
 import { getInfo } from "@/api/login/index";
 import {Dialog} from "vant";
+import navBar from "@/components/common/nav_bar.vue";
 export default {
   name: "supplyAdd",
+  components: { navBar },
   data() {
     return {
       height:0,
@@ -203,14 +203,39 @@ export default {
 
 <style scoped lang="scss">
   .app-container {
-    background-color: #FFF;
+    background-color: #F4F8FB;
+    height: calc(100vh - 0Px);
+    overflow-y: scroll;
+  }
+  .block_box{
+    width: 94%;
+    margin: 3vw auto;
+    background: #ffffff;
+    padding: 3vw 0;
+    border-radius: 15Px;
+    overflow: hidden;
+    .block_tt{
+      font-size: 16Px;
+      display: flex;
+      align-items: center;
+      padding: 0 3vw;
+      line-height: 1;
+      i{
+        display: block;
+        width: 3Px;
+        height: 14Px;
+        background: #0CBEA6;
+        margin-right: 5PX;
+        border-radius: 5PX;
+      }
+      /*border-left: 3Px solid #0CBEA6;*/
+    }
   }
   .submit{
-    position: fixed;
+    position: absolute;
     bottom: 5%;
     width: 90%;
     left: 5%;
-    background-color: #FFFFFF;
     p{
       text-align: center;
       margin-bottom: 0.2rem;