feat: bbs新增商城页面初版
This commit is contained in:
@@ -35,6 +35,12 @@
|
|||||||
</el-icon>
|
</el-icon>
|
||||||
<span>排行榜</span>
|
<span>排行榜</span>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
|
<el-menu-item index="7" :route="{ path: '/money' }">
|
||||||
|
<el-icon>
|
||||||
|
<ShoppingCart />
|
||||||
|
</el-icon>
|
||||||
|
<span>商城(即将上线)</span>
|
||||||
|
</el-menu-item>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -117,7 +117,15 @@ const router = createRouter({
|
|||||||
path:"/money",
|
path:"/money",
|
||||||
component: () => import("../views/money/Index.vue"),
|
component: () => import("../views/money/Index.vue"),
|
||||||
meta: {
|
meta: {
|
||||||
title: "钱钱",
|
title: "钱钱排行榜",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name:"shop",
|
||||||
|
path:"/shop",
|
||||||
|
component: () => import("../views/shop/Index.vue"),
|
||||||
|
meta: {
|
||||||
|
title: "商城",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
74
Yi.Bbs.Vue3/src/views/shop/Index.vue
Normal file
74
Yi.Bbs.Vue3/src/views/shop/Index.vue
Normal 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>
|
||||||
29
Yi.Bbs.Vue3/src/views/shop/components/ShopCard.vue
Normal file
29
Yi.Bbs.Vue3/src/views/shop/components/ShopCard.vue
Normal 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>
|
||||||
Reference in New Issue
Block a user