czg_team
/
new_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
new_app/pages/me/index.vue

295 lines
6.9 KiB
Vue
Raw Blame History

<template>
<view class="container">
<view class="u-status-bar"></view>
<view class="top-bg"></view>
<view class="content">
<view class="user-info">
<view class="logo-wrap">
<view class="logo"></view>
<view class="quick-menu">
<image class="icon" src="/static/me/logo_btn1.png" mode="aspectFit"></image>
<image class="icon" src="/static/me/logo_btn2.png" mode="aspectFit"></image>
<image class="icon" src="/static/me/logo_btn3.png" mode="aspectFit"></image>
</view>
</view>
<view class="top">
<image class="avatar" src="/static/default_avatar.png" mode="aspectFill"></image>
<view class="info-wrap">
<view class="name">159****3331</view>
</view>
</view>
<view class="btm">
<view class="item">
<view class="title">我的喜欢</view>
<view class="num">0</view>
</view>
<view class="item">
<view class="title">我的追剧</view>
<view class="num">0</view>
</view>
<view class="item">
<view class="title">我的红包</view>
<view class="num">0</view>
</view>
</view>
</view>
<view class="card-wrap">
<view class="gold-wrap">
<view class="left">
<image class="icon" src="/static/me/gold_icon.png" mode="aspectFit"></image>
<view class="num">123133.00</view>
</view>
<view class="btn">金币明细</view>
</view>
<view class="title-wrap">
<view class="t">观看历史</view>
<up-icon name="arrow-right"></up-icon>
</view>
<view class="history-list">
<view class="item">
<image class="cover" src="https://img0.baidu.com/it/u=966333451,3199467079&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=714" mode="aspectFill"></image>
<view class="name">我在八零年代当后妈</view>
<view class="t">看到8集</view>
</view>
<view class="item">
<image class="cover" src="https://img2.baidu.com/it/u=3352094756,2708106394&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422" mode="aspectFill"></image>
<view class="name">姜小姐的反击</view>
<view class="t">看到12集</view>
</view>
<view class="item">
<image class="cover" src="https://q0.itc.cn/images01/20240806/a14af4ece3354215be6294f3d2c264a4.jpeg" mode="aspectFill"></image>
<view class="name">霸道载誉归来</view>
<view class="t">看到3集</view>
</view>
</view>
</view>
<view class="card-wrap">
<view class="menu-list">
<view class="item">
<image class="icon" src="/static/me/menu_icon1.png" mode="aspectFit"></image>
<view class="name">任务中心</view>
</view>
<view class="item">
<image class="icon" src="/static/me/menu_icon2.png" mode="aspectFit"></image>
<view class="name">设置中心</view>
</view>
<view class="item">
<image class="icon" src="/static/me/menu_icon3.png" mode="aspectFit"></image>
<view class="name">意见反馈</view>
</view>
<view class="item">
<image class="icon" src="/static/me/menu_icon4.png" mode="aspectFit"></image>
<view class="name">帮助中心</view>
</view>
<view class="item">
<image class="icon" src="/static/me/menu_icon5.png" mode="aspectFit"></image>
<view class="name">检查更新</view>
</view>
<view class="item">
<image class="icon" src="/static/me/menu_icon6.png" mode="aspectFit"></image>
<view class="name">用户协议</view>
</view>
<view class="item">
<image class="icon" src="/static/me/menu_icon7.png" mode="aspectFit"></image>
<view class="name">关于我们</view>
</view>
<view class="item">
<image class="icon" src="/static/me/menu_icon8.png" mode="aspectFit"></image>
<view class="name">隐私政策</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup></script>
<style scoped lang="scss">
$bgColor: #f5f7ff;
page {
background: $bgColor;
}
.container {
font-size: 28upx;
color: #333;
}
.top-bg {
width: 100%;
height: 50%;
position: fixed;
top: 0;
left: 0;
background: linear-gradient(90deg, #ffe5ea 0, #e4f5fb 49%, #fff0ee);
&::after {
content: '';
height: 50%;
width: 100%;
background: linear-gradient(to bottom, transparent, $bgColor);
position: absolute;
bottom: 0;
left: 0;
}
}
.content {
padding: 28upx;
position: relative;
.user-info {
.logo-wrap {
display: flex;
justify-content: space-between;
.quick-menu {
display: flex;
gap: 20upx;
.icon {
$size: 60upx;
width: $size;
height: $size;
}
}
}
.top {
display: flex;
align-items: center;
.avatar {
$size: 94upx;
width: $size;
height: $size;
border-radius: 50%;
margin-right: 12upx;
}
.info-wrap {
flex: 1;
display: flex;
flex-direction: column;
font-size: 28upx;
}
}
.btm {
display: flex;
padding: 40upx 0;
.item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.title {
font-size: 28upx;
}
.num {
font-weight: bold;
}
}
}
}
}
.card-wrap {
background: #fff;
border-radius: 16upx;
overflow: hidden;
margin-bottom: 28upx;
.gold-wrap {
background: #f2b5b5;
display: flex;
justify-content: space-between;
padding: 20upx 28upx;
position: relative;
// &::after {
// $size: 40upx;
// content: '';
// width: $size;
// height: $size;
// border-radius: 8upx;
// transform: rotate(45deg);
// position: absolute;
// left: 50%;
// margin-left: $size * 0.5 * -1;
// bottom: $size * 0.3 * -1;
// background: inherit;
// }
.left {
display: flex;
align-items: center;
.icon {
$size: 52upx;
width: $size;
height: $size;
margin-right: 20upx;
}
.num {
color: #fff;
font-size: 32upx;
}
}
.btn {
color: #977641;
background: linear-gradient(90deg, #fee7bc 0%, #fdcc89 100%);
width: 144upx;
height: 56upx;
border-radius: 56upx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24upx;
}
}
.title-wrap {
padding: 28upx;
display: flex;
align-items: center;
justify-content: space-between;
.t {
font-size: 28upx;
}
}
.history-list {
padding: 0 28upx 28upx;
display: flex;
gap: 28upx;
.item {
flex: 1;
.cover {
width: 100%;
height: 280upx;
border-radius: 20upx;
}
.name {
font-size: 28upx;
// width: 160upx;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
}
.t {
color: #999;
font-size: 24upx;
}
}
}
.menu-list {
display: flex;
flex-wrap: wrap;
padding: 28upx 0 0;
.item {
flex: 0 0 25%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 28upx;
.icon {
$size: 56upx;
width: $size;
height: $size;
}
.name {
font-size: 24upx;
margin-top: 8upx;
color: #333;
}
}
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink