free-sun
/
Inspection
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

'我的'UI

master
liujiangyong 2 years ago
parent
da3a05edcf
commit
ec9b441531
9 changed files with 146 additions and 35 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      weapp/images/avatar.png
  2. 1
      weapp/images/avatar.svg
  3. BIN
      weapp/images/card_bg.png
  4. 6
      weapp/images/email.svg
  5. 6
      weapp/images/phone.svg
  6. 2
      weapp/package/basic/basic.wxml
  7. 2
      weapp/pages/index/index.js
  8. 46
      weapp/pages/myInfo/myInfo.wxml
  9. 118
      weapp/pages/myInfo/myInfo.wxss

BIN
weapp/images/avatar.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

1
weapp/images/avatar.svg
View File

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1673618443252" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2117" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M512.3 106c-223.6 0-406.7 183-406.7 406.7s183 406.6 406.7 406.6 406.6-183 406.6-406.7C919 289 736 106 512.3 106z m10.2 122c155 0 155 116.9 155 183s-61 188.1-155 190.6c-91.5 0-155-122-155-190.6 0-66.1 0-183 155-183z m-10.2 668.4c-116.9 0-223.7-53.4-294.8-137.2 10.2-25.4 22.9-53.4 40.7-68.6 38.1-30.5 152.5-81.3 152.5-81.3l71.2 137.2 12.7-33-20.4-40.7 40.7-40.7 40.7 40.7-17.9 43.2 10.2 33.1 73.7-134.7s114.4 50.8 152.5 81.3c17.8 12.7 30.5 35.6 38.1 55.9-68.6 88.9-177.9 144.8-299.9 144.8z m0 0" p-id="2118" fill="#707070"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 868 B

BIN
weapp/images/card_bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

6
weapp/images/email.svg
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="design-iconfont">
<g fill="none" fill-rule="evenodd">
<path fill="#1873EB" d="M10 0A10 10 0 1 0 10 20A10 10 0 1 0 10 0Z"/>
<path d="M7.99662269,0 L2.00337731,0 C0.898739927,0 0,0.831268484 0,1.85327198 L0,6.14663667 C0,7.16873152 0.898838679,8 2.00337731,8 L7.99652394,8 C9.10126007,8 10,7.16873152 10,6.14672802 L10,1.85336333 C10,0.831268484 9.10135882,0 7.99662269,0 Z M6.92200585,3.37540678 L9.02680123,1.28252852 C9.13572444,1.45006109 9.20218439,1.64390194 9.20218439,1.85336333 L9.20218439,5.31664706 L6.92200585,3.37540678 Z M7.99662269,0.738093335 C8.14317033,0.738093335 8.28191657,0.765954531 8.41197267,0.810441098 L4.99990125,4.20302134 L1.58812609,0.810441098 C1.71818218,0.765954531 1.85692842,0.738093335 2.00337731,0.738093335 L7.99662269,0.738093335 Z M0.973297519,1.28252852 L3.07799415,3.37540678 L0.797914362,5.31664706 L0.797914362,1.85336333 C0.797914362,1.64399329 0.864374309,1.45006109 0.973297519,1.28252852 L0.973297519,1.28252852 Z M7.99662269,7.26190666 L2.00337731,7.26190666 C1.39714015,7.26190666 0.899036183,6.84453681 0.815097172,6.30476038 L3.62122768,3.91563995 L4.9998025,5.28650216 L6.37857481,3.91563995 L9.18490283,6.30476038 C9.10096382,6.84453681 8.6027611,7.26190666 7.99662269,7.26190666 Z" transform="translate(5 6)" fill="#FFF" fill-rule="nonzero"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

6
weapp/images/phone.svg
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="design-iconfont">
<g fill="none" fill-rule="evenodd">
<path fill="#1873EB" d="M10 0A10 10 0 1 0 10 20A10 10 0 1 0 10 0Z"/>
<path d="M6.66666667,0 C7.40303031,0 8,0.738749995 8,1.65000001 L8,10.35 C8,11.26125 7.40303031,12 6.66666667,12 L1.33333333,12 C0.596969693,12 0,11.26125 0,10.35 L0,1.65000001 C0,0.738750009 0.596969693,0 1.33333333,0 L6.66666667,0 Z M5.59090909,10 L3.40909091,10 C3.18315624,10 3,10.2238576 3,10.5 C3,10.7761424 3.18315624,11 3.40909091,11 L5.59090909,11 C5.81684376,11 6,10.7761424 6,10.5 C6,10.2238576 5.81684376,10 5.59090909,10 Z M6.44444445,1 L1.55555555,1 C1.40821306,1 1.26690533,1.08428547 1.16271845,1.23431458 C1.05853157,1.38434368 1,1.58782682 1,1.80000001 L1,9 L7,9 L7,1.80000001 C7,1.58782682 6.94146843,1.38434368 6.83728155,1.23431458 C6.73309467,1.08428547 6.59178694,1 6.44444445,1 L6.44444445,1 Z" transform="translate(6 4)" fill="#FFF" fill-rule="nonzero"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 994 B

2
weapp/package/basic/basic.wxml
View File

