156 lines
2.9 KiB
Vue
156 lines
2.9 KiB
Vue
<template>
|
|
<view class="container">
|
|
<nav-bar title="购物平台" bgColor="#F0F4F9"></nav-bar>
|
|
<view class="menu-container">
|
|
<view class="card" v-for="(item, index) in menuList" :key="index"
|
|
:style="{ background: `linear-gradient(to bottom, ${item.bgColor[0]} 0%, ${item.bgColor[1]} 80%)` }">
|
|
<text class="card-title">{{ item.name }}</text>
|
|
<view class="icon-wrapper">
|
|
<view class="icon-shadow" :style="{ background: item.shadowColor }"></view>
|
|
<image class="icon-img" :src="`/static/image/shopping/${item.icon}.png`" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="btn" :style="{ background: item.btnBg }" @click="goTo(item.url)">立即进入</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const menuList = ref([
|
|
{
|
|
name: "京东",
|
|
icon: "jingdong",
|
|
bgColor: ["#FFE0DF", "#FFFFFF"],
|
|
btnBg: "#FF4848",
|
|
shadowColor: "#FF4848",
|
|
url: "/pages/shopping/jingdong/list-index"
|
|
}, {
|
|
name: "淘宝",
|
|
icon: "taobao",
|
|
bgColor: ["#FFF0DA", "#FFFFFF"],
|
|
btnBg: "#FF953C",
|
|
shadowColor: "#FF953C",
|
|
url: ""
|
|
}, {
|
|
name: "快手",
|
|
icon: "kuaishou",
|
|
bgColor: ["#FFF0DA", "#FFFFFF"],
|
|
btnBg: "#FF953C",
|
|
shadowColor: "#FF953C",
|
|
url: ""
|
|
}, {
|
|
name: "抖音",
|
|
icon: "douyin",
|
|
bgColor: ["#FAE5FF", "#FFFFFF"],
|
|
btnBg: "#393939",
|
|
shadowColor: "#D15CFF",
|
|
url: ""
|
|
}, {
|
|
name: "抖音",
|
|
icon: "dewu",
|
|
bgColor: ["#FAE5FF", "#FFFFFF"],
|
|
btnBg: "#393939",
|
|
shadowColor: "#D15CFF",
|
|
url: ""
|
|
}, {
|
|
name: "拼多多",
|
|
icon: "pinduoduo",
|
|
bgColor: ["#FFE0DF", "#FFFFFF"],
|
|
btnBg: "#FF4848",
|
|
shadowColor: "#FF4848",
|
|
url: ""
|
|
}
|
|
]);
|
|
|
|
const goTo = (url) => {
|
|
if (url) {
|
|
uni.navigateTo({
|
|
url: url
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: "开发中",
|
|
icon: "none"
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #F0F4F9;
|
|
}
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.container {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.menu-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.card {
|
|
width: calc(50% - 14rpx);
|
|
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
|
margin-bottom: 24rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 48rpx;
|
|
padding-bottom: 40rpx;
|
|
box-sizing: border-box;
|
|
border: 1px solid #ffffff;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 28rpx;
|
|
color: #1A1A1A;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.icon-wrapper {
|
|
margin-top: 40rpx;
|
|
margin-bottom: 62rpx;
|
|
position: relative;
|
|
width: 116rpx;
|
|
height: 116rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.icon-img {
|
|
width: 116rpx;
|
|
height: 116rpx;
|
|
z-index: 2;
|
|
}
|
|
|
|
.icon-shadow {
|
|
position: absolute;
|
|
bottom: -10rpx;
|
|
width: 100rpx;
|
|
height: 8rpx;
|
|
border-radius: 50%;
|
|
filter: blur(5px);
|
|
z-index: 1;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0 20rpx;
|
|
height: 56rpx;
|
|
line-height: 56rpx;
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|