mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-11-11 11:43:43 +08:00
feat: adjust layout for user profile page
This commit is contained in:
RockYang
@@ -5,40 +5,46 @@
|
||||
</div>
|
||||
<div class="inner" :style="{height: listBoxHeight + 'px'}">
|
||||
|
||||
<div class="info">
|
||||
<el-alert type="info" show-icon :closable="false" effect="dark">
|
||||
<strong>说明:</strong> 成为本站会员后每月有500次对话额度，50次 AI 绘画额度，限制下月1号解除，若在期间超过次数后可单独购买点卡。
|
||||
当月充值的点卡有效期可以延期到下个月底。
|
||||
</el-alert>
|
||||
<div class="user-profile">
|
||||
<user-profile/>
|
||||
</div>
|
||||
|
||||
<ItemList :items="list" v-if="list.length > 0" :gap="30" :width="250">
|
||||
<template #default="scope">
|
||||
<div class="product-item" :style="{width: scope.width+'px'}" @click="orderPay(scope.item)">
|
||||
<div class="image-container">
|
||||
<el-image :src="vipImg" fit="cover"/>
|
||||
</div>
|
||||
<div class="product-title">
|
||||
<span class="name">{{ scope.item.name }}</span>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="info-line">
|
||||
<span class="label">商品原价：</span>
|
||||
<span class="price">￥{{ scope.item.price }}</span>
|
||||
<div class="product-box">
|
||||
<div class="info">
|
||||
<el-alert type="info" show-icon :closable="false" effect="dark">
|
||||
<strong>说明:</strong> 成为本站会员后每月有500次对话额度，50次 AI 绘画额度，限制下月1号解除，若在期间超过次数后可单独购买点卡。
|
||||
当月充值的点卡有效期可以延期到下个月底。
|
||||
</el-alert>
|
||||
</div>
|
||||
|
||||
<ItemList :items="list" v-if="list.length > 0" :gap="30" :width="200">
|
||||
<template #default="scope">
|
||||
<div class="product-item" :style="{width: scope.width+'px'}" @click="orderPay(scope.item)">
|
||||
<div class="image-container">
|
||||
<el-image :src="vipImg" fit="cover"/>
|
||||
</div>
|
||||
<div class="info-line">
|
||||
<span class="label">促销立减：</span>
|
||||
<span class="price">￥{{ scope.item.discount }}</span>
|
||||
<div class="product-title">
|
||||
<span class="name">{{ scope.item.name }}</span>
|
||||
</div>
|
||||
<div class="info-line">
|
||||
<span class="label">有效期：</span>
|
||||
<span class="expire" v-if="scope.item.days > 0">{{ scope.item.days }}天</span>
|
||||
<span class="expire" v-else>当月有效</span>
|
||||
<div class="product-info">
|
||||
<div class="info-line">
|
||||
<span class="label">商品原价：</span>
|
||||
<span class="price">￥{{ scope.item.price }}</span>
|
||||
</div>
|
||||
<div class="info-line">
|
||||
<span class="label">促销立减：</span>
|
||||
<span class="price">￥{{ scope.item.discount }}</span>
|
||||
</div>
|
||||
<div class="info-line">
|
||||
<span class="label">有效期：</span>
|
||||
<span class="expire" v-if="scope.item.days > 0">{{ scope.item.days }}天</span>
|
||||
<span class="expire" v-else>当月有效</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ItemList>
|
||||
</template>
|
||||
</ItemList>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<login-dialog :show="showLoginDialog" @hide="showLoginDialog = false"/>
|
||||
@@ -81,6 +87,7 @@ import LoginDialog from "@/components/LoginDialog.vue";
|
||||
import {checkSession} from "@/action/session";
|
||||
import {arrayContains, removeArrayItem, substr} from "@/utils/libs";
|
||||
import router from "@/router";
|
||||
import UserProfile from "@/components/UserProfile.vue";
|
||||
|
||||
const listBoxHeight = window.innerHeight - 97
|
||||
const list = ref([])
|
||||
@@ -187,88 +194,105 @@ const queryOrder = (orderNo) => {
|
||||
}
|
||||
|
||||
.inner {
|
||||
display flex
|
||||
color #ffffff
|
||||
padding 15px;
|
||||
overflow-y visible
|
||||
overflow-x hidden
|
||||
|
||||
.info {
|
||||
.el-alert__description {
|
||||
font-size 14px !important
|
||||
margin 0
|
||||
}
|
||||
.user-profile {
|
||||
padding 10px 20px
|
||||
background-color #393F4A
|
||||
color #ffffff
|
||||
border-radius 10px
|
||||
|
||||
.el-form-item__label {
|
||||
color #ffffff
|
||||
justify-content start
|
||||
}
|
||||
}
|
||||
|
||||
.list-box {
|
||||
.product-item {
|
||||
border 1px solid #666666
|
||||
border-radius 6px
|
||||
overflow hidden
|
||||
cursor pointer
|
||||
transition: all 0.3s ease; /* 添加过渡效果 */
|
||||
.product-box {
|
||||
padding 0 10px
|
||||
|
||||
.image-container {
|
||||
display flex
|
||||
justify-content center
|
||||
.info {
|
||||
.el-alert__description {
|
||||
font-size 14px !important
|
||||
margin 0
|
||||
}
|
||||
padding 10px 20px
|
||||
}
|
||||
|
||||
.el-image {
|
||||
padding 6px
|
||||
.list-box {
|
||||
.product-item {
|
||||
border 1px solid #666666
|
||||
border-radius 6px
|
||||
overflow hidden
|
||||
cursor pointer
|
||||
transition: all 0.3s ease; /* 添加过渡效果 */
|
||||
|
||||
.el-image__inner {
|
||||
border-radius 10px
|
||||
.image-container {
|
||||
display flex
|
||||
justify-content center
|
||||
|
||||
.el-image {
|
||||
padding 6px
|
||||
|
||||
.el-image__inner {
|
||||
border-radius 10px
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-title {
|
||||
display flex
|
||||
padding 10px
|
||||
|
||||
.name {
|
||||
width 100%
|
||||
text-align center
|
||||
font-size 16px
|
||||
font-weight bold
|
||||
color #47fff1
|
||||
}
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding 10px 20px
|
||||
font-size 14px
|
||||
color #999999
|
||||
|
||||
.info-line {
|
||||
.product-title {
|
||||
display flex
|
||||
width 100%
|
||||
padding 5px 0
|
||||
padding 10px
|
||||
|
||||
.label {
|
||||
.name {
|
||||
width 100%
|
||||
text-align center
|
||||
font-size 16px
|
||||
font-weight bold
|
||||
color #47fff1
|
||||
}
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding 10px 20px
|
||||
font-size 14px
|
||||
color #999999
|
||||
|
||||
.info-line {
|
||||
display flex
|
||||
width 100%
|
||||
padding 5px 0
|
||||
|
||||
.label {
|
||||
display flex
|
||||
width 100%
|
||||
}
|
||||
|
||||
.price, .expire {
|
||||
display flex
|
||||
width 90px
|
||||
justify-content right
|
||||
}
|
||||
|
||||
.price {
|
||||
color #f56c6c
|
||||
}
|
||||
|
||||
.expire {
|
||||
color #409eff
|
||||
}
|
||||
}
|
||||
|
||||
.price, .expire {
|
||||
display flex
|
||||
width 80px
|
||||
justify-content right
|
||||
}
|
||||
|
||||
.price {
|
||||
color #f56c6c
|
||||
}
|
||||
|
||||
.expire {
|
||||
color #409eff
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
|
||||
transform: translateY(-10px); /* 向上移动10像素 */
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
|
||||
transform: translateY(-10px); /* 向上移动10像素 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user