个人中心页面样式优化

pages/user/people.vue

@@ -1,161 +1,176 @@
 <template>
-	<view>
-		<scroll-view scroll-y class="page">
-			  <!-- 头部logo-->
-		  <view class="UCenter-bg">
-		    <image :src="personalList.avatar" class="png round animation-slide-right margin-bottom-sm" mode="scaleToFill" :style="[{animationDelay: '0.1s'}]"></image>
-		    <image src="https://static.jeecg.com/upload/test/wave_1595818053612.gif" mode="scaleToFill" class="gif-wave"></image>
-		  </view>
-		  <view class="padding flex text-center text-grey bg-white shadow-warp">
-		    <view class="flex flex-sub flex-direction solid-right animation-slide-top" :style="[{animationDelay: '0.2s'}]">
-		      <view class="text-xl text-orange">{{personalList.username}}</view>
-			  <view class="margin-top-sm"><text class="cuIcon-people"></text> 用户</view>
-		    </view>
-		    
-		    <view class="flex flex-sub flex-direction animation-slide-top" :style="[{animationDelay: '0.2s'}]">
-		      <view class="text-xl text-green">{{personalList.post?personalList.post:'员工'}}</view>
-		      <view class="margin-top-sm"><text class="cuIcon-news"></text> 职务</view>
-		    </view>
-		  </view>
-		  <!-- 列表list-->
-		  <view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
-		   <!-- <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
-		      <view class="content" >
-		        <text class="cuIcon-favorfill text-yellow"></text>
-		        <text class="text-grey">收藏</text>
-		      </view>
-		    </view>
-		    <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
-		      <view class="content">
-		        <text class="cuIcon-redpacket_fill text-red"></text>
-		        <text class="text-grey">红包</text>
-		      </view>
-		    </view> -->
-			<view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.3s'}]" @tap="scan">
-			  <view class="content">
-			    <text class="cuIcon-scan text-red"></text>
-			    <text class="text-grey">扫码</text>
-			  </view>
-			</view>
-			<!-- <navigator class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.4s'}]" url="/pages/user/location" hover-class="none">
-				<view class="content" >
-				    <text class="cuIcon-location text-cyan"></text>
-					<text class="text-grey">定位</text>
-				</view>
-			</navigator> -->
-			<navigator class="cu-item arrow animation-slide-bottom" url="/pages/user/userdetail" :style="[{animationDelay: '0.6s'}]">
-			     <view class="content">
-				    <text class="cuIcon-settingsfill text-cyan"></text>
-					<text class="text-grey">设置</text>
-			    </view>
-			</navigator>
-		   
-			<navigator class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.7s'}]" url="/pages/user/userexit" hover-class="none">
-				<view class="content" >
-				    <text class="cuIcon-exit text-cyan"></text>
-					<text class="text-grey">退出</text>
-				</view>
-			</navigator>
-		  </view>
-		  <view class="cu-tabbar-height"></view>
-		</scroll-view>
-	</view>
+  <view>
+    <scroll-view scroll-y class="page">
+      <!-- 头部logo-->
+      <view class="UCenter-bg">
+        <view class="avatar-box">
+          <view class="avatar"></view>
+        </view>
+      </view>
+      <view
+        class="padding flex text-center text-grey bg-white shadow-warp userinfo-box"
+      >
+        <view class="user1" :style="[{ animationDelay: '0.2s' }]">
+          <view class="usericon1"> </view>
+          <view class="username1">
+            <view class="text-xl" style="color: #3485fe">{{
+              personalList.username
+            }}</view>
+            <view class="text-info">用户</view>
+          </view>
+        </view>
+
+        <view class="user2" :style="[{ animationDelay: '0.2s' }]">
+          <view class="usericon2"> </view>
+          <view class="username2">
+            <view class="text-xl" style="color: #09bda0">{{
+              personalList.post ? personalList.post : "员工"
+            }}</view>
+            <view class="text-info">职务</view>
+          </view>
+        </view>
+      </view>
+      <!-- 列表list-->
+      <view
+        class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius"
+      >
+        <view
+          class="cu-item arrow animation-slide-bottom"
+          :style="[{ animationDelay: '0.3s' }]"
+          @tap="scan"
+        >
+          <view class="content">
+            <text class="userSacll"></text>
+            <text class="text-grey">扫码</text>
+          </view>
+        </view>
+        <navigator
+          class="cu-item arrow animation-slide-bottom"
+          url="/pages/user/userdetail"
+          :style="[{ animationDelay: '0.6s' }]"
+        >
+          <view class="content">
+            <text class="userDetail"></text>
+            <text class="text-grey">设置</text>
+          </view>
+        </navigator>
+
+        <navigator
+          class="cu-item arrow animation-slide-bottom"
+          :style="[{ animationDelay: '0.7s' }]"
+          url="/pages/user/userexit"
+          hover-class="none"
+        >
+          <view class="content">
+            <text class="userExit"></text>
+            <text class="text-grey">退出</text>
+          </view>
+        </navigator>
+      </view>
+      <view class="cu-tabbar-height"></view>
+    </scroll-view>
+  </view>
 </template>
 
 <script>
