master
王文杰
8 months ago
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