Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
423ee345 1 parent 62f6d4c3

fix 我的信息页面样式优化显示

Inline Side-by-side
Showing 2 changed files with 40 additions and 12 deletions
1 +.my-info-page {
2 + .avatar {
3 + display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 50rpx; margin-bottom: 50rpx; position: relative;
4 + .edit {
5 + position: absolute; right: calc(50% - 50rpx); bottom: 10rpx; width: 100rpx; height: 40rpx; color: #FFF; display: flex; align-items: center; justify-content: center;font-size: 28rpx;
6 + }
7 + }
8 + .info-name {
9 + margin: 30rpx 40rpx;
10 + .wrapper {
11 + border: 1px solid #F1EBDF; width: 90%; border-radius: 50rpx; padding: 5rpx 0;
12 + }
13 + }
14 + .info-tel {
15 + margin: 30rpx 40rpx;
16 + .wrapper {
17 + border: 1px solid #F1EBDF; width: 90%; border-radius: 50rpx; padding: 5rpx 0;
18 + }
19 + }
20 + .save-btn {
21 + margin: 50rpx 40rpx;
22 + text {
23 + font-size: 33rpx; font-weight: bold;
24 + }
25 + }
26 +}
1 .nut-input { 27 .nut-input {
2 border-radius: 50rpx; 28 border-radius: 50rpx;
3 } 29 }
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-19 10:29:32 4 + * @LastEditTime: 2023-12-20 18:02:57
5 * @FilePath: /meihuaApp/src/pages/myInfo/index.vue 5 * @FilePath: /meihuaApp/src/pages/myInfo/index.vue
6 - * @Description: 文件描述 6 + * @Description: 我的信息页面
7 --> 7 -->
8 <template> 8 <template>
9 - <view> 9 + <view class="my-info-page">
10 - <view style="display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 50rpx; margin-bottom: 50rpx; position: relative;"> 10 + <view class="avatar" @tap="uploadImg">
11 <nut-avatar size="100"> 11 <nut-avatar size="100">
12 - <img :src="imageUrl" style="border-radius: 50%;" @tap="uploadImg"/> 12 + <img :src="imageUrl" style="border-radius: 50%;"/>
13 </nut-avatar> 13 </nut-avatar>
14 - <view style="position: absolute; right: calc(50% - 50rpx); bottom: 10rpx; width: 100rpx; height: 40rpx; color: #FFF; display: flex; align-items: center; justify-content: center;font-size: 28rpx;">编辑</view> 14 + <view class="edit">编辑</view>
15 </view> 15 </view>
16 - <view style="margin: 30rpx 40rpx;"> 16 + <view class="info-name">
17 <nut-row type="flex" justify="center" align="center"> 17 <nut-row type="flex" justify="center" align="center">
18 <nut-col span="4">姓名</nut-col> 18 <nut-col span="4">姓名</nut-col>
19 <nut-col span="20"> 19 <nut-col span="20">
20 - <view style="border: 1px solid #F1EBDF; width: 90%; border-radius: 50rpx; padding: 5rpx 0;"> 20 + <view class="wrapper">
21 <nut-input v-model="username" placeholder="请输入姓名" :border="false" /> 21 <nut-input v-model="username" placeholder="请输入姓名" :border="false" />
22 </view> 22 </view>
23 </nut-col> 23 </nut-col>
24 </nut-row> 24 </nut-row>
25 </view> 25 </view>
26 - <view style="margin: 30rpx 40rpx;"> 26 + <view class="info-tel">
27 <nut-row type="flex" justify="center" align="center"> 27 <nut-row type="flex" justify="center" align="center">
28 <nut-col span="4">电话</nut-col> 28 <nut-col span="4">电话</nut-col>
29 <nut-col span="20"> 29 <nut-col span="20">
30 - <view style="border: 1px solid #F1EBDF; width: 90%; border-radius: 50rpx; padding: 5rpx 0;"> 30 + <view class="wrapper">
31 <nut-input v-model="tel" placeholder="请输入电话" :border="false" type="number" /> 31 <nut-input v-model="tel" placeholder="请输入电话" :border="false" type="number" />
32 </view> 32 </view>
33 </nut-col> 33 </nut-col>
34 </nut-row> 34 </nut-row>
35 </view> 35 </view>
36 - <view style="margin: 50rpx 40rpx;"> 36 + <view class="save-btn">
37 - <nut-button @tap="save" block color="#6A4925" size="large"><text style="font-size: 33rpx; font-weight: bold;">保&nbsp;存</text></nut-button> 37 + <nut-button @tap="save" block color="#6A4925" size="large">
38 + <text>保&nbsp;存</text>
39 + </nut-button>
38 </view> 40 </view>
39 </view> 41 </view>
40 </template> 42 </template>
......