uniapp小程序单页模板:会员中心页面,支持白天/夜间模式,不太懂小程序布局的可以参考下。
提示:部分组件是图片暂替的,你只需要把图片对应的view层代码替换你的组件即可。
①本套模板由站内会员独立原创开发,采用Uni-App开发,简单修改就可以直接用了。
②注:提供uniapp样式模板,没有实际功能!!
③开发背景:有很多小伙伴都厌倦写CSS布局,并不是不懂CSS,只是没有专业团队那样的设计稿,设计布局只能凭空想象,导致即使使用开源框架,做出来的页面还是很难看;包含布局、配色、组件元素的间距等等。
②注:提供uniapp样式模板,没有实际功能!!
③开发背景:有很多小伙伴都厌倦写CSS布局,并不是不懂CSS,只是没有专业团队那样的设计稿,设计布局只能凭空想象,导致即使使用开源框架,做出来的页面还是很难看;包含布局、配色、组件元素的间距等等。
食用教程
解压后将pages对应的页面代码复制到你的项目中,将根目录下App.vue中style属性也复制到你的项目中
代码
template
<view class="flex-col page">
<view class="flex-col flex-auto group">
<view class="flex-row justify-between items-center section">
<text class="text">9:41</text>
<view class="flex-row space-x-6">
<image class="image" src="https://图片资源地址/demo-img/2023/15/7179b9dd72895979b9abc58515f50dd7.png" />
<image class="image_2" src="https://图片资源地址/demo-img/2023/15/35c9db779f9aa08731ed5873c714ad60.png" />
<image class="image_3" src="https://图片资源地址/demo-img/2023/15/c93dad496b31826273cf6a6c1e594276.png" />
</view>
</view>
<view class="flex-col section_2 space-y-25">
<view class="flex-row justify-center items-center relative group_2">
<image class="image_6" src="https://图片资源地址/demo-img/2023/15/07a4c66c1715e7b61a0c741c48a06702.png" />
<view class="flex-col justify-start items-start group_3 pos">
<image
class="image_4"
src="https://图片资源地址/63eecd7c5a7e3f0310779c98/63f6bc53b98f5d001156f4a5/cf2c824a9b61e93cbc0b79242079be10.png"
/>
<image
class="image_5 pos_2"
src="https://图片资源地址/demo-img/2023/15/8459a08484690fda8d184d3491f06471.png"
/>
</view>
</view>
<view class="flex-col group_4">
<view class="flex-col justify-start relative">
<view class="flex-col group_5">
<image
class="shrink-0 self-start image_7"
src="https://图片资源地址/demo-img/2023/15/868f2d9e34fd5fa47c068f8efa3a4937.png"
/>
<view class="flex-col justify-start relative group_6">
<view class="flex-col justify-start items-end image-wrapper">
<image
class="image_14"
src="https://图片资源地址/demo-img/2023/15/efaca6da54e7e1291e7d9b764aa953e1.png"
/>
</view>
<image
class="image_13 pos_9"
src="https://图片资源地址/demo-img/2023/15/7049af687780437c514da4dd2bd3bfec.png"
/>
</view>
</view>
<image
class="image_8 pos_3"
src="https://图片资源地址/demo-img/2023/15/76971e6afe565594769e85f0e505e5ed.png"
/>
<image
class="image_9 pos_4"
src="https://图片资源地址/demo-img/2023/15/bfcbafcb87b5aff9e0d596bc2262eaa1.png"
/>
<image
class="image_10 pos_5"
src="https://图片资源地址/demo-img/2023/15/c3f09a34bd5f728b6d72ba32c0225490.png"
/>
<image
class="image_10 pos_6"
src="https://图片资源地址/demo-img/2023/15/4b70b951f7723e10c9f82446ab07b30e.png"
/>
<image
class="image_11 pos_7"
src="https://图片资源地址/demo-img/2023/15/64ebee8097f55ca0d82bbe302ec1fe46.png"
/>
<image
class="image_12 pos_8"
src="https://图片资源地址/demo-img/2023/15/2438d4afc78f5c410b6b727474febcb4.png"
/>
</view>
<view class="flex-row justify-between relative group_7">
<view class="section_4"></view>
<view class="section_4"></view>
<view class="flex-row justify-between items-center section_3 pos_10">
<view class="flex-row items-center space-x-8">
<image
class="image_15"
src="https://图片资源地址/demo-img/2023/15/d431e7cde3959e84a0124e1ef192c23a.png"
/>
<image
class="image_16"
src="https://图片资源地址/demo-img/2023/15/510830687ac76c334dc374397cd5c63a.png"
/>
</view>
<view class="flex-row group_8 space-x-4">
<image
class="image_17"
src="https://图片资源地址/demo-img/2023/15/086ec96186b3ee15a077a3b79bc6184d.png"
/>
<image
class="image_18"
src="https://图片资源地址/demo-img/2023/15/e10230aeef10d7a18a60f1e43edb637f.png"
/>
</view>
</view>
</view>
</view>
</view>
<view class="flex-col section_5 space-y-22">
<view class="flex-row justify-between items-center">
<view class="flex-col items-start space-y-8">
<image
class="image_19"
src="https://图片资源地址/demo-img/2023/15/a2cbee00530b76d5ed9c0af8f89fd18a.png"
/>
<image
class="image_21"
src="https://图片资源地址/demo-img/2023/15/290ce1372016b2197bc94cc8f8d8db8e.png"
/>
</view>
<image class="image_20" src="https://图片资源地址/demo-img/2023/15/4fbbe980dd88a464d3b0e699afc2ae24.png" />
</view>
<view class="flex-row justify-between items-center group_9">
<view class="flex-col justify-start items-center image-wrapper_2">
<image
class="image_22"
src="https://图片资源地址/demo-img/2023/15/3abfbe5c43f3fdce8accb120c9a9ee04.png"
/>
</view>
<view class="section_6"></view>
<view class="flex-col justify-start items-center image-wrapper_2 view">
<image
class="image_23"
src="https://图片资源地址/demo-img/2023/15/2eff4e9be0f215b5551b4c4808ee5b43.png"
/>
</view>
</view>
</view>
<view class="flex-col group_10">
<view class="flex-row relative equal-division space-x-30">
<view class="flex-col items-center equal-division-item space-y-6">
<image
class="image_24"
src="https://图片资源地址/demo-img/2023/15/71c28b08308c8eac8da67b2f5feb2e93.png"
/>
<image
class="image_26"
src="https://图片资源地址/demo-img/2023/15/cc683113e834a34b8029df3e01f7518e.png"
/>
</view>
<view class="flex-col items-center equal-division-item space-y-6">
<image
class="image_24"
src="https://图片资源地址/demo-img/2023/15/194a8669fbbd478f55b037e3594d41b6.png"
/>
<image
class="image_27"
src="https://图片资源地址/demo-img/2023/15/3cec2bcac3594869c9356824b86d6ac2.png"
/>
</view>
<view class="flex-col items-center equal-division-item space-y-6">
<image
class="image_25"
src="https://图片资源地址/demo-img/2023/15/8a2aadfdd9c24aa2d41c941fd96cd6c5.png"
/>
<image
class="image_27"
src="https://图片资源地址/demo-img/2023/15/043e970bda8c78a907870676d39eb5b2.png"
/>
</view>
<view class="flex-col items-center equal-division-item space-y-6">
<image
class="image_24"
src="https://图片资源地址/demo-img/2023/15/12698ab05f0204af2579cbd8d1e0f740.png"
/>
<image
class="image_27"
src="https://图片资源地址/demo-img/2023/15/41ff14fd16b5493328bd768cbf53ae6a.png"
/>
</view>
</view>
<view class="section_7"></view>
<view class="flex-col">
<view class="flex-col">
<view class="flex-row justify-between items-center section_8">
<image
class="image_23"
src="https://图片资源地址/demo-img/2023/15/8fb2424cc88705babc9c225944d1a160.png"
/>
<image
class="image_18"
src="https://图片资源地址/demo-img/2023/15/a60a8fd23d1c4c9af95d5cbbe9b57672.png"
/>
</view>
<view class="flex-row justify-between items-center section_8">
<image
class="image_23"
src="https://图片资源地址/demo-img/2023/15/820be651b28f9052903a0412b9373202.png"
/>
<image
class="image_18"
src="https://图片资源地址/demo-img/2023/15/a60a8fd23d1c4c9af95d5cbbe9b57672.png"
/>
</view>
<view class="flex-col">
<view class="flex-row justify-between items-center section_8">
<image
class="image_23"
src="https://图片资源地址/demo-img/2023/15/f1c4f9542f708cac5a63d0b8dbbba022.png"
/>
<image
class="image_18"
src="https://图片资源地址/demo-img/2023/15/a60a8fd23d1c4c9af95d5cbbe9b57672.png"
/>
</view>
<image
class="image_28"
src="https://图片资源地址/63eecd7c5a7e3f0310779c98/63f6bc53b98f5d001156f4a5/6a98c1859f6a9ea458ae21c75919531e.png"
/>
</view>
</view>
<view class="flex-row justify-between items-center section_8">
<image
class="image_29"
src="https://图片资源地址/demo-img/2023/15/145aa3b077220a083f2d0e1a284d5c7f.png"
/>
<image
class="image_18"
src="https://图片资源地址/demo-img/2023/15/a60a8fd23d1c4c9af95d5cbbe9b57672.png"
/>
</view>
</view>
</view>
</view>
<view class="flex-col tab-bar">
<view class="shrink-0 section_9"></view>
<image
class="shrink-0 image_30"
src="https://图片资源地址/63eecd7c5a7e3f0310779c98/63f6bc53b98f5d001156f4a5/34f9ef34ae35efa9c754bca2946ef4ac.png"
/>
</view>
</view>
style[scss]
.page {
background-color: #0d1021;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
.group {
overflow-y: auto;
.section {
padding: 1.13rem 0.94rem 0.88rem 2.25rem;
background-color: #0d1428;
.text {
color: #ffffff;
font-size: 0.88rem;
font-family: Helvetica;
line-height: 0.63rem;
}
.space-x-6 {
& > view:not(:first-child),
& > text:not(:first-child),
& > image:not(:first-child) {
margin-left: 0.38rem;
}
.image {
width: 1.06rem;
height: 0.69rem;
}
.image_2 {
width: 0.94rem;
height: 0.69rem;
}
.image_3 {
width: 1.5rem;
height: 0.72rem;
}
}
}
.section_2 {
padding: 0.63rem 0 0.81rem;
background-image: linear-gradient(180deg, #0e1529 3.2%, #1b2131cc 118.6%);
.group_2 {
padding: 0.25rem 1.13rem;
.image_6 {
width: 4.13rem;
height: 1.06rem;
}
.group_3 {
width: 4.13rem;
.image_4 {
box-shadow: 0px 0.063rem 0.25rem #1271bd inset;
width: 3.69rem;
height: 1.38rem;
}
.image_5 {
width: 1.5rem;
height: 1.5rem;
}
.pos_2 {
position: absolute;
right: 0;
bottom: 0;
}
}
.pos {
position: absolute;
right: 1.13rem;
top: 50%;
transform: translateY(-50%);
}
}
.group_4 {
height: 8.31rem;
.group_5 {
height: 7.34rem;
.image_7 {
margin-left: 0.94rem;
border-radius: 50%;
width: 4.13rem;
height: 4.13rem;
}
.group_6 {
margin-top: -0.63rem;
padding-top: 0.63rem;
.image-wrapper {
padding: 0.13rem 0 2.25rem;
background-image: url('https://demo.2xiaobai.com/demo-img/2023/15/093cc32c1f576387ae3da195269d5d5a.png');
background-size: 100% 100%;
background-repeat: no-repeat;
.image_14 {
margin-right: 2.06rem;
width: 0.38rem;
height: 0.81rem;
}
}
.image_13 {
width: 0.81rem;
height: 1.63rem;
}
.pos_9 {
position: absolute;
right: 2.56rem;
top: 0;
}
}
}
.image_8 {
width: 8.63rem;
height: 1.13rem;
}
.pos_3 {
position: absolute;
left: 5.88rem;
top: 0.72rem;
}
.image_9 {
width: 0.5rem;
height: 1rem;
}
.pos_4 {
position: absolute;
right: 1.5rem;
top: 1.59rem;
}
.image_10 {
width: 3.38rem;
height: 0.69rem;
}
.pos_5 {
position: absolute;
left: 5.84rem;
top: 2.69rem;
}
.pos_6 {
position: absolute;
right: 9.84rem;
top: 2.69rem;
}
.image_11 {
width: 0.44rem;
height: 0.44rem;
}
.pos_7 {
position: absolute;
right: 2.31rem;
top: 2.75rem;
}
.image_12 {
width: 0.5rem;
height: 0.31rem;
}
.pos_8 {
position: absolute;
right: 3.47rem;
top: 3.22rem;
}
.group_7 {
margin-top: -1.63rem;
padding: 2.19rem 0.63rem 0;
.section_4 {
background-color: #10131c;
width: 0.94rem;
height: 0.31rem;
}
.section_3 {
padding: 0.63rem 0.88rem;
background-image: url('https://demo.2xiaobai.com/demo-img/2023/15/49c3c48d03df9107fe7b4dcf6c26117a.png');
background-size: 100% 100%;
background-repeat: no-repeat;
.space-x-8 {
& > view:not(:first-child),
& > text:not(:first-child),
& > image:not(:first-child) {
margin-left: 0.5rem;
}
.image_15 {
width: 1.16rem;
height: 1.28rem;
}
.image_16 {
width: 6.75rem;
height: 0.75rem;
}
}
.group_8 {
margin-right: 0.25rem;
.image_17 {
width: 2.81rem;
height: 0.75rem;
}
}
.space-x-4 {
& > view:not(:first-child),
& > text:not(:first-child),
& > image:not(:first-child) {
margin-left: 0.25rem;
}
}
}
.pos_10 {
position: absolute;
left: 0.94rem;
right: 0.94rem;
top: 0;
}
}
}
}
.space-y-25 {
& > view:not(:first-child),
& > text:not(:first-child),
& > image:not(:first-child) {
margin-top: 1.56rem;
}
}
.section_5 {
margin: 0 0.63rem;
padding: 1.38rem 0.69rem 1.38rem 1.13rem;
background-color: #1b2131;
.space-y-8 {
& > view:not(:first-child),
& > text:not(:first-child),
& > image:not(:first-child) {
margin-top: 0.5rem;
}
.image_19 {
width: 5.94rem;
height: 0.94rem;
}
.image_21 {
width: 4rem;
height: 0.75rem;
}
}
.image_20 {
width: 5.06rem;
height: 1.75rem;
}
.group_9 {
padding: 0 1.88rem;
.image-wrapper_2 {
width: 5.13rem;
.image_22 {
width: 5.13rem;
height: 0.81rem;
}
}
.section_6 {
background-color: #9196a1;
width: 0.063rem;
height: 0.63rem;
}
.view {
margin-right: 0.5rem;
}
}
}
.space-y-22 {
& > view:not(:first-child),
& > text:not(:first-child),
& > image:not(:first-child) {
margin-top: 1.38rem;
}
}
.group_10 {
padding: 0.75rem 0.63rem 0;
.equal-division {
padding: 0.88rem 0 1rem;
background-color: #1b2131;
.equal-division-item {
padding: 0.25rem 0;
width: 5.56rem;
.image_24 {
border-radius: 50%;
width: 1.88rem;
height: 1.88rem;
}
.image_26 {
width: 1.38rem;
height: 0.69rem;
}
.image_27 {
width: 1.44rem;
height: 0.69rem;
}
.image_25 {
width: 1.88rem;
height: 1.88rem;
}
}
.space-y-6 {
& > view:not(:first-child),
& > text:not(:first-child),
& > image:not(:first-child) {
margin-top: 0.38rem;
}
}
}
.space-x-30 {
& > view:not(:first-child),
& > text:not(:first-child),
& > image:not(:first-child) {
margin-left: 1.88rem;
}
}
.section_7 {
margin-top: 0.75rem;
background-color: #1d2033;
border-radius: 0.5rem 0.5rem 0px 0px;
height: 0.63rem;
}
.section_8 {
padding: 1.13rem 1.25rem;
background-color: #1b2131;
.image_29 {
width: 1.69rem;
height: 0.81rem;
}
}
.image_28 {
width: 22.19rem;
height: 3rem;
}
}
.image_23 {
width: 3.44rem;
height: 0.81rem;
}
.image_18 {
width: 0.69rem;
height: 0.69rem;
}
}
.tab-bar {
height: 3.38rem;
.section_9 {
margin: 0 0.63rem;
background-color: #1b2131;
border-radius: 0px 0px 0.5rem 0.5rem;
height: 0.63rem;
}
.image_30 {
margin-top: -0.31rem;
width: 23.44rem;
height: 3.06rem;
}
}
}
全局样式
添加到项目App.vue中
/************************************************************
** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
** 否则页面将无法正常显示 **
************************************************************/
html {
font-size: 16px;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
view,
image,
text {
box-sizing: border-box;
flex-shrink: 0;
}
#app {
width: 100vw;
height: 100vh;
}
.flex-row {
display: flex;
flex-direction: row;
}
.flex-col {
display: flex;
flex-direction: column;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.justify-evenly {
justify-content: space-evenly;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.items-stretch {
align-items: stretch;
}
.self-start {
align-self: flex-start;
}
.self-end {
align-self: flex-end;
}
.self-center {
align-self: center;
}
.self-baseline {
align-self: baseline;
}
.self-stretch {
align-self: stretch;
}
.flex-1 {
flex: 1 1 0%;
}
.flex-auto {
flex: 1 1 auto;
}
.grow {
flex-grow: 1;
}
.grow-0 {
flex-grow: 0;
}
.shrink {
flex-shrink: 1;
}
.shrink-0 {
flex-shrink: 0;
}
.relative {
position: relative;
}

截图
![]() | ![]() |
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容