位置: IT常识 - 正文

小程序开发必备功能的吐血整理【个人中心界面样式大全】(小程序开发必备的东西有哪些)

编辑:rootadmin
小程序开发必备功能的吐血整理【个人中心界面样式大全】

推荐整理分享小程序开发必备功能的吐血整理【个人中心界面样式大全】(小程序开发必备的东西有哪些),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:小程序开发工具有哪些,小程序开发工具有哪些,小程序开发必备的东西,小程序开发必备的东西,小程序开发必备的东西,小程序开发必备知识,小程序开发必备的东西有哪些,小程序开发必备的东西,内容如对您有帮助,希望把文章链接给更多的朋友!

📌个人主页:个人主页 ​🧀 推荐专栏:小程序开发成神之路 --(这是一个为想要入门和进阶小程序开发专门开启的精品专栏!从个人到商业的全套开发教程,实打实的干货分享,确定不来看看? 😻😻) 📝作者简介:一个读研中创业、打工中学习的能搞全栈、也搞算法、目前在搞大数据的奋斗者。 ⭐️您的小小关注是我持续输出的动力!⭐️

干货内容推荐小程序开发必备功能的吐血整理【个人中心界面样式大全】(小程序开发必备的东西有哪些)

🥇入门和进阶小程序开发,不可错误的精彩内容🥇 :

《你真的会做小程序按钮吗?看了字节35K前端的样式设计,悟了》《来接私活吧?玩转小程序开发之丝滑拆红包【附完整代码】》《来接私活吧?小程序接私活必备功能-婚恋交友【附完整代码】》《吐血整理的几十款小程序登陆界面【附完整代码】》文章目录干货内容推荐一、引言二、样例展示三、源码分享3.1 Code 1-13.2 Code 1-23.3 Code 1-33.4 Code 1-43.5 Code 1-53.5 Code 1-63.7 Code 1-73.8 Code 1-83.9 Code 1-93.10 Code 1-103.11 Code 1-11一、引言

个人中心界面是小程序开发中,底部tarbar的必备元素之一!用户信息也是每个小程序必须要精心维护的重中之重!

想要给用户带来高级且享受的用户体验,一个设计精美、交互流畅的个人中心界面就显得尤为重要。

为此,我总结了这么多年来的小程序开发经验,吐血整理出了每个小程序开发者必备的开发精囊,不收藏就会后悔的那种!

二、样例展示样式名称样式效果源码代号商城样式ACode 1-1通用样式ACode 1-2通用样式BCode 1-3通用样式CCode 1-4通用样式DCode 1-5通用样式ECode 1-6电商样式BCode 1-7电商样式CCode 1-8会员中心样式ACode 1-9会员样式BCode 1-10通用样式GCode 1-11三、源码分享

在上个章节所提及的界面效果中,其类型从娱乐交友、生活购物覆盖到了各个应用场景。其中一些通用的样式效果,由于其元素的结构适合各个场景,因此在我的日常开发中,经常拿他们来魔改,从而打到我想要的效果。

以下是每个样例的详细代码,请君自取:

