no message

App.vue

@@ -14,8 +14,8 @@ export default {
 
 <style>
 /*每个页面公共css */
-@import "./static/css/sys.css";
-@import "./static/css/shake.css";
-@import "./static/css/en-iconfont.css";
+@import "/static/css/sys.css";
+@import "/static/css/shake.css";
+@import "/static/css/en-iconfont.css";
 
 </style>

components/en-utils/en-nav/en-nav.vue

@@ -1,18 +1,19 @@
 <template>
-  <view class="">
+  <view class="" :style="[{ 'background':bgckgroundBox}]">
     <view class="header"  :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px'}]">
       <view class="flexbox"  :class="{'flexbox-xcx':(isXcx && rightShow)}"
-        :style="[{'height': customBarH + 'px', 'background':bgckgroundBox}]">
+        :style="[{'height': customBarH + 'px'}]">
         <view class="left-button" @tap="goBack">
-          <image class="back-img"  src="/static/img/common/back.png" mode="aspectFill"></image>
+          <image class="back-img"  :src="'/static/img/common/back'+(titleColor==='#fff'?'-white':'')+'.png'" mode="aspectFill"></image>
         </view>
 
-        <view class="title-text" :style="[{'marginLeft':left +'px'}]">{{title}}</view>
+        <view class="title-text"  :style="[{'marginLeft':left +'px','color':titleColor}]">{{title}}</view>
         <view  class="right-button button" @click="rightClick">
-          <slot name="right" v-if="rightShow">
-            <text class="rightName sys-color-black-0 sys-weight-400" v-if="rightType===1">{{rightText}}</text>
-            <text class="rightName r-but" v-else>{{rightText}}</text>
-          </slot>
+          <view class="right-data" v-if="rightShow">
+            <text class="rightName  sys-weight-600" :style="[{'color':titleColor}]" v-if="rightType===1">{{rightText}}</text>
+            <slot name="right" v-else>   </slot>
+          </view>
+
         </view>
       </view>
     </view>
@@ -56,10 +57,7 @@
         type: String,
         default: '#fff'
       },
