|
|
@@ -5,29 +5,31 @@
|
|
|
<script setup lang="ts">
|
|
|
import Card from '@/components/card.vue'
|
|
|
import SectionHeading from '@/components/section-heading.vue'
|
|
|
-import { designer, settled, treaty } from '@/core/libs/pngs'
|
|
|
+import { abc, calculator, treaty } from '@/core/libs/pngs'
|
|
|
import { getMaterialDealers } from '@/core/libs/requests'
|
|
|
+import { materialDealers, close } from '@/core/libs/svgs'
|
|
|
|
|
|
const { data, run } = useRequest(getMaterialDealers)
|
|
|
+const dealerPanelState = ref(false)
|
|
|
const pieces = ref([
|
|
|
{
|
|
|
title: '材料小课堂',
|
|
|
desc: '全方位了解',
|
|
|
- icon: designer,
|
|
|
+ icon: abc,
|
|
|
class: 'col-start-1 row-start-1',
|
|
|
// iconSize: 102,
|
|
|
},
|
|
|
{
|
|
|
title: '积分计算机',
|
|
|
desc: '积分小帮手',
|
|
|
- icon: settled,
|
|
|
+ icon: calculator,
|
|
|
class: 'col-start-2 row-start-1',
|
|
|
// iconSize: 68,
|
|
|
},
|
|
|
{
|
|
|
title: '推荐材料商',
|
|
|
desc: '我们将优先洽谈大家推荐的材料商',
|
|
|
- icon: treaty,
|
|
|
+ icon: materialDealers,
|
|
|
class: 'col-start-1 row-start-2 col-end-3',
|
|
|
// iconSize: 44,
|
|
|
isMore: true,
|
|
|
@@ -85,7 +87,11 @@ onMounted(() => {
|
|
|
<SectionHeading title="自营品牌" custom-class="mx-3.5"></SectionHeading>
|
|
|
<div class="my-6 flex px-1.75">
|
|
|
<template v-for="(it, i) in data" :key="i">
|
|
|
- <Card custom-class="mx-1.75" :style="{ width: 'calc(50vw - 96rpx)' }">
|
|
|
+ <Card
|
|
|
+ custom-class="mx-1.75"
|
|
|
+ :style="{ width: 'calc(50vw - 96rpx)' }"
|
|
|
+ @click="dealerPanelState = true"
|
|
|
+ >
|
|
|
<div class="flex flex-col items-center">
|
|
|
<wd-img
|
|
|
width="78"
|
|
|
@@ -112,6 +118,53 @@ onMounted(() => {
|
|
|
</template>
|
|
|
</div>
|
|
|
</view>
|
|
|
+
|
|
|
+ <!-- <wd-action-sheet v-model="dealerPanelState">
|
|
|
+ <div class="relative absolute">
|
|
|
+ <div class="absolute top--4">x</div>
|
|
|
+ </div>
|
|
|
+ <view style="padding: 15px 15px 150px 15px">内容</view>
|
|
|
+ </wd-action-sheet> -->
|
|
|
+ <wd-overlay :show="dealerPanelState" @click="dealerPanelState = false">
|
|
|
+ <view class="wrapper bg-amber/50 flex flex-col justify-end h-full">
|
|
|
+ <div class="w-full flex justify-end mb-4">
|
|
|
+ <div class="mr-3.5">
|
|
|
+ <wd-button type="text" custom-class="w-8! h-8! p-0!" size="small">
|
|
|
+ <wd-img :src="close" width="28" height="28" custom-class="vertical-bottom"></wd-img>
|
|
|
+ </wd-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bg-neutral-100 rounded-tl-2xl rounded-tr-2xl p-3.5" @click.stop="">
|
|
|
+ <div class="flex flex-col">
|
|
|
+ <template v-for="(it, i) in [{}]" :key="i">
|
|
|
+ <div class="bg-white rounded-2.5 p-3.5 flex items-center">
|
|
|
+ <div class="text-black/40 flex-1 border-r-2 border-r-[#f6f6f6] border-r-solid">
|
|
|
+ <div
|
|
|
+ class="text-black/90 text-lg font-normal font-['PingFang SC'] leading-normal"
|
|
|
+ >
|
|
|
+ 曲江新区店
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <wd-icon name="location" size="15"></wd-icon>
|
|
|
+ <span
|
|
|
+ class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal"
|
|
|
+ >
|
|
|
+ 西安市曲江路精彩世家 387 号
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <wd-button type="text" size="small" custom-class=" bg-[#f2f2f2]! p-0! ml-4">
|
|
|
+ <wd-img width="28" height="28"></wd-img>
|
|
|
+ </wd-button>
|
|
|
+ <wd-button type="text" size="small" custom-class=" bg-[#f2f2f2]! p-0! ml-4">
|
|
|
+ <wd-img width="28" height="28"></wd-img>
|
|
|
+ </wd-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+ </wd-overlay>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
