feat: bbs新增商城页面初版

This commit is contained in:
橙子
2024-11-02 19:50:01 +08:00
parent ca1b8a728d
commit dd29c9a2fa
4 changed files with 118 additions and 1 deletions

View File

@@ -35,6 +35,12 @@
</el-icon>
<span>排行榜</span>
</el-menu-item>
<el-menu-item index="7" :route="{ path: '/money' }">
<el-icon>
<ShoppingCart />
</el-icon>
<span>商城即将上线</span>
</el-menu-item>
</el-menu>
</template>

View File

@@ -117,7 +117,15 @@ const router = createRouter({
path:"/money",
component: () => import("../views/money/Index.vue"),
meta: {
title: "钱钱",
title: "钱钱排行榜",
},
},
{
name:"shop",
path:"/shop",
component: () => import("../views/shop/Index.vue"),
meta: {
title: "商城",
},
},
],

View File

@@ -0,0 +1,74 @@
<template>
<div class="content-body">
<div class="title">
意社区-商城
</div>
<div class="header">
<span >你的钱钱
<el-tooltip effect="dark" content="社区通用货币,(来源:通过社区活动获取)" placement="top-start">
<el-icon><InfoFilled/></el-icon>
</el-tooltip>
50</span>
<span>你的价值
<el-tooltip effect="dark" content="数字藏品账号价值,(来源:通过社区小程序数字藏品获取)" placement="top-start">
<el-icon><InfoFilled/></el-icon>
</el-tooltip>
70</span>
<span> 你的积分
<el-tooltip effect="dark" content="邀请码积分,(来源:通过社区小程序个人中心邀请获取)" placement="top-start">
<el-icon><InfoFilled/></el-icon>
</el-tooltip>
40</span>
</div>
<div class="shop">
<el-row :gutter="30">
<el-col :span="6" v-for="i in 10">
<ShopCard/>
</el-col>
</el-row>
</div>
</div>
</template>
<style scoped>
.header span {
margin-left: 50px;
}
.el-col {
margin: 10px 0;
}
.content-body {
margin-bottom: 40px;
margin-top: 20px;
padding: 20px;
background-color: #ffffff;
width: 60%;
.title {
display: flex;
justify-content: center;
font-size: 40px;
margin-bottom: 20px;
}
.header {
display: flex;
justify-content: center;
margin-bottom: 40px;
}
.shop {
display: flex;
}
}
</style>
<script setup lang="ts">
import ShopCard from "./components/ShopCard.vue";
</script>

View File

@@ -0,0 +1,29 @@
<template>
<el-card shadow="hover">
<template #header>商品-物品A</template>
<img
src="https://ccnetcore.com/prod-api/wwwroot/logo.png"
style="width: 100%"
alt=""/>
<ul>
<li>所需钱钱扣除666</li>
<li>所需价值拥有777</li>
<li>所需积分拥有888</li>
<li>限制数量1</li>
</ul>
<el-divider />
<div class="bottom">
<el-button type="success">申请购买</el-button>
</div>
</el-card>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.bottom
{
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
</style>