Augcl
/
popularize-front
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
推广小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
31 Commits
1 Branch
14 MiB
Tree: 5d357daf6f
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '5d357daf6f'
${ noResults }
popularize-front/pages_my/user-info.vue

328 lines
7.1 KiB
Raw Normal View History

1
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. <template>
  2. 	<view>
  3. 		<view class="head-box"></view>
  4. 		<uv-navbar autoBack title="个人资料" leftIconColor="#fff" :bgColor="bgColor" height="100rpx" :titleStyle="{color:'#fff'}"></uv-navbar>
  5. 	
  6. 		<view class="content">
  7. 			<view class="img-box">
  8. 				<image src="@/static/image/center/3.png" mode=""></image>
  9. 				<view>点击更换头像</view>
  10. 			</view>
  11. 			<view class="name-box">
  12. 				<view class="name-val">但愿不过瞻仰</view>
  13. 				<view class="sex-box">
  14. 					<image src="@/static/image/center/nan-icon.png" mode=""></image>
  15. 				</view>
  16. 				<view class="age-box">36岁</view>
  17. 				<!-- <image src="@/static/image/center/nv-icon.png" mode=""></image> -->
  18. 			</view>
  19. 			<view class="form-box">
  20. 				<view class="form-box-line">
  21. 					<view class="label-box">
  22. 						<image src="@/static/image/center/user-icon-1.png" mode="widthFix"></image>
  23. 						<view>国籍</view>
  24. 					</view>
  25. 					<view class="value-box">
  26. 						中国
  27. 					</view>
  28. 				</view>
  29. 				<view class="form-box-line">
  30. 					<view class="label-box">
  31. 						<image src="@/static/image/center/user-icon-2.png" mode="widthFix"></image>
  32. 						<view>学历</view>
  33. 					</view>
  34. 					<view class="value-box">
  35. 						本科
  36. 					</view>
  37. 				</view>
  38. 				<view class="form-box-line">
  39. 					<view class="label-box">
  40. 						<image src="@/static/image/center/user-icon-3.png" mode="widthFix"></image>
  41. 						<view>行业</view>
  42. 					</view>
  43. 					<view class="value-box">
  44. 						暂无
  45. 					</view>
  46. 				</view>
  47. 				<view class="form-box-line">
  48. 					<view class="label-box">
  49. 						<image src="@/static/image/center/user-icon-4.png" mode="widthFix"></image>
  50. 						<view>电话</view>
  51. 					</view>
  52. 					<view class="value-box">
  53. 						123321123
  54. 					</view>
  55. 				</view>
  56. 				<view class="form-box-line">
  57. 					<view class="label-box">
  58. 						<image src="@/static/image/center/user-icon-5.png" mode="widthFix"></image>
  59. 						<view>性别</view>
  60. 					</view>
  61. 					<view class="value-box">
  62. 						男
  63. 					</view>
  64. 				</view>
  65. 			</view>
  66. 			<view class="tips-box">
  67. 				<view class="title-box">标签</view>
  68. 				<view class="tips-val">
  69. 					<view class="tips-item tips-1">单身</view>
  70. 					<view class="tips-item tips-2">985</view>
  71. 					<view class="tips-item tips-3">设计师</view>
  72. 					<view class="tips-item tips-4">行业大牛</view>
  73. 				</view>
  74. 			</view>
  75. 			<view class="about-box">
  76. 				<uv-divider text="关于我" textSize="28rpx"></uv-divider>
  77. 				<view class="about-box-val">我目前居住在上海，是一名工程师，在一家互联网公司工作。虽然工作很忙，但我总能找到时间享受我的爱好——旅行和摄影。每到假期，我就</view>
  78. 			</view>
  79. 		</view>
  80. 		<view class="btn-box">
  81. 			<uv-button text="编辑信息" @click="editClick" color="#381615" shape="circle" :customStyle="btnCustomStyle"></uv-button>
  82. 		</view>
  83. 	</view>
  84. </template>
  85. 

  86. <script>
  87. 	export default{
  88. 		data() {
  89. 			return {
  90. 				btnCustomStyle:{
  91. 					color:'#FF5858'
  92. 				},
  93. 				bgColor:'transparent',
  94. 				info:{
  95. 					name:'',
  96. 					phone:'',
  97. 					idCard:'',
  98. 					jianli:''
  99. 				},
  100. 			}
  101. 		},
  102. 		onPageScroll(e) {
  103. 			if(e.scrollTop > 50) {
  104. 				this.bgColor = '#49070c'
  105. 			}else{
  106. 				this.bgColor = 'transparent'
  107. 			}
  108. 		},
  109. 		methods:{
  110. 			editClick() {
  111. 				uni.navigateTo({
  112. 					url:'/pages_my/user-msg'
  113. 				})
  114. 			}
  115. 		}
  116. 	}
  117. </script>
  118. 

  119. <style lang="scss">
  120. 	page {
  121. 		background-color: #060504;
  122. 	}
  123. </style>
  124. <style lang="scss" scoped>
  125. 	.head-box {
  126. 		background: url('@/static/image/nav-bg.png') no-repeat;
  127. 		background-size: 100% 100%;
  128. 		width: 100%;
  129. 		height: 534rpx;
  130. 		position: absolute;
  131. 		z-index: -1;
  132. 	}
  133. 	.content {
  134. 		padding: 0 30rpx 170rpx;
  135. 		padding-top: calc(var(--status-bar-height) + 110rpx);
  136. 		.img-box {
  137. 			display: flex;
  138. 			flex-direction: column;
  139. 			align-items: center;
  140. 			justify-content: center;
  141. 			margin-bottom: 40rpx;
  142. 			image {
  143. 				width: 176rpx;
  144. 				height: 176rpx;
  145. 				border-radius: 50%;
  146. 			}
  147. 			view {
  148. 				font-weight: 400;
  149. 				font-size: 24rpx;
  150. 				color: #CCCCCC;
  151. 				margin-top: 20rpx;
  152. 			}
  153. 		}
  154. 	
  155. 		.name-box {
  156. 			display: flex;
  157. 			align-items: center;
  158. 			.name-val {
  159. 				font-weight: 600;
  160. 				font-size: 32rpx;
  161. 				color: #E6E6E6;
  162. 				margin-right: 18rpx;
  163. 			}
  164. 			.sex-box {
  165. 				background-color: #0D1A20;
  166. 				width: 69rpx;
  167. 				height: 36rpx;
  168. 				border-radius: 18rpx;
  169. 				display: flex;
  170. 				align-items: center;
  171. 				justify-content: center;
  172. 				margin-right: 10rpx;
  173. 				image {
  174. 					width: 25rpx;
  175. 					height: 25rpx;
  176. 				}
  177. 			}
  178. 			.age-box {
  179. 				width: 85rpx;
  180. 				height: 36rpx;
  181. 				background: #261705;
  182. 				border-radius: 18rpx;
  183. 				display: flex;
  184. 				align-items: center;
  185. 				justify-content: center;
  186. 				font-weight: 400;
  187. 				font-size: 23rpx;
  188. 				color: #FFA200;
  189. 			}
  190. 		}
  191. 		.form-box {
  192. 			background: #1B1713;
  193. 			border-radius: 27rpx;
  194. 			padding:0 40rpx;
  195. 			margin-top: 25rpx;
  196. 			margin-bottom: 44rpx;
  197. 			.form-box-line {
  198. 				height: 112rpx;
  199. 				border-bottom: 1px solid #403D3A;
  200. 				display: flex;
  201. 				align-items: center;
  202. 				justify-content: space-between;
  203. 				&:last-child {
  204. 					border: none;
  205. 				}
  206. 				.label-box {
  207. 					font-weight: 400;
  208. 					font-size: 31rpx;
  209. 					color: #CCCCCC;
  210. 					display: flex;
  211. 					align-items: center;
  212. 					image {
  213. 						width: 35rpx;
  214. 						height: 35rpx;
  215. 						margin-right: 23rpx;
  216. 					}
  217. 				}
  218. 				.value-box {
  219. 					font-weight: 400;
  220. 					font-size: 28rpx;
  221. 					color: #CCCCCC;
  222. 				}
  223. 			}
  224. 			
  225. 			.form-title {
  226. 				font-weight: 500;
  227. 				font-size: 28rpx;
  228. 				color: #CCCCCC;
  229. 				padding-top: 32rpx;
  230. 				
  231. 			}
  232. 			.choose-box {
  233. 				margin-top: 28rpx;
  234. 				display: flex;
  235. 				flex-wrap: wrap;
  236. 				.choose-item {
  237. 					width: 137rpx;
  238. 					height: 67rpx;
  239. 					border-radius: 13rpx;
  240. 					border: 1rpx solid #CCCCCC;
  241. 					text-align: center;
  242. 					line-height: 67rpx;
  243. 					font-weight: 500;
  244. 					font-size: 26rpx;
  245. 					color: #CCCCCC;
  246. 					margin-right: 15rpx;
  247. 					margin-bottom: 24rpx;
  248. 					&:nth-child(4n){
  249. 						margin-right: 0;
  250. 					}
  251. 				}
  252. 				.choose-class {
  253. 					background-color: #341616;
  254. 					color: #FF4747;
  255. 					border: 1rpx solid #FF4747;
  256. 				}
  257. 			}
  258. 		}
  259. 	
  260. 		.title-box {
  261. 			font-weight: 500;
  262. 			font-size: 27rpx;
  263. 			color: #666666;
  264. 		}
  265. 		.tips-box {
  266. 			margin-top: 30rpx;
  267. 			margin-bottom: 27rpx;
  268. 			.tips-val {
  269. 				display: flex;
  270. 				align-items: center;
  271. 				margin-top: 27rpx;
  272. 				.tips-item {
  273. 					width: 147rpx;
  274. 					height: 72rpx;
  275. 					border-radius: 13rpx;
  276. 					font-weight: 500;
  277. 					font-size: 28rpx;
  278. 					line-height: 72rpx;
  279. 					text-align: center;
  280. 					margin-right: 20rpx;
  281. 					margin-bottom: 10rpx;
  282. 					flex-wrap: wrap;
  283. 					&:nth-child(4n) {
  284. 						margin-right: 0;
  285. 					}
  286. 				}
  287. 				.tips-1 {
  288. 					background-color: #1F1404;
  289. 					color: #E17E09;
  290. 				}
  291. 				.tips-2 {
  292. 					background-color: #1F0E0D;
  293. 					color: #FF4747;
  294. 				}
  295. 				.tips-3 {
  296. 					background-color: #051529;
  297. 					color: #0979E1;
  298. 				}
  299. 				.tips-4 {
  300. 					background-color: #191F0E;
  301. 					color: #4EB477;
  302. 				}
  303. 			}
  304. 		}
  305. 		.about-box {
  306. 			.about-box-val {
  307. 				margin-top: 36rpx;
  308. 				background: #171310;
  309. 				border-radius: 20rpx;
  310. 				padding: 60rpx 40rpx;
  311. 				font-weight: 400;
  312. 				font-size: 28rpx;
  313. 				color: #CCCCCC;
  314. 				line-height: 46rpx;
  315. 			}
  316. 		}
  317. 	}
  318. 	.btn-box {
  319. 		background-color: #060504;
  320. 		position: fixed;
  321. 		bottom: 0;
  322. 		left: 0;
  323. 		right: 0;
  324. 		padding: 20rpx 40rpx;
  325. 		height: 150rpx;
  326. 		z-index: 999;
  327. 		box-sizing: border-box;
  328. 	}
  329. </style>