-      bgColor: {
-        type: String,
-        default: '#707'
-      },
+
       rightText: {
         type: String,
         default: ''
@@ -158,7 +156,7 @@
         z-index: 5;
         // width: 21px;
         .rightName {
-          font-size: 14px;
+          font-size: 32rpx;
         }
         .r-but{
           background-color:#FF0000 ;

pages/my/editInformation.vue

@@ -1,25 +1,424 @@
 <template>
-  <view class="information-box">
-    
+  <view class="information-box" :style="{'background-image': 'url('+headPortrait+')'}">
+    <en-nav :title="title" bgckground-box="rgba(0, 0, 0, 0.6)" :right-show="true" :right-type="2" @navHeight="setNavHeight">
+      <template v-slot:right>
+        <text class="nav-right sys-weight-600 sys-color-white">预览</text>
+      </template>
+    </en-nav>
+    <scroll-view class="information-data" :scroll-y="true" :style="{'height':'calc(100% - '+navHeight+'px)'}">
+      <view class="information-top">
+        <view class="top-head">
+            <view class="head-box">
+               <image class="head-img" src="/static/img/temporary/4.png" mode="aspectFill"></image>
+            </view>
+        </view>
+        <view class="information-proportion">
+          <view class="proportion-text sys-color-white sys-weight-400">资料已完善20%</view>
+        </view>
+        <view class="information-text sys-color-white sys-weight-400">
+          资料完整度越高，匹配率越高，社交能力越强哦
+        </view>
+      </view>
+      <view class="edit-data ">
+        <view class="photograph-data">
+          <view class="photograph-title">
+            <view class="title-data">
+              <text class="title-text sys-height-44 sys-color-black sys-weight-600">个人照片</text>
+              <text class="num-text sys-height-44 sys-color-gray-9">（1/9)</text>
+            </view>
+            <view class="proportion-data sys-height-44 sys-color-gray-9">
+              +20%
+            </view>
+          </view>
+          <view class="photograph-list">
+            <view class="photograph-item" v-for="i in 1">
+              <image class="photograph-img" src="/static/img/temporary/4.png" mode="aspectFill"></image>
+            </view>
+            <view class="photograph-add">
+              <text class="iconfont"> &#xe627;</text>
+            </view>
+          </view>
+          <view class="photograph-describe sys-weight-600">完成头像认证，收获更多曝光与喜欢</view>
+        </view>
+        <view class="edit-item">
+          <view class="item-title">
+            <view class="item-title-text sys-weight-600 sys-color-black sys-height-44">关于我</view>
+            <view class="item-title-proportion sys-weight-600 sys-color-black sys-height-44">+10%</view>
+          </view>
+          <view class="item-data">
+            <view class="row-text sys-height-44 sys-color-gray-9">来写个性宣言，完成你的社交第一步</view>
+            <view class="row-icon">
+              <text class="iconfont sys-height-44 sys-color-gray-9"> &#xe62b;</text>
+            </view>
+          </view>
+        </view>
+        <view class="edit-item">
+          <view class="item-title">
+            <view class="item-title-text sys-weight-600 sys-color-black sys-height-44">交友目的</view>
+            <view class="item-title-proportion sys-weight-600 sys-color-black sys-height-44">+10%</view>
+          </view>
+          <view class="item-data">
+            <view class="row-text sys-height-44 sys-color-gray-9">认识朋友</view>
+            <view class="row-icon">
+              <text class="iconfont sys-height-44 sys-color-gray-9"> &#xe62b;</text>
+            </view>
+          </view>
+        </view>
+        <view class="edit-item">
+          <view class="item-title">
+            <view class="item-title-text sys-weight-600 sys-color-black sys-height-44">添加微信</view>
+            <view class="item-title-proportion sys-weight-600 sys-color-black sys-height-44">+10%</view>
+          </view>
+          <view class="item-data">
+            <view class="row-text sys-height-44 sys-color-gray-9">上传微信，赚取奖励</view>
+            <view class="row-icon">
+              <text class="iconfont sys-height-44 sys-color-gray-9"> &#xe62b;</text>
+            </view>
+          </view>
+        </view>
+        <view class="edit-item">
+          <view class="item-title">
+            <view class="item-title-text sys-weight-600 sys-color-black sys-height-44">兴趣</view>
+            <view class="item-title-proportion sys-weight-600 sys-color-black sys-height-44">+10%</view>
+          </view>
+          <view class="item-interest">
+            <view class="interest-item" v-for="i in 2">
+              <image class="interest-img" src="/static/img/temporary/4.png" mode="aspectFill"></image>
+              <view class="interest-text sys-height-44">游泳</view>
+            </view>
+            <view class="interest-add">
+              <view class="interest-add-icon">  <text class="iconfont"> &#xe627;</text></view>
+              <view class="interest-text sys-height-44">添加</view>
+            </view>
+          </view>
+        </view>
+        <view class="edit-item">
+          <view class="item-title">
+            <view class="item-title-text sys-weight-600 sys-color-black sys-height-44">基础信息</view>
+            <view class="item-title-proportion sys-weight-600 sys-color-black sys-height-44">+30%</view>
+          </view>
+          <view class="item-from">
+           <view class="from-item">
+              <view class="from-item-title sys-height-44 sys-weight-400">昵称</view>
+              <view class="from-item-data">
+                <view class="item-data-text  sys-height-44 sys-color-gray-9 sys-weight-400">江湖救急</view>
+                <view class="item-data-icon">
+                  <text class="iconfont  sys-color-gray-9 sys-weight-400"> &#xe62b;</text>
+                </view>
+              </view>
+           </view>
 
+            <view class="from-item">
+              <view class="from-item-title sys-height-44 sys-weight-400">出生日期</view>
+              <view class="from-item-data">
+                <view class="item-data-text  sys-height-44 sys-color-gray-9 sys-weight-400">江湖救急</view>
+                <view class="item-data-icon">
+                  <text class="iconfont  sys-color-gray-9 sys-weight-400"> &#xe62b;</text>
+                </view>
+              </view>
+            </view>
+            <view class="from-item">
+              <view class="from-item-title sys-height-44 sys-weight-400">年龄</view>
+              <view class="from-item-data">
+                <view class="item-data-text  sys-height-44 sys-color-gray-9 sys-weight-400">江湖救急</view>
+                <view class="item-data-icon">
+                  <text class="iconfont  sys-color-gray-9 sys-weight-400"> &#xe62b;</text>
+                </view>
+              </view>
+            </view>
+            <view class="from-item">
+              <view class="from-item-title sys-height-44 sys-weight-400">星座</view>
+              <view class="from-item-data">
+                <view class="item-data-text  sys-height-44 sys-color-gray-9 sys-weight-400">江湖救急</view>
+                <view class="item-data-icon">
+                  <text class="iconfont  sys-color-gray-9 sys-weight-400"> &#xe62b;</text>
+                </view>
+              </view>
+            </view>
+            <view class="from-item">
+              <view class="from-item-title sys-height-44 sys-weight-400">学校</view>
+              <view class="from-item-data">
+                <view class="item-data-text  sys-height-44 sys-color-gray-9 sys-weight-400">江湖救急</view>
+                <view class="item-data-icon">
+                  <text class="iconfont  sys-color-gray-9 sys-weight-400"> &#xe62b;</text>
+                </view>
+              </view>
+            </view>
+            <view class="from-item">
+              <view class="from-item-title sys-height-44 sys-weight-400">家乡</view>
+              <view class="from-item-data">
+                <view class="item-data-text  sys-height-44 sys-color-gray-9 sys-weight-400">江湖救急</view>
+                <view class="item-data-icon">
+                  <text class="iconfont  sys-color-gray-9 sys-weight-400"> &#xe62b;</text>
+                </view>
+              </view>
+            </view>
+            <view class="from-item">
+              <view class="from-item-title sys-height-44 sys-weight-400">职业</view>
+              <view class="from-item-data">
+                <view class="item-data-text  sys-height-44 sys-color-gray-9 sys-weight-400">江湖救急</view>
+                <view class="item-data-icon">
+                  <text class="iconfont  sys-color-gray-9 sys-weight-400"> &#xe62b;</text>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="edit-but sys-background-black sys-weight-600 sys-color-white">保存</view>
+      </view>
+
+    </scroll-view>
   </view>
 </template>
 
 <script>
+import EnNav from "@/components/en-utils/en-nav/en-nav";
 export default {
+  components: {EnNav},
   data() {
     return {
-
+      title:'编辑资料',
+      headPortrait:'/static/img/temporary/3.png',
+      navHeight:0
     }
   },
   methods: {
-
+    setNavHeight(navHeight){
+      this.navHeight=navHeight
+    }
   }
 }
 </script>
 
 <style scoped lang="scss">
+
 .information-box{
+  background-repeat: no-repeat;//不平铺
+  background-position: top center;//居中
+  background-size: contain;//随容器大小
+  width: 100vw;
+  height: 100vh;
+  .nav-right{
+    font-size: 32rpx;
+  }
+  .information-data{
+    background-color: rgba(0,0,0,0.6);
+
+    .information-top{
+      padding-bottom: 34rpx;
+      //height: 444rpx;
+      .top-head{
+        margin-top: 70rpx;
+        display: flex;
+        justify-content: center;
+        .head-box{
+          width: 200rpx;
+          height: 200rpx;
+          border-radius: 50%;
+        }
+        .head-img{
+          margin:22rpx ;
+          width: 156rpx;
+          height: 156rpx;
+          border-radius: 50%;
+        }
+      }
+      .information-proportion{
+        margin-top: 16rpx;
+        display: flex;
+        justify-content: center;
+        .proportion-text{
+          background: rgba(0,0,0,0.29);
+          border-radius: 20rpx;
+          height: 56rpx;
+          line-height: 56rpx;
+          font-size: 28rpx;
+          text-align: center;
+          padding: 0 16rpx;
+        }
+
+      }
+      .information-text{
+        margin-top: 24rpx;
+        text-align: center;
+        font-size: 24rpx;
+      }
+
+    }
+    .edit-data{
+      border-radius: 30rpx 30rpx 0 0;
+      background-color: #fff;
+      padding: 32rpx 32rpx calc(32rpx + env(safe-area-inset-bottom)) 32rpx;
+      .photograph-title{
+        display: flex;
+        justify-content: space-between;
+        .title-data{
+          .title-text{
+            font-size: 32rpx;
+            margin-right: 16rpx;
+          }
+          .num-text{
+            font-size: 28rpx;
+          }
+
+        }
+        .proportion-data{
+          font-size: 28rpx;
+        }
+      }
+      .photograph-list{
+        margin-top: 26rpx;
+        overflow-x: auto;
+        display: flex;
+        justify-content: flex-start;
+        overflow-y: scroll;
+        .photograph-item{
+          margin-right: 16rpx;
+          .photograph-img{
+            width: 240rpx;
+            height: 316rpx;
+            border-radius: 16rpx;
+          }
+        }
+        .photograph-add{
+          width: 240rpx;
+          height: 316rpx;
+          border-radius: 16rpx;
+          background-color: #F9F9F9;
+          text-align: center;
+          line-height: 316rpx;
+          .iconfont{
+            font-size: 70rpx;
+            color: #999;
+          }
+        }
+      }
+      .photograph-describe{
+        margin-top: 32rpx;
+        font-size: 28rpx;
+        text-align: center;
+        color: #2F80ED;
+      }
+      .edit-item{
+        margin-top: 40rpx;
+        .item-title{
+          display: flex;
+          justify-content: space-between;
+          height: 44rpx;
+          .item-title-text{
+            font-size: 32rpx;
+          }
+          .item-title-proportion{
+            font-size: 28rpx;
+          }
+
+        }
+        .item-data{
+          background-color: #F9F9F9;
+          border-radius: 12rpx;
+          display: flex;
+          justify-content: space-between;
+          padding: 24rpx;
+          height: 44rpx;
+          .row-text{
+            font-size: 28rpx;
+          }
+          .row-icon{
+            .iconfont{
+              font-size: 28rpx;
+            }
+          }
+
+
+        }
+        .item-interest{
+          padding: 24rpx;
+          height: 172rpx;
+          background: #F9F9F9;
+          border-radius: 12rpx;
+          overflow-x: auto;
+          display: flex;
+          justify-content: flex-start;
+          .interest-item{
+            margin-right: 16rpx;
+            .interest-img{
+              width: 120rpx;
+              height: 120rpx;
+              border-radius: 50%;
+            }
+            .interest-text{
+              text-align: center;
+              font-size: 26rpx;
+              color: #BDBDBD;
+            }
+          }
+          .interest-add{
+            .interest-add-icon{
+              background-color: #E0E0E0;
+              width: 120rpx;
+              height: 120rpx;
+              border-radius: 50%;
+              text-align: center;
+              line-height: 120rpx;
+              .iconfont{
+                font-size:60rpx ;
+                color: #999;
+              }
+            }
+            .interest-text{
+              text-align: center;
+              font-size: 26rpx;
+              color: #BDBDBD;
+              margin-top: 8rpx;
+            }
+          }
+
+
+        }
+        .item-from{
+          border-radius: 16rpx;
+          background: #F9F9F9;
+          .from-item{
+            height: 44rpx;
+            padding: 22rpx 24rpx;
+            display: flex;
+            justify-content: space-between;
+
+            border-bottom: 1rpx solid #F2F2F2;
+            .from-item-title{
+              font-size: 28rpx;
+            }
+            .from-item-data{
+              display: flex;
+              justify-content: space-between;
+              .item-data-text{
+                font-size: 28rpx;
+
+              }
+              .item-data-icon{
+                .iconfont{
+                  font-size: 28rpx;
+                  line-height: 50rpx;
+                }
+              }
+            }
+          }
+          .from-item:last-child{
+            border-bottom: none;
+          }
+        }
+
+      }
+      .edit-but{
+        border-radius: 16rpx;
+        height: 88rpx;
+        line-height: 88rpx;
+        text-align: center;
+        font-size: 32rpx;
+      }
+
+    }
+  }
 
 }