-	import api from '@/api/api'
-	export default {
-		name: "people",
-		data() {
-			return {
-				personalList:{
-				  avatar:'',
-				  realname:'',
-				  username:'',
-				  post:''
-				},
-				  positionUrl:'/sys/position/list',
-				  departUrl:'/sys/user/userDepartList',
-				  userUrl:'/sys/user/queryById',
-				  postUrl:'/sys/position/queryByCode',
-				  userId:'',
-				  id:''
-			};
-		},
-		watch: {
-			cur: {
-				immediate: true,
-				handler() {
-					console.log('watch',this.cur)
-				    this.userId=this.$store.getters.userid;
-					this.load()
-				},
-			},
-		},
-		methods: {
-			scan(){
-				 console.log("进来了")
-				// #ifndef H5
-				uni.scanCode({
-				    success: function (res) {
-						console.log('条码res：' + res);
-				        console.log('条码类型：' + res.scanType);
-				        console.log('条码内容：' + res.result);
-				    }
-				});
-				// #endif
-				// #ifdef H5
-				this.$tip.alert("暂不支持")
-				// #endif
-			},
-			load(){
-				if(!this.userId){
-					
-					return;
-				}
-				this.$http.get(this.userUrl,{params:{id:this.userId}}).then(res=>{
-					console.log("res",res)
-					 if (res.data.success) {
-						let perArr = res.data.result
-				        let avatar=(perArr.avatar && perArr.avatar.length > 0)? api.getFileAccessHttpUrl(perArr.avatar):'/static/avatar_boy.png'
-						this.personalList.avatar =avatar
-						this.personalList.realname = perArr.realname
-						this.personalList.username = perArr.username
-						this.personalList.depart = perArr.departIds
-					    this.getpost(perArr.post)
-					}
-				}).catch(err => {
-					console.log(err);
-				});
-				
-			},
-			getpost(code){
-				if(!code||code.length==0){
-					this.personalList.post='员工'
-					return false;
-				}
-				this.$http.get(this.postUrl,{params:{code:code}}).then(res=>{
-					console.log("postUrl",res)
-					 if (res.data.success) {
-						this.personalList.post=res.data.result.name
-					}
-				}).catch(err => {
-					console.log(err);
-				});
-				
-			}
-		}
-	}
+import api from "@/api/api";
+export default {
+  name: "people",
+  data() {
+    return {
+      personalList: {
+        avatar: "",
+        realname: "",
+        username: "",
+        post: "",
+      },
+      positionUrl: "/sys/position/list",
+      departUrl: "/sys/user/userDepartList",
+      userUrl: "/sys/user/queryById",
+      postUrl: "/sys/position/queryByCode",
+      userId: "",
+      id: "",
+    };
+  },
+  watch: {
+    cur: {
+      immediate: true,
+      handler() {
+        console.log("watch", this.cur);
+        this.userId = this.$store.getters.userid;
+        this.load();
+      },
+    },
+  },
+  methods: {
+    scan() {
+      console.log("进来了");
+      // #ifndef H5
+      uni.scanCode({
+        success: function (res) {
+          console.log("条码res：" + res);
+          console.log("条码类型：" + res.scanType);
+          console.log("条码内容：" + res.result);
+        },
+      });
+      // #endif
+      // #ifdef H5
+      this.$tip.alert("暂不支持");
+      // #endif
+    },
+    load() {
+      if (!this.userId) {
+        return;
+      }
+      this.$http
+        .get(this.userUrl, { params: { id: this.userId } })
+        .then((res) => {
+          console.log("res", res);
+          if (res.data.success) {
+            let perArr = res.data.result;
+            let avatar =
+              perArr.avatar && perArr.avatar.length > 0
+                ? api.getFileAccessHttpUrl(perArr.avatar)
+                : "/static/user2.png";
+            this.personalList.realname = perArr.realname;
+            this.personalList.username = perArr.username;
+            this.personalList.depart = perArr.departIds;
+            this.getpost(perArr.post);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    getpost(code) {
+      if (!code || code.length == 0) {
+        this.personalList.post = "员工";
+        return false;
+      }
+      this.$http
+        .get(this.postUrl, { params: { code: code } })
+        .then((res) => {
+          console.log("postUrl", res);
+          if (res.data.success) {
+            this.personalList.post = res.data.result.name;
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+  },
+};
 </script>
 
 <style>
 .UCenter-bg {
-	/* #ifdef MP-WEIXIN */
-	background-image: url('/static/topnavbar.png');
-	/* #endif */
-	/* #ifndef MP-WEIXIN */
-	background-image: url('/static/blue.png');
-	/* #endif */
+  /* #ifdef MP-WEIXIN */
+  background-image: url("/static/topnavbar.png");
+  /* #endif */
+  /* #ifndef MP-WEIXIN */
+  background-image: url("/static/userBg.png");
+  /* #endif */
   background-size: cover;
   height: 400rpx;
   display: flex;
@@ -169,7 +184,81 @@
   font-weight: 300;
   text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
 }
+.avatar-box {
+  position: relative;
+  width: 250rpx;
+  height: 250rpx;
+  background-image: url("/static/user1.png");
+  background-size: 100% 100%;
+}
+.avatar {
+  position: absolute;
+  width: 100%;
+  height: 95%;
+  background-image: url("/static/user2.png");
+  background-size: 50% 50%;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.userinfo-box {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 20rpx;
+  background-color: #fff;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
 
+.user1 {
+  display: flex;
+  flex-direction: row;
+  background-image: url("/static/user3.png");
+  background-size: 100% 100%;
+  margin: 10px;
+  width: 48%;
+  height: 120rpx;
+}
+.usericon1 {
+  margin-left: 20rpx;
+  margin-top: 20rpx;
+  width: 30%;
+  height: 80%;
+  background-image: url("/static/usericon1.png");
+  background-size: 100% 100%;
+  margin-right: 20rpx;
+}
+.username1 {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.user2 {
+  display: flex;
+  flex-direction: row;
+  background-image: url("/static/user4.png");
+  background-size: 100% 100%;
+  margin: 10px;
+  width: 48%;
+  height: 120rpx;
+}
+.usericon2 {
+  margin-left: 20rpx;
+  margin-top: 20rpx;
+  width: 30%;
+  height: 80%;
+  background-image: url("/static/usericon2.png");
+  background-size: 100% 100%;
+  margin-right: 20rpx;
+}
+.username2 {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.text-info {
+  color: #8094ac;
+  font-weight: bold;
+}
 .UCenter-bg text {
   opacity: 0.8;
 }
@@ -179,25 +268,59 @@
   height: 200rpx;
 }
 
-.UCenter-bg .gif-wave{
+.UCenter-bg .gif-wave {
   position: absolute;
   width: 100%;
   bottom: 0;
   left: 0;
   z-index: 99;
-  mix-blend-mode: screen;  
-  height: 100rpx;   
+  mix-blend-mode: screen;
+  height: 100rpx;
 }
 
-map,.mapBox{
+map,
+.mapBox {
   left: 0;
   z-index: 99;
-  mix-blend-mode: screen;  
-  height: 100rpx;   
+  mix-blend-mode: screen;
+  height: 100rpx;
 }
 
-map,.mapBox{
+map,
+.mapBox {
   width: 750rpx;
   height: 300rpx;
 }
+
+.userSacll {
+  background-image: url("/static/userscall.png");
+  background-size: 100% 100%;
+  width: 36rpx;
+  height: 36rpx;
+  margin-right: 20rpx;
+  display: inline-block;
+  vertical-align: middle;
+}
+.userDetail {
+  background-image: url("/static/userdetail.png");
+  background-size: 100% 100%;
+  width: 36rpx;
+  height: 36rpx;
+  margin-right: 20rpx;
+  display: inline-block;
+  vertical-align: middle;
+}
+.userExit {
+  background-image: url("/static/userexit.png");
+  background-size: 100% 100%;
+  width: 36rpx;
+  height: 36rpx;
+  margin-right: 20rpx;
+  display: inline-block;
+  vertical-align: middle;
+}
+.text-grey {
+  color: #000;
+  font-weight: bold;
+}
 </style>