@ -1,7 +1,7 @@
<!--package/basic/basic.wxml-->
<view class="page">
<view class='header-item-container'>
<image class='logo' src='../../images/avatar.svg' />
<image class='logo' src='../../images/avatar.png' />
<view>
<text class='userName'>{{userInfo.name || '--'}}</text>
</view>

2
weapp/pages/index/index.js
View File

@ -32,7 +32,7 @@ Page({
callout: {
content: `${p.name}\n今日巡检：${todayCount}次`,
padding: 10,
display: this.data.isShowCallout ? 'ALWAYS' : 'ALWAYS',
display: this.data.isShowCallout ? 'ALWAYS' : 'BYCLICK',
borderColor: '#1684FF',
borderWidth: 1,
},

46
weapp/pages/myInfo/myInfo.wxml
View File

@ -1,25 +1,51 @@
<!--pages/myInfo/myInfo.wxml-->
<!-- pages/myInfo/myInfo.wxml -->
<view class="bg"></view>
<view class='box'>
<view class='header-item-container'>
<image class='logo' src='../../images/avatar.svg' />
<view>
<text class='userName'>{{userInfo.name}}</text>
<view class='header-item-container' style="background-image: url('/images/card_bg.png')">
<view class="info-box">
<image class='avatar' src='../../images/avatar.png' />
<view class="info">
<view class='userName over-ellipsis'>
{{userInfo.name}}
</view>
<view class='contact'>
<image class='icon' src='../../images/phone.svg' />
<view class="text over-ellipsis">
{{userInfo.phone}}
</view>
</view>
<view class='contact'>
<image class='icon' src='../../images/email.svg' />
<view class="text over-ellipsis">
{{userInfo.email || '--'}}
</view>
</view>
</view>
<view class="post over-ellipsis">
{{userInfo.post || '--'}}
</view>
</view>
<view class="dept-box">
<view class='dept'>
{{userInfo.deptName}}
</view>
</view>
</view>
<view class='body-container'>
<view class='body-item' bindtap="bindClick">
<view class='body-info'>基本信息</view>
<view class='body-info'>
基本信息
</view>
<image class="right" src="/images/right.svg"></image>
</view>
<!-- <view class='body-item'>
<view class='body-info'>通知消息</view>
<image class="right" src="/images/right.svg"></image>
</view> -->
</view>
<view class='foot-container'>
<view class='foot-item' bindtap='logout'>退出登录</view>
<view class='foot-item' bindtap='logout'>
退出登录
</view>
</view>
</view>

118
weapp/pages/myInfo/myInfo.wxss
View File

@ -4,6 +4,24 @@ page {
background-color: #F7F7FA;
}
.over-ellipsis {
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
white-space: nowrap;
}
.bg {
width: 100%;
height: 160px;
position: fixed;
display: flex;
justify-content: center;
background-image: linear-gradient(180deg, #1979ff 0%, #4E87FF 100%);
border-radius: 0 0 50% 50%;
z-index: -1;
}
/* 容器 */
.box {
padding: 30rpx;
@ -12,19 +30,33 @@ page {
.header-item-container {
width: 100%;
height: 180rpx;
background: rgb(255, 255, 255);
height: 165px;
border-radius: 10rpx;
flex-direction: row;
background-size: 100% 165px;
}
.info-box {
width: 100%;
height: 127px;
display: flex;
justify-content: start;
align-items: center;
justify-content: space-between;
}
.logo {
width: 120rpx;
height: 120rpx;
padding: 30rpx;
.avatar {
width: 54px;
min-width: 54px;
height: 54px;
padding: 16px;
margin-bottom: 30px;
}
.info {
height: 100%;
min-width: 55%;
max-width: 60%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.userName {
@ -32,6 +64,51 @@ page {
font-weight: 600;
}
.contact {
display: flex;
align-items: center;
min-width: 190px;
}
.contact .icon {
width: 20px;
min-width: 20px;
height: 20px;
}
.contact .text {
min-width: 170px;
margin-left: 8px;
font-size: 14px;
color: #00000080;
}
.post {
border: 1px solid #006BE3;
border-radius: 100px 0 0 100px;
min-width: 30px;
max-width: 60px;
height: 25px;
line-height: 25px;
color: #006BE3;
font-size: 14px;
padding: 0 7px;
margin-top: 20px;
}
.dept-box {
height: 36px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.dept-box .dept {
font-size: 14px;
color: #FFFFFF;
margin-right: 10px;
}
.company {
font-size: 28rpx;
font-family: "PingFang SC";
@ -72,23 +149,20 @@ page {
}
.foot-container {
width: 100%;
background: rgb(255, 255, 255);
border-radius: 10rpx;
flex-direction: column;
display: flex;
border: 1px #FFFFFF;
position: absolute;
bottom: 50px;
width: 343px;
height: 42px;
border: 1px solid #006BE3;
border-radius: 24px;
}
.foot-item {
color: rgb(0, 0, 0);
display: flex;
justify-content: center;
align-items: center;
padding: 30rpx;
font-size: 32rpx;
font-family: "PingFang SC";
font-weight: 600;
font-size: 16px;
color: #006BE3;
text-align: center;
line-height: 42px;
}
.right {

Write Preview
Loading…
Cancel
Save