no message

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

@@ -9,7 +9,7 @@
           </text>
         </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" v-if="rightType===1">{{rightText}}</text>
@@ -51,12 +51,12 @@
       },
       bgckgroundBox: {
         type: String,
-        default: '#fff'
+        default: '#131E30'
       },
 
       titleColor: {
         type: String,
-        default: '#fff'
+        default: '#D9E4F6'
       },
       bgColor: {
         type: String,

pages/icon/index.vue

@@ -1,6 +1,40 @@
 <template>
-  <view>
+  <view class="icon-box">
+    <Nav title="资产" :left-show="false" bgckgroundBox="#146AF0" titleColor="#fff"></Nav>
+    <view class="mui-content">
+      <view class="ln-assets-blue">
+        <view class="ln-assets-top">总账户资产折合（USDT）</view>
+        <view class="ln-assets-hd">
+          <view class="ln-assets-num">10800.11</view>
+          <view class="ln-assets-price">&asymp;21122.1 CNY</view>
+        </view>
+      </view>
+      <view class="order-list">
+        <view class="order-item" v-for="coin in 2">
+          <view @click="" class="order-list-hd">
+            <view class="order-list-nm text-blue">USDT</view>
+            <view class="order-list-state"><i class="iconfont mui-icon-arrowright">&#xe62b;</i></view>
+          </view>
+          <view class="order-list-con ">
+            <view class="order-list-iteam">
+              <view class="order-list-tit">可用(USDT)</view>
+              <view class="order-list-num">454554.12</view>
+            </view>
+            <view class="order-list-iteam">
+              <view class="order-list-tit">冻结(USDT)</view>
+              <view class="order-list-num">4454545</view>
+            </view>
+            <view class="order-list-iteam order-list-iteamr">
+              <view class="order-list-tit">折合(CNY)</view>
+              <view class="order-list-num">2154.12</view>
+            </view>
+          </view>
+        </view>
 
+      </view>
+
+
+    </view>
   </view>
 </template>
 
@@ -21,5 +55,128 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import url("/components/static/css/en-common.css") ;
+.icon-box{
+  background: #131E30;
+  min-height: calc(100vh - 50px);
+  .mui-icon-arrowright{
+    color: #7388a7;
+  }
+  .mui-content{
+    color: #7388a7;
+    .ln-assets-blue{
+      position: relative;
+      width: 100%;
+      padding:0 10px 10px 10px;
+      color: rgba(255,255,255,0.6);
+      background: #146AF0;
+      .ln-assets-top{
+        width: 100%;
+        height: 16px;
+        line-height: 16px;
+        font-size: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: rgba(255,255,255,0.6);
+      }
+      .ln-assets-hd{
+        width: 100%;
+        margin: 15px auto;
+        .ln-assets-num {
+          width: 100%;
+          line-height: 28px;
+          color: #FFFFFF;
+          font-size: 24px;
+        }
+        .ln-assets-price {
+          width: 100%;
+          line-height: 20px;
+          font-size: 12px;
+          color: rgba(255,255,255,0.6);
+        }
+      }
+    }
+    .order-list{
+      width: calc(100% - 20px);
+      list-style-type: none;
+      margin: 0;
+      -webkit-padding-start: 0;
+      padding: 0 10px;
+      .order-item{
+        width: 100%;
+        padding: 6px 0;
+        border-bottom: 1px solid #213141;
+        position: relative;
+        margin: 0;
+        -webkit-padding-start: 0;
+        .order-list-hd {
+          width: 100%;
+          height: 28px;
+          line-height: 28px;
+          padding: 6px 0;
+          .order-list-nm.text-blue {
+            font-size: 16px;
+            color: #146AF0;
+          }
+          .order-list-nm {
+            max-width: 70%;
+            height: 28px;
+            font-size: 16px;
+            font-weight: 800;
+            color: #FFFFFF;
+            float: left;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          .order-list-state, .order-list-statewhite {
+            width: 28%;
+            height: 28px;
+            line-height: 28px;
+            text-align: right;
+            float: right;
+          }
+        }
+        .order-list-con {
+          position: relative;
+          width: 100%;
+          padding: 6px 0;
+          overflow: auto;
+          .order-list-iteam {
+            width: 35%;
+            margin-right: 2%;
+            float: left;
+            .order-list-tit {
+              width: 100%;
+              height: 20px;
+              line-height: 20px;
+              color: #495B73;
+              font-size: 12px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            .order-list-num {
+              width: 100%;
+              height: 24px;
+              line-height: 24px;
+              font-size: 13px;
+              color: #FFFFFF;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+          }
+          .order-list-iteamr {
+            width: 26%;
+            margin-right: 0;
+            text-align: right;
+          }
+        }
+      }
+    }
+  }
+}
 
 </style>

pages/index/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="box-data">
     <header class="header">
-      <image class="hd-logo" src="/static/img/icon/logow.png" mode="aspectFill" />
+      <image class="hd-logo" src="/static/img/icon/logow.png?=1" mode="aspectFill" />
     </header>
     <view class="mui-content">
       <swiper class="swiper-box"
@@ -177,10 +177,10 @@ import $ from 'jquery/src/jquery'
 <style lang="scss" scoped>
 .box-data{
   background: #131E30;
-  min-height: calc(100vh - 49px);
+  min-height: calc(100vh - 50px);
   .header{
     position: fixed; left: 0; top: 0; width: 100%; height: 54px;  background: #131E30; z-index: 10; overflow: hidden;
-    .hd-logo{ display: block; max-width: 50%; height: 34px; margin: 10px auto;}
+    .hd-logo{ display: block; max-width: 52%; height: 34px; margin: 10px auto;}
   }
   .mui-content{
     color: #7388a7;
@@ -249,13 +249,14 @@ import $ from 'jquery/src/jquery'
     .ln-con{
       width: 100%; background: #1A2B3D;
       .ln-con-tit{
-        width:  calc(100% - 20px); height: 41px; line-height: 20px; border-bottom: 1px solid #213141; padding: 10px;
+        width:  calc(100% - 20px); height: 20px; line-height: 20px; border-bottom: 1px solid #213141; padding: 10px;
         .ln-list-iteam{ float: left; font-size: 13px; color: #7388a7;}
       }
       .ln-list{
         width: 100%;
         padding-bottom: 20rpx;
         .list-item{
+          height: 20px;
           width: calc(100% - 20px); padding: 10px; border-bottom: 1px solid #213141; overflow: auto;
           display: flex;
           justify-content: space-between;

pages/msg/index.vue

@@ -1,10 +1,40 @@
 <template>
-  <view>
-
+  <view class="msg-box">
+    <Nav title="留言反馈" :left-show="false"  titleColor="#fff"></Nav>
+    <view class="mui-content">
+      <view class="ln-public">
+        留言内容
+      </view>
+      <view class="msg-text" contenteditable="true" placeholder="在此输入留言内容，限200字。"></view>
+      <view class="msg-btn" @click="sendMsg">提交</view>
+      <view class="msg-list">
+        <view class="msg-item" v-for="(msg_iteam,index) in 5">
+          <view class="msg-list-con">
+            <view class="msg-list-tit">
+              <view class="msg-list-name">
+               阿萨德撒多解散
+              </view>
+              <view class="msg-list-time">2022-10-18 15:02</view>
+            </view>
+            <view class="msg-list-intro">阿山东黄金看加哈是否叠加记得收款飞</view>
+          </view>
+          <view class="msg-list-con" >
+            <view class="msg-list-tit">
+              <view class="msg-list-name">
+                回复
+              </view>
+              <view class="msg-list-time">2022-10-18 15:02</view>
+            </view>
+            <view class="msg-list-intro">是大家好较好的</view>
+          </view>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
 <script>
+import $ from 'jquery/src/jquery'
 export default {
   name: "index",
   components: {},
@@ -14,12 +44,110 @@ export default {
   },
   watch: {},
   mounted() {
-
+    this.msg = $('.msg-text').text();
   },
-  methods: {}
+  methods: {
+    sendMsg(){
+      this.msg = $('.msg-text').text();
+      console.log(this.msg)
+    }
+  }
 }
 </script>
 
 <style scoped lang="scss">
+.msg-box{
+  background: #131E30;
+  min-height: calc(100vh - 50px);
+  .mui-content{
+    padding:0 10px;
+    .ln-public {
+      width: 100%;
+      padding: 0 10px;
+      font-size: 20px;
+      line-height: 28px;
+      font-weight: 600;
+      margin: 20px auto;
+      color: #D9E4F6;
+      word-break: break-all;
+    }
+    .msg-text {
+      width: calc(100% - 20px);
+      min-height: 98px;
+      line-height: 24px;
+      color: #D9E4F6;
+      padding: 10px 0;
+      background: #061623;
+      border: 1px solid rgba(39,60,83,0.5);
+      margin: 10px;
+    }
+    .msg-btn {
+      display: block;
+      width: 82%;
+      height: 42px;
+      line-height: 42px;
+      border: 0;
+      border-radius: 3px;
+      text-align: center;
+      padding: 0;
+      font-size: 16px;
+      background: #007AFF;
+      color: #FFFFFF;
+      margin: 15px auto;
+      margin-top: 60px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .msg-list {
+      width: calc(100% - 20px);
+      line-height: 20px;
+      padding: 0 10px;
+      border-top: 1px solid rgba(39,60,83,0.5);
+      list-style-type: none;
+      margin: 0;
+      -webkit-padding-start: 0;
+      .msg-item{
+        padding: 2px 0;
+        border-bottom: 1px solid rgba(39,60,83,0.5);
+        color: #D9E4F6;
+        .msg-list-con {
+          width: 100%;
+          overflow: auto;
+          margin: 15px 0;
+          .msg-list-tit {
+            width: 100%;
+            height: 30px;
+            line-height: 30px;
+            .msg-list-name {
+              max-width: calc(100% - 120px);
+              height: 30px;
+              float: left;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              color: #D9E4F6;
+            }
+            .msg-list-time {
+              max-width: 110px;
+              height: 30px;
+              font-size: 12px;
+              color: #495B73;
+              text-align: right;
+              float: right;
+              overflow: hidden;
+            }
+          }
+          .msg-list-intro {
+            width: 100%;
+            line-height: 20px;
+            color: #495B73;
+            text-align: justify;
+          }
+        }
+      }
+    }
 
+  }
+}
 </style>

pages/my/index.vue

@@ -1,6 +1,48 @@
 <template>
-  <view>
-
+  <view class="my-box">
+    <Nav title="我的" :left-show="false"  titleColor="#D9E4F6"></Nav>
+    <view class="content">
+      <view class="user-box" >
+        <image class="user-box-left" src="/static/img/icon/logo.png" mode=""></image>
+        <view class="user-box-right">
+          <view class="user-box-right-one">
+            张啥的境况
+          </view>
+          <view class="user-box-right-two">
+           一级会员
+          </view>
+        </view>
+      </view>
+      <view class="more-function">
+        更多功能
+      </view>
+      <view class="function-box">
+        <view class="function-box-list" >
+          <view class="function-box-list-left">
+            <view class="function-box-list-left-two">
+              操作中心
+            </view>
+          </view>
+          <image class="function-box-list-right" src="@/static/img/my/jrimg.png" mode=""></image>
+        </view>
+        <view class="function-box-list" >
+          <view class="function-box-list-left">
+            <view class="function-box-list-left-two">
+              操作中心
+            </view>
+          </view>
+          <image class="function-box-list-right" src="@/static/img/my/jrimg.png" mode=""></image>
+        </view>
+        <view class="function-box-list" >
+          <view class="function-box-list-left">
+            <view class="function-box-list-left-two">
+              操作中心
+            </view>
+          </view>
+          <image class="function-box-list-right" src="@/static/img/my/jrimg.png" mode=""></image>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -21,5 +63,101 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.my-box{
+  background: #131E30;
+  min-height: calc(100vh - 50px);
+  .content {
+    width: 100%;
+    height: auto;
+    padding: 60rpx 32rpx 0;
+    box-sizing: border-box;
+
+    .user-box {
+      display: flex;
+      align-items: center;
+      margin: 0 0 34rpx 0;
+
+      .user-box-left {
+        width: 124rpx;
+        height: 124rpx;
+        border-radius: 50%;
+        margin: 0 20rpx 0 0;
+      }
+
+      .user-box-right {
+        .user-box-right-one {
+          max-width: 320rpx;
+          font-size: 40rpx;
+          color:  #D9E4F6;
+          font-weight: 600;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          word-break: break-all;
+        }
+
+        .user-box-right-two {
+          font-size: 20rpx;
+          padding: 2rpx 8rpx;
+          background: #3169FA;
+          border-radius: 3px;
+          display: inline;
+          color: #FFFFFF;
+        }
+      }
+    }
+
+
+    .more-function {
+      padding: 0 0 0 32rpx;
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #D9E4F6;
+      margin: 0 0 26rpx 0;
+    }
 
+    .function-box {
+      width: 100%;
+      height: auto;
+      background: #061623;
+      border-radius:16rpx;
+      padding: 52rpx 26rpx 0;
+      box-sizing: border-box;
+
+      .function-box-list {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 0 56rpx 0;
+        border-bottom: 1rpx solid #D9E4F6;
+        margin: 0 0 54rpx 0;
+
+        .function-box-list-left {
+          display: flex;
+          align-items: center;
+
+          .function-box-list-left-one {
+            width: 40rpx;
+            height: 40rpx;
+            margin: 0 12rpx 0 0;
+          }
+
+          .function-box-list-left-two {
+            font-size: 32rpx;
+            color: #D9E4F6;
+          }
+        }
+
+        .function-box-list-right {
+          width: 44rpx;
+          height: 44rpx;
+          display: block;
+        }
+      }
+      .function-box-list:last-child{
+        border:none;
+      }
+    }
+  }
+}
 </style>