3.1 Code 1-1<template><view><view class="header" v-bind:class="{'status':isH5Plus}"><view class="userinfo"><view class="face"><image :src="userinfo.face"></image></view><view class="info"><view class="username">{{userinfo.username}}</view><view class="integral">积分:{{userinfo.integral}}</view></view></view><view class="setting"><image src="/static/other/10.png"></image></view></view><view class="orders"><view class="box"><view class="label" v-for="(row,index) in orderTypeLise" :key="row.name" hover-class="hover" @tap="toOrderType(index)"><view class="icon"><view class="badge" v-if="row.badge>0">{{row.badge}}</view><image :src="row.icon"></image></view>{{row.name}}</view></view></view><view class="list" v-for="(list,list_i) in severList" :key="list_i"><view class="li" v-for="(li,li_i) in list" @tap="toPage(list_i,li_i)" v-bind:class="{'noborder':li_i==list.length-1}" hover-class="hover" :key="li.name"><view class="icon"><image :src="li.icon"></image></view><view class="text">{{li.name}}</view><image class="to" src="/static/other/youjiantou.png"></image></view></view><soure :url="url"></soure></view></template><script>export default {data() {return {url: 'https://ext.dcloud.net.cn/plugin?id=105',//#ifdef APP-PLUSisH5Plus: true,//#endif//#ifndef APP-PLUSisH5Plus: false,//#endifuserinfo: {},orderTypeLise: [//name-标题 icon-图标 badge-角标{name: '待付款',icon: '/static/other/1.png',badge: 99},{name: '待发货',icon: '/static/other/2.png',badge: 2},{name: '待收货',icon: '/static/other/3.png',badge: 6},{name: '待评价',icon: '/static/other/4.png',badge: 9},{name: '退换货',icon: '/static/other/5.png',badge: 0}],severList: [[{name: '我的收藏',icon: '/static/other/6.png'},{name: '优惠券',icon: '/static/other/7.png'},{name: '红包',icon: '/static/other/8.png'},{name: '任务',icon: '/static/other/9.png'},],[{name: '积分明细',icon: '/static/other/1.png'},{name: '抽奖',icon: '/static/other/2.png'},{name: '收货地址',icon: '/static/other/3.png'}]],};},onLoad() {//加载this.init();},methods: {init() {//用户信息this.userinfo = {face: '/static/other/1.png',username: "VIP会员10240",integral: "1435"}},//用户点击订单类型toOrderType(index) {uni.showToast({title: this.orderTypeLise[index].name});},//用户点击列表项toPage(list_i, li_i) {uni.showToast({title: this.severList[list_i][li_i].name});}}}</script><style lang="scss">page {background-color: #fff}.header {&.status {padding-top: var(--status-bar-height);}background-color:#ff6364;width:92%;height:30vw;padding:0 4%;display:flex;align-items:center;.userinfo {width: 90%;display: flex;.face {flex-shrink: 0;width: 15vw;height: 15vw;image {width: 100%;height: 100%;border-radius: 100%}}.info {display: flex;flex-flow: wrap;padding-left: 30upx;.username {width: 100%;color: #fff;font-size: 40upx}.integral {display: flex;align-items: center;padding: 0 20upx;height: 40upx;color: #fff;background-color: rgba(0, 0, 0, 0.1);border-radius: 20upx;font-size: 24upx}}}.setting {flex-shrink: 0;width: 6vw;height: 6vw;image {width: 100%;height: 100%}}}.hover {background-color: #eee}.orders {background-color: #ff6364;width: 92%;height: 11vw;padding: 0 4%;margin-bottom: calc(11vw + 40upx);display: flex;align-items: flex-start;border-radius: 0 0 100% 100%;margin-top: -1upx;.box {width: 98%;padding: 0 1%;height: 22vw;background-color: #fefefe;border-radius: 24upx;box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);margin-bottom: 40upx;display: flex;align-items: center;justify-content: center;.label {display: flex;align-items: center;justify-content: center;flex-flow: wrap;width: 100%;height: 16vw;color: #666666;font-size: 26upx;.icon {position: relative;width: 7vw;height: 7vw;margin: 0 1vw;.badge {position: absolute;width: 4vw;height: 4vw;background-color: #ec6d2c;top: -1vw;right: -1vw;border-radius: 100%;font-size: 20upx;color: #fff;display: flex;align-items: center;justify-content: center;z-index: 10;}image {width: 7vw;height: 7vw;z-index: 9;}}}}}.list {width: 100%;border-bottom: solid 26upx #f1f1f1;.li {width: 92%;height: 100upx;padding: 0 4%;border-bottom: solid 1upx #e7e7e7;display: flex;align-items: center;&.noborder {border-bottom: 0}.icon {flex-shrink: 0;width: 50upx;height: 50upx;image {width: 50upx;height: 50upx}}.text {padding-left: 20upx;width: 100%;color: #666}.to {flex-shrink: 0;width: 40upx;height: 40upx}}}</style>3.2 Code 1-2<template><view class="center"><view class="center_top"></view><!--头部用户信息--><view class="avatar_box"><open-data class="avatar" type="userAvatarUrl"></open-data><open-data class="nickname" type="userNickName"></open-data></view><view class="center_box_bg"><!--主菜单--><view class="profily"><view class="home_menu"><view class="cell" v-for="(item,index) in homeMenu" :key="index"><image class="img" :src="item.img" mode="aspectFill"></image><text :class="index==1?'special':''">{{item.name}}</text></view></view></view><!--两边圆弧--><view class="arc"><view class="within_arc"></view></view><!--列表菜单--><view class="list_menu"><view class="row" v-for="(item,index) in listMenu" :key="index"><image :src="item.icon" mode="aspectFill"></image><text>{{item.name}}</text><u-icon name="arrow-right" color="#B6B6B6"></u-icon></view></view></view></view></template><script>export default {data() {return {homeMenu: [{name: '主菜单1',img: '/static/other/2.png',}, {name: '主菜单2',img: '/static/other/2.png',}, {name: '主菜单3',img: '/static/other/2.png',}],listMenu: [{name: '列表菜单一',icon: '/static/other/1.png',}, {name: '列表菜单二',icon: '/static/other/2.png'}, {name: '列表菜单三 ',icon: '/static/other/3.png'}, {name: '列表菜单四',icon: '/static/other/4.png'}, {name: '列表菜单五',icon: '/static/other/5.png'}, {name: '列表菜单六',icon: '/static/other/6.png'}, {name: '列表菜单七',icon: '/static/other/7.png'}]};},methods: {},}</script><style lang="scss">page {height: 100%;}.profily,.profily_header {border-radius: 20rpx;}.center {height: 100%;&_top {height: 400rpx;background-color: $uni-bg-color;background-size: cover;}&_box_bg {background: #F9F9F9;position: relative;.profily {position: absolute;width: 90%;margin: 0 auto;top: -100rpx;left: 5%;background: #FEFEFE;padding: 35rpx;box-sizing: border-box;box-shadow: 1rpx 2rpx 16rpx 1rpx rgba(107, 107, 107, 0.1);}}}.avatar_box {position: fixed;display: flex;justify-content: center;align-items: center;flex-direction: column;top: 70rpx;left: 275rpx;width: 200rpx;height: 200rpx;.avatar {height: 120rpx;width: 120rpx;background-size: 100%;border: 5rpx solid #FFFFFF;border-radius: 50%;overflow: hidden;}.nickname {color: #FFFFFF;padding-top: 10rpx;font-size: 34rpx;font-family: KaiTi;}}.home_menu {position: relative;display: flex;justify-content: space-around;.cell {width: 250rpx;font-size: 24rpx;text-align: center;display: flex;flex-direction: column;.img {width: 80rpx;height: 80rpx;margin: 0 auto;margin-bottom: 5rpx;}text {line-height: 20rpx;margin-top: 20rpx;}.special {border-left: 3rpx solid #CCCCCC;border-right: 3rpx solid #CCCCCC;}}}.arc {background-color: $uni-bg-color;height: 100rpx;}.within_arc {background-color: #FFFFFF;border-top-left-radius: 20%;border-top-right-radius: 20%;height: 100rpx;}.list_menu {width: 100%;display: inline-block;.row {font-size: 28rpx;letter-spacing: 1rpx;padding: 30rpx 5%;background: #FEFEFE;border-bottom: 1rpx solid #EEEEEE;overflow: hidden;box-sizing: border-box;display: flex;align-items: center;position: relative;text:nth-of-type(1) {margin-left: 20rpx;width: 80%;}image {width: 40rpx;height: 40rpx;}&:nth-of-type(4) {margin-top: 10rpx;}}}</style>3.3 Code 1-3<template><view class="center"><view class="center_top"></view><!--头部用户信息--><view class="avatar_box"><open-data class="avatar" type="userAvatarUrl" default-avatar=""></open-data><open-data class="nickname" type="userNickName"></open-data></view><view class="center_box_bg"><!--主菜单--><view class="profily"><view class="home_menu"><view class="cell" v-for="(item,index) in homeMenu" :key="index"><image class="img" :src="item.img" mode="aspectFill"></image><text :class="index==1?'special':''">{{item.name}}</text></view></view></view><!--列表菜单--><view class="list_menu"><view class="row" v-for="(item,index) in listMenu" :key="index"><image :src="item.icon" mode="aspectFill"></image><text>{{item.name}}</text></view></view></view></view></template><script>export default {data() {return {homeMenu: [{name: '主菜单1',img: '/static/other/10.png'}, {name: '主菜单2',img: '/static/other/10.png'}, {name: '主菜单3',img: '/static/other/10.png'}],listMenu: [{name: '列表菜单一',icon: '/static/other/1.png'}, {name: '列表菜单二',icon: '/static/other/2.png'}, {name: '列表菜单三 ',icon: '/static/other/3.png'}, {name: '列表菜单四',icon: '/static/other/4.png'}, {name: '列表菜单五',icon: '/static/other/5.png'}, {name: '列表菜单六',icon: '/static/other/6.png'}, {name: '列表菜单七',icon: '/static/other/7.png'}, {name: '列表菜单八',icon: '/static/other/8.png'}, {name: '列表菜单九',icon: '/static/other/9.png'}]};},methods: {},}</script><style lang="scss">page {height: 100%;background-color: #f9f9f9;}.profily,.profily_header {border-radius: 20rpx;}.center {height: 100%;&_top {height: 400rpx;background-color: #a9c6b6;background-size: cover;}&_box_bg {background: #F9F9F9;position: relative;.profily {position: absolute;width: 90%;margin: 0 auto;top: -100rpx;left: 5%;background: #FEFEFE;padding: 35rpx;box-sizing: border-box;box-shadow: 1rpx 2rpx 16rpx 1rpx rgba(107, 107, 107, 0.1);}}}.avatar_box {position: fixed;display: flex;justify-content: center;align-items: center;flex-direction: column;top: 50rpx;left: 275rpx;width: 200rpx;height: 200rpx;.avatar {height: 120rpx;width: 120rpx;background-size: 100%;border: 5rpx solid #FFFFFF;border-radius: 50%;overflow: hidden;}.nickname {color: #FFFFFF;padding-top: 10rpx;font-size: 34rpx;font-family: KaiTi;}}.center_box_bg {padding-top: 100rpx;}.home_menu {position: relative;display: flex;justify-content: space-around;.cell {width: 250rpx;font-size: 24rpx;text-align: center;display: flex;flex-direction: column;.img {width: 80rpx;height: 80rpx;margin: 0 auto;margin-bottom: 5rpx;}text {line-height: 20rpx;margin-top: 20rpx;}.special {border-left: 3rpx solid #CCCCCC;border-right: 3rpx solid #CCCCCC;}}}.list_menu {padding: 50rpx 30rpx;display: flex;align-items: center;flex-wrap: wrap;.row {display: flex;justify-content: center;align-items: center;flex-direction: column;width: 230rpx;height: 200rpx;background-color: #FFFFFF;box-shadow: 1rpx 2rpx 16rpx 1rpx rgba(107, 107, 107, 0.1);image {width: 60rpx;height: 60rpx;}text {padding-top: 20rpx;font-size: 24rpx;}}}</style>3.4 Code 1-4<template><view class="center"><view class="logo" @click="goLogin" :hover-class="!login ? 'logo-hover' : ''"><image class="logo-img" src="/static/other/3.png"></image><view class="logo-title"><text class="uer-name">Hi,{{login ? uerInfo.name : '未登录'}}</text><text class="go-login navigat-arrow" v-if="!login"></text></view></view><view class="center-list"><view class="center-list-item border-bottom"><text class="list-icon"></text><text class="list-text">帐号管理</text><text class="navigat-arrow"></text></view><view class="center-list-item"><text class="list-icon"></text><text class="list-text">新消息通知</text><text class="navigat-arrow"></text></view></view><view class="center-list"><view class="center-list-item border-bottom"><text class="list-icon"></text><text class="list-text">帮助与反馈</text><text class="navigat-arrow"></text></view><view class="center-list-item"><text class="list-icon"></text><text class="list-text">服务条款及隐私</text><text class="navigat-arrow"></text></view></view><view class="center-list"><view class="center-list-item"><text class="list-icon"></text><text class="list-text">关于应用</text><text class="navigat-arrow"></text></view></view><soure :url="url"></soure></view></template><script>export default {data() {return {url:'https://ext.dcloud.net.cn/plugin?id=38',login: false,uerInfo: {}}},methods: {goLogin() {if (!this.login) {console.log("点击前往登录")}}}}</script><style>@font-face {font-family: texticons;font-weight: normal;font-style: normal;src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');}page,view {display: flex;}page {background-color: #f8f8f8;}.center {flex-direction: column;}.logo {width: 750upx;height: 240upx;padding: 20upx;box-sizing: border-box;background-color: #a9c6b6;flex-direction: row;align-items: center;}.logo-hover {opacity: 0.8;}.logo-img {width: 150upx;height: 150upx;border-radius: 150upx;}.logo-title {height: 150upx;flex: 1;align-items: center;justify-content: space-between;flex-direction: row;margin-left: 20upx;}.uer-name {height: 60upx;line-height: 60upx;font-size: 38upx;color: #FFFFFF;}.go-login.navigat-arrow {font-size: 38upx;color: #FFFFFF;}.login-title {height: 150upx;align-items: self-start;justify-content: center;flex-direction: column;margin-left: 20upx;}.center-list {background-color: #FFFFFF;margin-top: 20upx;width: 750upx;flex-direction: column;}.center-list-item {height: 90upx;width: 750upx;box-sizing: border-box;flex-direction: row;padding: 0upx 20upx;}.border-bottom {border-bottom-width: 1upx;border-color: #c8c7cc;border-bottom-style: solid;}.list-icon {width: 40upx;height: 90upx;line-height: 90upx;font-size: 34upx;color: #4cd964;text-align: center;font-family: texticons;margin-right: 20upx;}.list-text {height: 90upx;line-height: 90upx;font-size: 34upx;color: #555;flex: 1;text-align: left;}.navigat-arrow {height: 90upx;width: 40upx;line-height: 90upx;font-size: 34upx;color: #555;text-align: right;font-family: texticons;}</style>3.5 Code 1-5<template><view><view class="header"><view class="bg"><view class="box"><view class="box-hd"><view class="avator"><img src="/static/other/3.png"></view><view class="phone-number">187****8888</view></view><view class="box-bd"><view class="item"><view class="icon"><img src="/static/other/wx.png"></view><view class="text">我的通知</view></view><view class="item"><view class="icon"><img src="/static/other/wb.png"></view><view class="text">我的收藏</view></view><view class="item"><view class="icon"><img src="/static/other/zfb.png"></view><view class="text">我的客服</view></view></view></view></view></view><view class="list-content"><view class="list"><view class="li noborder"><view class="icon"><image src="/static/other/1.png"></image></view><view class="text">我的名片</view><image class="to" src="/static/other/youjiantou.png"></image></view></view><view class="list"><view class="li " @click="changeSkin"><view class="icon"><image src="/static/other/2.png"></image></view><view class="text">主题切换</view><image class="to" src="/static/other/youjiantou.png"></image></view><view class="li "><view class="icon"><image src="/static/other/3.png"></image></view><view class="text">帮助中心</view><image class="to" src="/static/other/youjiantou.png"></image></view><view class="li "><view class="icon"><image src="/static/other/4.png"></image></view><view class="text">关于我们</view><image class="to" src="/static/other/youjiantou.png"></image></view><view class="li "><view class="icon"><image src="/static/other/5.png"></image></view><view class="text">意见反馈</view><image class="to" src="/static/other/youjiantou.png"></image></view></view><view class="list"><view class="li noborder"><view class="icon"><image src="/static/other/6.png"></image></view><view class="text">系统设置</view><image class="to" src="/static/other/youjiantou.png"></image></view></view><soure :url="url"></soure></view></view></template><script>export default {data() {return {url: 'https://ext.dcloud.net.cn/plugin?id=223'};},onLoad() {},methods: {}}</script><style lang="scss">page {background-color: #f1f1f1;font-size: 30upx;}.header {background: #fff;height: 290upx;padding-bottom: 110upx;.bg {width: 100%;height: 200upx;padding-top: 100upx;background-color: #4191ea;}}.box {width: 650upx;height: 280upx;border-radius: 20upx;margin: 0 auto;background: #fff;box-shadow: 0 5upx 20upx 0upx rgba(0, 0, 150, .2);.box-hd {display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center;.avator {width: 160upx;height: 160upx;background: #fff;border: 5upx solid #fff;border-radius: 50%;margin-top: -80upx;overflow: hidden;img {width: 100%;height: 100%;}}.phone-number {width: 100%;text-align: center;}}.box-bd {display: flex;flex-wrap: nowrap;flex-direction: row;justify-content: center;.item {flex: 1 1 auto;display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center;border-right: 1px solid #f1f1f1;margin: 15upx 0;&:last-child {border: none;}.icon {width: 60upx;height: 60upx;img {width: 100%;height: 100%;}}.text {width: 100%;text-align: center;margin-top: 10upx;}}}}.list-content {background: #fff;}.list {width: 100%;border-bottom: 15upx solid #f1f1f1;background: #fff;&:last-child {border: none;}.li {width: 92%;height: 100upx;padding: 0 4%;border-bottom: 1px solid rgb(243, 243, 243);display: flex;align-items: center;&.noborder {border-bottom: 0}.icon {flex-shrink: 0;width: 50upx;height: 50upx;image {width: 50upx;height: 50upx;}}.text {padding-left: 20upx;width: 100%;color: #666;}.to {flex-shrink: 0;width: 40upx;height: 40upx;}}}</style>3.5 Code 1-6<template><view class="center"><view class="center_top"><view class="mask"></view></view><view class="center_box_bg"><view class="profily"><view class="base"><view class="profily_header"></view><text>昵称</text><image src="/static/other/1.png"></image></view><view class="order_status"><view class="status" v-for="item in status"><image class="icon" :src="item.url" mode="aspectFill"></image><text>{{item.name}}</text></view></view></view><view class="baiban"></view><view class="center_menu"><view class="menu_item" v-for="item in menus"><image :src="item.icon" mode="aspectFill"></image><text>{{item.name}}</text></view></view></view><soure :url="url"></soure></view></template><script>export default {data() {return {url: 'https://ext.dcloud.net.cn/plugin?id=247',status: [{key: 1,name: '待发货',url: '/static/other/3.png'},{key: 2,name: '待收货',url: '/static/other/3.png'},{key: 3,name: '待评价',url: '/static/other/3.png'},{key: 4,name: '全部订单',url: '/static/other/3.png'}],menus: [{name: '我的收藏',icon: '/static/other/1.png',key: 1,},{name: '地址管理',icon: '/static/other/2.png',key: 2,},{name: '尺码对照表',icon: '/static/other/3.png',key: 3,},{name: '帮助中心',icon: '/static/other/4.png',key: 4,},{name: '意见反馈',icon: '/static/other/5.png',key: 5,},{name: '关于我们',icon: '/static/other/6.png',key: 6,}]};},methods: {},computed: {}}</script><style lang="scss">page {height: 100%;}.profily,.profily_header {border-radius: 8px;}.center {height: 100%;&_top {height: 18%;background: url('/static/other/3.png') no-repeat 0% 50%;background-size: cover;.mask {background: rgba(0, 0, 0, .4);height: 100%;}}&_box_bg {background: #F9F9F9;position: relative;.profily {position: absolute;width: 90%;margin: 0 auto;top: -100upx;left: 5%;background: #FEFEFE;padding: 35upx;box-sizing: border-box;box-shadow: 0px 2px 5px #EDEDED;}}}.base {display: flex;align-items: center;border-bottom: 2px solid #F6F6F6;padding-bottom: 35upx;position: relative;.profily_header {height: 120upx;width: 120upx;background-image: url('/static/other/3.png');background-size: 100%;}text {margin-left: 20px;font-size: 30upx;}image {position: absolute;height: 40upx;width: 40upx;right: 0px;top: 0px;}}.order_status {display: flex;justify-content: space-between;margin-top: 35upx;.status {width: 140upx;font-size: 24upx;text-align: center;letter-spacing: .5px;display: flex;flex-direction: column;.icon {width: 50upx;height: 50upx;margin: 0 auto;margin-bottom: 5px;}}}.baiban {background: #FEFEFE;height: 300upx;}.center_menu {width: 100%;display: inline-block;.menu_item {font-size: 28upx;letter-spacing: 1px;padding: 14px 5%;background: #FEFEFE;overflow: hidden;box-sizing: border-box;display: flex;align-items: center;position: relative;border-bottom: 1px solid #EFEFEF;&:hover {background: #F6F6F6 !important;}&::after {content: '';width: 30upx;height: 30upx;position: absolute;right: 5%;background: url('/static/other/youjiantou.png') no-repeat;background-size: 100%;}text:nth-of-type(1) {margin-left: 10px;}image {width: 40upx;height: 40upx;}&:nth-of-type(4) {margin-top: 10px;}}}</style>3.7 Code 1-7<template><view><!--头部--><view class="head"><view class="info"><view class="user"><image src="/static/other/3.png"></image><view class="name"><text>niew</text><text>ID: 9527</text></view></view><view class="btn">分享店铺</view></view></view><!--菜单--><view class="menu-box"><view class="region"><view class="title">待处理</view><view class="menu-row"><view class="cell"><view class="count">33</view><view class="name">待付款</view></view><view class="cell"><view class="count">12</view><view class="name">待发货</view></view><view class="cell"><view class="count">53</view><view class="name">待提货</view></view></view></view><view class="region"><view class="title">店铺数据</view><view class="menu-row"><view class="cell"><view class="count">122</view><view class="name">今日访客</view></view><view class="cell"><view class="count">23</view><view class="name">今日订单</view></view><view class="cell"><view class="count">888</view><view class="name">今日收入</view></view></view></view><view class="region"><view class="title">我的商品</view><view class="menu-row"><view class="cell"><view class="count">54</view><view class="name">销售中</view></view><view class="cell"><view class="count">2</view><view class="name">待上架</view></view><view class="cell"><view class="count" style="color: #ff7962;font-weight: 1000;">+</view><view class="name">新增商品</view></view></view></view></view></view></template><script></script><style lang="scss">page {background-color: #f8f8f8;}.head {position: relative;width: 100%;height: 400rpx;background-color: #ff7962;.info {padding-top: 150rpx;width: 100%;display: flex;justify-content: space-between;align-items: center;.user {padding-left: 50rpx;display: flex;justify-content: center;align-items: center;image {width: 120rpx;height: 120rpx;}.name {padding-left: 20rpx;font-size: 28rpx;font-weight: 600;color: #FFFFFF;display: flex;justify-content: center;align-items: flex-start;flex-direction: column;text {line-height: 40rpx;}}}.btn {text-align: center;background-color: #ff907c;color: #FFFFFF;font-size: 30rpx;width: 200rpx;height: 80rpx;line-height: 80rpx;border-top-left-radius: 10rpx;border-bottom-left-radius: 10rpx;}}}.menu-box {position: absolute;top: 300rpx;width: 100%;}.region {background-color: #FFFFFF;margin: 30rpx;border-radius: 10rpx;.title {font-size: 32rpx;font-weight: bold;padding: 30rpx;}.menu-row {display: flex;justify-content: center;align-items: center;.cell {width: 30%;height: 200rpx;display: flex;justify-content: center;align-items: center;flex-direction: column;.count {font-size: 40rpx;}.name {font-size: 30rpx;line-height: 100rpx;color: #8a8a8a;}}}}</style>3.8 Code 1-8<template><view><view class="head comm-center"><image src="/static/other/4.png"></image><view class="name">niew</view><view class="remarks">写点什么介绍下自己把!</view></view><view class="home-menu"><view class="row comm-center"><view>¥0</view><view>余额</view></view><view class="row edge comm-center"><view>0</view><view>积分</view></view><view class="row comm-center"><view>Lv.1</view><view>等级</view></view></view> <view class="list-menu"><view class="cell"><view class="left-icon comm-center"><image src="/static/other/2.png"></image></view><view class="txt">我的鼻血</view><view class="right-icon comm-center"><image src="/static/other/youjiantou.png"></image></view></view><view class="cell"><view class="left-icon comm-center"><image src="/static/other/7.png"></image></view><view class="txt">我的眼泪</view><view class="right-icon comm-center"><image src="/static/other/youjiantou.png"></image></view></view><view class="cell"><view class="left-icon comm-center"><image src="/static/other/10.png"></image></view><view class="txt">我的便便</view><view class="right-icon comm-center"><image src="/static/other/youjiantou.png"></image></view></view><view class="cell"><view class="left-icon comm-center"><image src="/static/other/1.png"></image></view><view class="txt">我的帅气</view><view class="right-icon comm-center"><image src="/static/other/youjiantou.png"></image></view></view></view></view></template><script>export default {data() {return {url: 'http://www.javanx.cn/20190222/css3-radial-gradient/'}},methods: {}}</script><style lang="scss">page {background-color: #f8f8f8;}.head {height: 400rpx;flex-direction: column;background-color: #d24839;color: #fbf1ef;image {width: 120rpx;height: 120rpx;border: 5rpx solid #FFFFFF;border-radius: 100%;}.name {padding-top: 30rpx;font-size: 35rpx;}.remarks {padding-top: 10rpx;font-size: 24rpx;}}.home-menu {display: flex;justify-content: space-around;align-items: center;margin: 20rpx 0;height: 180rpx;border-radius: 5rpx;background-color: #FFFFFF;.row {width: 30%;font-size: 28rpx;font-weight: bold;flex-direction: column;view {line-height: 50rpx;}}.edge {border-left: 5rpx solid #f1f1f1;border-right: 5rpx solid #f1f1f1;}}.list-menu {background-color: #FFFFFF;.cell {display: flex;justify-content: space-between;align-items: center;height: 100rpx;border-top: 5rpx solid #f8f8f8;.left-icon {width: 15%;image {width: 50rpx;height: 50rpx;}}.txt {width: 75%;font-size: 26rpx;}.right-icon {width: 10%;image {width: 30rpx;height: 30rpx;}}}}</style>3.9 Code 1-9<template><view class="box"><view class="top"><view class="region"><view class="img-box"><image src="/static/other/1.png"></image></view><view class="info"><view class="name">niew</view><view class="time">到期时间: 2099.09.09</view></view><view class="btn-box"><view class="btn">续费</view></view></view></view><view class="title">会员特权</view><view class="menu-box"><view class="menu"><image src="/static/other/3.png"></image><text>课程免费</text></view><view class="menu"><image src="/static/other/2.png"></image><text>双倍积分</text></view><view class="menu"><image src="/static/other/5.png"></image><text>专属兑换</text></view><view class="menu"><image src="/static/other/7.png"></image><text>尊贵标识</text></view></view><view style="height: 20rpx;margin: 50rpx 20rpx 20rpx 20rpx;background-color: #f4f4f4;"></view><view class="task-title"><view class="left">成长任务</view><view class="right">查看更多</view></view><view class="task-title"><view class="task-img-box"><image src="/static/other/wx.png"></image></view><view class="task-info"><view class="task-name">每日签到</view><view class="task-tip">积分+20</view></view><view class="task-btn"><view class="btn">签到</view></view></view><view class="task-title"><view class="task-img-box"><image src="/static/other/zfb.png"></image></view><view class="task-info"><view class="task-name">观看视频三十分钟</view><view class="task-tip">积分+50</view></view><view class="task-btn"><view class="btn">去完成</view></view></view><view class="task-title"><view class="task-img-box"><image src="/static/other/wb.png"></image></view><view class="task-info"><view class="task-name">分享视频课程</view><view class="task-tip">积分+40</view></view><view class="task-btn"><view class="btn">去完成</view></view></view></view></template><script>export default {data() {return {tagEle: [],};},onShow() {},};</script><style lang="scss" scoped>.box {width: 100%;margin: auto;overflow: hidden;}.top {position: relative;padding-top: 100rpx;width: 100%;height: 250rpx;}.top:after {width: 140%;height: 150px;position: absolute;left: -20%;top: 0;z-index: -1;content: '';border-radius: 0 0 50% 50%;background: linear-gradient(to right, #319efd, #1ccee8);}.region {padding: 0 50rpx;width: 650rpx;display: flex;justify-content: center;align-items: center;.img-box {width: 100rpx;height: 100rpx;image {width: 100rpx;height: 100rpx;}}.info {padding-left: 20rpx;width: 400rpx;line-height: 55rpx;flex-direction: column;.name {font-size: 40rpx;letter-spacing: 5rpx;color: #FFFFFF;}.time {font-size: 28rpx;letter-spacing: 2rpx;color: #b3dffe;}}.btn-box {width: 150rpx;.btn {display: flex;justify-content: center;align-items: center;width: 120rpx;height: 50rpx;font-size: 28rpx;font-weight: bold;border-radius: 50rpx;background-color: #FFFFFF;color: #ff9602;box-shadow: 5rpx 5rpx 10rpx #489dcf;}}}.title {width: 100%;letter-spacing: 10rpx;display: flex;justify-content: center;color: #fd9903;font-size: 35rpx;font-weight: 600;}.menu-box {padding: 0 50rpx;display: flex;justify-content: space-around;align-items: center;.menu {padding-top: 50rpx;height: 200rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;image {width: 100rpx;height: 100rpx;}text {padding-top: 30rpx;font-size: 24rpx;color: #808080;}}}.task-title {margin: 0 40rpx;height: 120rpx;display: flex;justify-content: space-between;align-items: center;border-bottom: 2rpx solid #f5f7fe;.left {font-size: 35rpx;letter-spacing: 5rpx;}.right {font-size: 26rpx;color: #a0a0a0;}}.task-img-box {width: 100rpx;height: 150rpx;display: flex;justify-content: center;align-items: center;image {width: 60rpx;height: 60rpx;}}.task-info {width: 500rpx;.task-name {line-height: 50rpx;font-size: 30rpx;font-weight: 500;}.task-tip {font-size: 24rpx;font-weight: bold;color: #ffaa00;}}.task-btn {width: 150rpx;.btn {display: flex;justify-content: center;align-items: center;width: 120rpx;height: 50rpx;color: #FFFFFF;font-size: 26rpx;border-radius: 30rpx;background-color: #007AFF;box-shadow: 5rpx 5rpx 10rpx #489dcf;}}</style>3.10 Code 1-10<template><view class="box"><view class="top"><view class="region"><view class="upper"><view class="img-box"><image src="/static/other/1.png"></image></view><view class="info"><view class="name">niew</view><view class="no">ID: 0926</view></view></view><view class="lower">这个人好懒,什么都没有留下~</view></view><view class="count"><view class="title"><image src="/static/other/wx.png"></image><text>余额</text></view><view class="val">888.00</view></view></view><view class="menu-box"><view class="menu"><image src="/static/other/1.png"></image><text>我的订单</text></view><view class="menu"><image src="/static/other/1.png"></image><text>我的收藏</text></view><view class="menu"><image src="/static/other/1.png"></image><text>联系我们</text></view><view class="menu"><image src="/static/other/1.png"></image><text>消息中心</text></view><view class="menu"><image src="/static/other/1.png"></image><text>历史记录</text></view><view class="menu"><image src="/static/other/1.png"></image><text>版本更新</text></view><view class="menu"><image src="/static/other/1.png"></image><text>积分商城</text></view><view class="menu"><image src="/static/other/1.png"></image><text>个人中心</text></view><view class="menu"><image src="/static/other/1.png"></image><text>历史记录</text></view><view class="menu"><image src="/static/other/1.png"></image><text>版本更新</text></view><view class="menu"><image src="/static/other/1.png"></image><text>积分商城</text></view><view class="menu"><image src="/static/other/1.png"></image><text>个人中心</text></view></view></view></template><script>export default {data() {return {tagEle: [],};},onShow() {},};</script><style lang="scss" scoped>.box {width: 100%;margin: auto;overflow: hidden;}.top {position: relative;padding-top: 100rpx;width: 100%;height: 400rpx;}.top:after {width: 140%;height: 200px;position: absolute;left: -20%;top: 0;z-index: -1;content: '';border-radius: 0 0 60% 60%;background-color: #426db5;}.region {margin-left: 150rpx;width: 450rpx;.upper {display: flex;justify-content: center;align-items: center;.img-box {width: 100rpx;height: 100rpx;image {width: 100rpx;height: 100rpx;}}.info {padding-left: 30rpx;line-height: 55rpx;flex-direction: column;.name {font-size: 40rpx;letter-spacing: 5rpx;color: #FFFFFF;}.no {font-size: 24rpx;letter-spacing: 2rpx;color: #b3dffe;}}}.lower {display: flex;justify-content: center;line-height: 100rpx;font-size: 24rpx;color: #b3dffe;}}.count {display: flex;justify-content: space-between;margin-top: 35rpx;margin-left: 200rpx;width: 350rpx;line-height: 80rpx;border-radius: 50rpx;background-color: #FFFFFF;box-shadow: 0rpx 3rpx 9rpx #bdbdbd;.title {width: 50%;display: flex;justify-content: center;align-items: center;image {width: 30rpx;height: 30rpx;}text {font-size: 30rpx;padding-left: 15rpx;}}.val {display: flex;justify-content: flex-end;padding-right: 50rpx;font-weight: bold;font-size: 30rpx;align-items: center;width: 50%;color: #426db5;}}.menu-box {margin: 0rpx 27rpx;display: flex;flex-wrap: wrap;box-shadow: 0rpx 1rpx 10rpx #ebebeb;.menu {display: flex;justify-content: center;align-items: center;width: 172rpx;height: 220rpx;border-bottom: 1rpx solid #ececec;flex-direction: column;image {width: 60rpx;height: 60rpx;}text {padding-top: 30rpx;font-size: 28rpx;}}}</style>3.11 Code 1-11<template><view><view class="upper-box"><view class="tip-box"><view class="tip">欢迎您,niew!</view><view class="btn">签到赢大奖 ></view></view><view class="setting"><image src="/static/other/wb.png"></image></view></view><view class="lower-box"><view class="menu"><image src="/static/other/6.png"></image><text>我的收藏</text></view><view class="menu"><image src="/static/other/2.png"></image><text>我的订单</text></view><view class="menu"><image src="/static/other/3.png"></image><text>我的消息</text></view><view class="menu"><image src="/static/other/4.png"></image><text>我的钱包</text></view></view></view></template><script>export default {data() {return {};},};</script><style lang="scss">.upper-box {position: relative;width: 100%;height: 400rpx;border-bottom-right-radius: 50rpx;border-bottom-left-radius: 50rpx;background: linear-gradient(to right, #2859fe, #1ba0ff);.tip-box {padding: 50rpx 0 0 50rpx;.tip {font-size: 50rpx;line-height: 100rpx;color: #FFFFFF;}.btn {display: flex;justify-content: center;align-items: center;width: 250rpx;height: 60rpx;border-radius: 50rpx;color: #2859fe;background-color: #FFFFFF;}}.setting{position: absolute;top: 50rpx;right: 50rpx;image{width: 60rpx;height: 60rpx;}}}.lower-box {position: relative;top: -80rpx;padding: 0 20rpx;display: flex;justify-content: space-around;flex-wrap: wrap;.menu {display: flex;justify-content: center;align-items: center;flex-direction: column;margin: 30rpx;width: 250rpx;height: 300rpx;background-color: #FFFFFF;border-radius: 30rpx;box-shadow: 0 5rpx 15rpx #e1e1e1;image {width: 120rpx;height: 120rpx;}text {font-size: 28rpx;padding-top: 50rpx;}}}</style>
本文链接地址:https://www.jiuchutong.com/zhishi/293036.html 转载请保留说明!

上一篇:Error in render: “TypeError: Cannot read properties of undefined (reading ‘length‘)“,深层次数据处理报错????

下一篇:微信小程序web-view与H5 通信方式探索(微信小程序web-view 添加悬浮按钮)

  • qq音乐简洁模式在哪(qq音乐简洁模式没有了)

    qq音乐简洁模式在哪(qq音乐简洁模式没有了)

  • iPhone xsmax是否有nfc功能(iPhonexsmax是否有红外)

    iPhone xsmax是否有nfc功能(iPhonexsmax是否有红外)

  • 华为nova7有无线充电的吗(华为nova7有无线耳机收音功能吗)

    华为nova7有无线充电的吗(华为nova7有无线耳机收音功能吗)

  • 米notelte什么型号(小米notelte参数)

    米notelte什么型号(小米notelte参数)

  • 80072ee2怎么解决(80072ee2怎么解决win7)

    80072ee2怎么解决(80072ee2怎么解决win7)

  • 摄像头物理遮蔽是什么意思(摄像头物理遮蔽了,自己能看到吗)

    摄像头物理遮蔽是什么意思(摄像头物理遮蔽了,自己能看到吗)

  • 11promax屏幕发黄(iphone11pro max感觉屏幕很黄)

    11promax屏幕发黄(iphone11pro max感觉屏幕很黄)

  • 笔记本电脑个别按键失灵怎么办(笔记本电脑个别数字键打不出数字)

    笔记本电脑个别按键失灵怎么办(笔记本电脑个别数字键打不出数字)

  • 抖音的本场点赞是什么(抖音的本场点赞在哪里看)

    抖音的本场点赞是什么(抖音的本场点赞在哪里看)

  • 苹果7plus可以无线充电吗(苹果7plus可以无限冲吗)

    苹果7plus可以无线充电吗(苹果7plus可以无限冲吗)

  • miui11主题是什么(miui11的主题是?)

    miui11主题是什么(miui11的主题是?)

  • 小程序设为群待办有什么用(群小程序在哪里设置)

    小程序设为群待办有什么用(群小程序在哪里设置)

  • 主图加水印影响权重吗(主图水印可以自己设置吗)

    主图加水印影响权重吗(主图水印可以自己设置吗)

  • 淘宝退款的话淘金币会不会退还(淘宝退款后会退到哪里)

    淘宝退款的话淘金币会不会退还(淘宝退款后会退到哪里)

  • 微机是什么意思(微机课是学什么的)

    微机是什么意思(微机课是学什么的)

  • 华为内存不足怎么扩大(华为内存不足怎么清理手机)

    华为内存不足怎么扩大(华为内存不足怎么清理手机)

  • 支付宝怎么解绑实名制(支付宝怎么解绑生活缴费用户)

    支付宝怎么解绑实名制(支付宝怎么解绑生活缴费用户)

  • 微信在看是什么意思(微信在看是什么意思点赞)

    微信在看是什么意思(微信在看是什么意思点赞)

  • 13寸笔记本有a4纸大吗(13寸笔记本有什么不好)

    13寸笔记本有a4纸大吗(13寸笔记本有什么不好)

  • 显卡在主机的什么位置(显卡在主机的哪个位置)

    显卡在主机的什么位置(显卡在主机的哪个位置)

  • cad多段线(cad多段线快捷键命令)

    cad多段线(cad多段线快捷键命令)

  • 手机号空号怎么补回来(手机号空号怎么设置)

    手机号空号怎么补回来(手机号空号怎么设置)

  • 微信支付收款受限七天(微信支付收款受限多久解除)

    微信支付收款受限七天(微信支付收款受限多久解除)

  • 为在线客服系统接入chatGPT(四):chatGPT接口vue网页版,可以联系上下文语境,可以实现自己的chatGPT,附代码(在线客服系统登录)

    为在线客服系统接入chatGPT(四):chatGPT接口vue网页版,可以联系上下文语境,可以实现自己的chatGPT,附代码(在线客服系统登录)

  • phpcms v9 采集功能 不能用怎么办?(cms采集网站)

    phpcms v9 采集功能 不能用怎么办?(cms采集网站)

  • 盈利能力的概念及内容
  • 跨境电商小规模好还是一般纳税好
  • 一般纳税人应纳税额减征额怎么算
  • 计提增值税的会计凭证
  • 人工费用与制造成本区别
  • 申领的发票多久过期
  • 金税盘怎么向分行汇款
  • 企业开办费可不交税吗
  • 金融工具减值的简化处理
  • 企业筹办期间发生的开办费会计分录
  • 构成业务和不构成业务的会计处理
  • 分公司独立核算企业所得税缴纳
  • 现金比率一般多少
  • 美元转到中国账户可不可以取人民币
  • 收到分包工程发票怎么做分录
  • 合同中的税费需要交税吗
  • 季度所得税申报表营业收入怎么填
  • 我公司开给对方13个点发票,后期我公司怎么抵税
  • 本月工资下月发是什么意思
  • 工程预缴税款几个点
  • 营改增试点实施办法的法律层次是
  • 财会【2016】22号文
  • 个人能否去税务登记
  • 前期物业管理公司
  • 送礼没有发票怎么解决
  • 报税遇节假日延长吗?
  • 在会计上跨季度增值税专用发票怎么进行红冲?
  • 初级考试备考计划
  • 收到押金和支付押金的账务处理
  • 弥补以前年度亏损是什么意思
  • microsoft edge怎么改成ie11
  • 如何使用ChapGPT
  • 如何给宽带加速使用
  • php实现修改功能
  • 不动产出租要交什么税
  • php session存储方式
  • 有限责任公司股东对公司债务承担
  • 食堂现金管理办法
  • 年报中投资总额怎么填
  • 增值税的纳税时间是多久
  • 安装exclipse
  • tls版本过低怎么办
  • 前端vue面试题
  • 印花税是1%吗
  • 新企业所得税季初资产总额怎么填
  • 车船税是不是车损
  • 支出和收入怎么算呀
  • python命令行如何退出
  • 交通费 抵扣
  • 经营成本包括五项内容
  • 委托加工物资验收时发生的成本怎么处理
  • mysql主从复制实现原理
  • 纺织品业务
  • 税金及附加多计提了怎么办
  • 微信转账如何处理退回去
  • 土地回收补偿费怎么算
  • 社保年度汇算清缴怎么做
  • 哪些个体户要报残保金
  • 增值税进项税转出额可以税前扣除吗
  • 公司成本包含什么
  • 分页存储过程的实现
  • ubuntu20.04.2安装
  • executing c1.exe
  • Win10 Mobile RS2预览版14905更新内容大全:全新精致铃声
  • opengl环境配置
  • sublime text配置node.js调试(图文教程)
  • python中元组和列表
  • node.js在网页制作中的作用
  • python 中 range
  • python字符串常用的五种方法
  • javascript构成
  • node.js连接mysql数据库的方法有哪些
  • javascript命名空间
  • jquery.js插件
  • android实现侧边栏
  • 给派出所写情况说明房屋情况怎么写啊
  • 浙江应急管理厅焊工证查询
  • 税务稽查检查笔录范文
  • 英国个税税率最高
  • 购旧设备增值税能不能抵扣
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设