143 lines
3.0 KiB
Vue
143 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<Layout>
|
||
|
|
<!-- 轮播图 -->
|
||
|
|
<CustomSwiper> </CustomSwiper>
|
||
|
|
<!-- 入口 -->
|
||
|
|
<uni-card
|
||
|
|
class="entry-card"
|
||
|
|
:shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
|
||
|
|
:padding="'20px 10px'"
|
||
|
|
:border="false"
|
||
|
|
>
|
||
|
|
<uni-grid :column="3" :showBorder="false" :square="false">
|
||
|
|
<uni-grid-item
|
||
|
|
class="item"
|
||
|
|
v-for="(item, index) in entryItemList"
|
||
|
|
:key="index"
|
||
|
|
>
|
||
|
|
<view @click="handleClick(item)">
|
||
|
|
<view>
|
||
|
|
<image :src="`${url}/static/img/${item.path}`"></image>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text class="text">{{ item.name }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</uni-grid-item>
|
||
|
|
</uni-grid>
|
||
|
|
</uni-card>
|
||
|
|
<!-- 介绍 -->
|
||
|
|
<uni-card
|
||
|
|
class="avatar-card"
|
||
|
|
:shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
|
||
|
|
:padding="'10px 10px'"
|
||
|
|
:border="false"
|
||
|
|
>
|
||
|
|
<view class="title">爱梵达</view>
|
||
|
|
<image
|
||
|
|
:src="`/static/avatar/1.jpg`"
|
||
|
|
:mode="'widthFix'"
|
||
|
|
style="width: 100%"
|
||
|
|
/>
|
||
|
|
<image
|
||
|
|
:src="`/static/avatar/2.jpg`"
|
||
|
|
:mode="'widthFix'"
|
||
|
|
style="width: 100%"
|
||
|
|
/>
|
||
|
|
<image
|
||
|
|
:src="`/static/avatar/3.jpg`"
|
||
|
|
:mode="'widthFix'"
|
||
|
|
style="width: 100%"
|
||
|
|
/>
|
||
|
|
<image
|
||
|
|
:src="`/static/avatar/4.jpg`"
|
||
|
|
:mode="'widthFix'"
|
||
|
|
style="width: 100%"
|
||
|
|
/>
|
||
|
|
<image
|
||
|
|
:src="`/static/avatar/5.jpg`"
|
||
|
|
:mode="'widthFix'"
|
||
|
|
style="width: 100%"
|
||
|
|
/>
|
||
|
|
</uni-card>
|
||
|
|
</Layout>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import CustomSwiper from "@/components/CustomSwiper/index.vue";
|
||
|
|
import Layout from "@/components/Layout/index.vue";
|
||
|
|
import { url } from "@/utils/data";
|
||
|
|
const bannerList = [
|
||
|
|
{
|
||
|
|
imgUrl: "v-a1.png",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const entryItemList = ref([
|
||
|
|
{
|
||
|
|
path: "1.png",
|
||
|
|
name: "报废车辆回收",
|
||
|
|
url: "/pagesVehicle/index",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
path: "2.png",
|
||
|
|
name: "电池回收",
|
||
|
|
url: "/pagesBattery/index",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
path: "3.png",
|
||
|
|
name: "废钢回收",
|
||
|
|
url: "/pagesScrapSteel/index",
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
const handleClick = (item: any) => {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: item.url, // 要跳转到的页面路径
|
||
|
|
});
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.entry-card {
|
||
|
|
.item {
|
||
|
|
text-align: center;
|
||
|
|
image {
|
||
|
|
width: 74rpx;
|
||
|
|
height: 76rpx;
|
||
|
|
}
|
||
|
|
.text {
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
line-height: 42rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar-card {
|
||
|
|
.title {
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 34rpx;
|
||
|
|
color: #282728;
|
||
|
|
line-height: 80rpx;
|
||
|
|
padding-left: 30rpx;
|
||
|
|
&::before {
|
||
|
|
content: " ";
|
||
|
|
width: 6rpx;
|
||
|
|
background: #ff782b;
|
||
|
|
border-radius: 3rpx;
|
||
|
|
position: absolute;
|
||
|
|
height: 32rpx;
|
||
|
|
top: 46rpx;
|
||
|
|
left: 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
::v-deep .uni-card--shadow {
|
||
|
|
padding: 0px !important;
|
||
|
|
}
|
||
|
|
image + image {
|
||
|
|
margin-top: -12rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|