uniapp用户界面模板示例

￡神魔★判官ぃ 2023-02-16 12:02 3阅读 0赞

<template>
    	<view class="content">
    		
    		<view class="userback">
    			<img src="https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png">
    			<view class="userName">木子李</view>
    			<view class="userOrgan">炼钢部</view>
    		</view>
    		<view class="cu-list menu-avatar">			
    			<view class="cu-item">								
    				<view class="content">软件版本</view>												
    				<view class="action">2.0.0</view>															
    			</view>
    			<view class="cu-item">
    				<view class="content">软件版本</view>												
    				<view class="action">2.0.0</view>															
    			</view>			
    		</view>		
    		<view class="btn-row">
    			<button v-if="!hasLogin" type="primary" class="primary" @tap="bindLogin">登录</button>
    			<button v-if="hasLogin" type="default" @tap="bindLogout">退出登录</button>
    		</view>
    	</view>
    </template>
    <script>
    	import {
    		mapState,
    		mapMutations
    	} from 'vuex'
    	export default {
    		computed: {
    			...mapState(['hasLogin', 'forcedLogin'])
    		},
    		methods: {
    			...mapMutations(['logout']),
    			bindLogin() {
    				uni.navigateTo({
    					url: '../login/login',
    				});
    			},
    			bindLogout() {
    				this.logout();
    				/**
    				 * 如果需要强制登录跳转回登录页面
    				 */
    				if (this.forcedLogin) {
    					uni.reLaunch({
    						url: '../login/login',
    					});
    				}
    			}
    		}
    	}
    </script>
    <style>
    	.userback {
    		height: 216px;
    		background-image: url('../../static/img/userback.png');
    		background-repeat: no-repeat;
    		background-size: 100%;
    		text-align: center
    	}
    
    	.userback img {
    		margin: auto;
    		border-radius: 51px;
    		margin-top: 21%;
    		width: 97px;
    		height: 97px;
    	}
    	.userName{
    		color: #111111;
    		font-size: 0.9rem;
    	}
    	.userOrgan{		
    	}	
    	uni-button[type=primary] {
    	    margin: 0 4%;
    	    background-image: linear-gradient(to top, #66b7f9,#1c82d4);
    	}
    	.cu-list.menu-avatar>.cu-item {	   
    	    height: 37px;
    	    background: none;
    	}
    	.cu-list.menu-avatar>.cu-item .content {	   
    	    left: 18px;	    
    	}
    	.cu-list.menu-avatar>.cu-item .action {
    	    width: 42px;	  
    	}
    	.cu-list.menu-avatar {	   
    	    height: 195px;
    	}
    </style>

效果是这样的  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200609182038360.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ==,size_16,color_FFFFFF,t_70