master
parent
5faa1a9812
commit
88c5d558de
@ -0,0 +1,36 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { CategoryItem } from '@/types/home'
|
||||||
|
|
||||||
|
// 定义 props 接收数据
|
||||||
|
defineProps<{
|
||||||
|
list: CategoryItem[]
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="category">
|
||||||
|
<view class="module-title"> 预约上门回收 </view>
|
||||||
|
|
||||||
|
<view class="cont">
|
||||||
|
<navigator
|
||||||
|
class="category-item"
|
||||||
|
hover-class="none"
|
||||||
|
url="/pages/index/index"
|
||||||
|
v-for="item in list"
|
||||||
|
:key="item.id"
|
||||||
|
>
|
||||||
|
<view class="left">
|
||||||
|
<view class="title">{{ item.name }}</view>
|
||||||
|
<view class="desc">{{ item.desc }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="right">
|
||||||
|
<image class="icon" :src="item.icon"></image>
|
||||||
|
</view>
|
||||||
|
</navigator>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '../styles/category.scss';
|
||||||
|
</style>
|
@ -0,0 +1,17 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const handlePhone = () => {
|
||||||
|
uni.makePhoneCall({
|
||||||
|
phoneNumber: '400-123-000', //仅为示例
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<view class="phone-contact">
|
||||||
|
<view class="module-title">电话预约回收</view>
|
||||||
|
<view class="module-action" @tap="handlePhone">400-123-000</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '../styles/phoneContact.scss';
|
||||||
|
</style>
|
@ -0,0 +1,49 @@
|
|||||||
|
/* 前台类目 */
|
||||||
|
|
||||||
|
.category {
|
||||||
|
padding: 32rpx 20rpx;
|
||||||
|
margin: 16rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
.module-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #0D0D26;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
border-bottom: 2rpx solid #F2F2F2;
|
||||||
|
}
|
||||||
|
.cont {
|
||||||
|
// margin: 20rpx 0 0;
|
||||||
|
padding: 10rpx 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
min-height: 328rpx;
|
||||||
|
.category-item {
|
||||||
|
width: 46%;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
margin: 8rpx;
|
||||||
|
padding: 16rpx 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center; // flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #FCF4FB;
|
||||||
|
.left {
|
||||||
|
.title {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.desc {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #7BAFBD;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
.icon {
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,82 @@
|
|||||||
|
.neighborhood-site {
|
||||||
|
padding: 32rpx 20rpx;
|
||||||
|
margin: 16rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
.module-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #0D0D26;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
border-bottom: 2rpx solid #F2F2F2;
|
||||||
|
}
|
||||||
|
.module-cont {
|
||||||
|
padding: 20rpx 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
.left {
|
||||||
|
width: 140rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
}
|
||||||
|
.md {
|
||||||
|
flex: 1;
|
||||||
|
margin: 0 10rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #0D0D26;
|
||||||
|
.name {
|
||||||
|
font-size: 30rpx;
|
||||||
|
.zuijin {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #FF7D00;
|
||||||
|
background: #FFF7E8;
|
||||||
|
padding: 4rpx 4rpx;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
color: #95969D;
|
||||||
|
margin: 8rpx 0;
|
||||||
|
}
|
||||||
|
.loction {
|
||||||
|
color: #0D0D26;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
.num {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #95969D
|
||||||
|
}
|
||||||
|
.img {
|
||||||
|
width: 72rpx;
|
||||||
|
height: 72rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-tag {
|
||||||
|
background: #E8FFFB;
|
||||||
|
color: #0FC6C2;
|
||||||
|
margin: 10rpx 0;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 6rpx 0rpx;
|
||||||
|
.tag-before {
|
||||||
|
background: #0FC6C2;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 4rpx 8rpx;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.foot-desc {
|
||||||
|
.item {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #95969D;
|
||||||
|
margin: 10rpx 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,26 @@
|
|||||||
|
/* 热门推荐 */
|
||||||
|
|
||||||
|
.phone-contact {
|
||||||
|
padding: 32rpx 20rpx;
|
||||||
|
margin: 16rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
.module-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #0D0D26;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
border-bottom: 2rpx solid #F2F2F2;
|
||||||
|
}
|
||||||
|
.module-action {
|
||||||
|
width: 486rpx;
|
||||||
|
margin: 40rpx auto 0;
|
||||||
|
border-radius: 50px;
|
||||||
|
background: #5386E4;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
font-size: 32rpx;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 100rpx;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in new issue