project_yongwangyun
/
ChangSha_xiangJiang_YongWang_Customer_V
8
0
Fork 0
Code Issues Pull Requests Projects Releases 11 Wiki Activity
Browse Source

refactor: ♻️ ui修改

pull/4/head
姜鑫 8 months ago
parent
fec68fa563
commit
55f84a1484
3 changed files with 69 additions and 28 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/components/List/List.vue
  2. 62
      src/components/ListItem/ListItem.vue
  3. 3
      src/types/customer.d.ts

10
src/components/List/List.vue
View File

@ -10,9 +10,9 @@
center-slides center-slides
:slides-per-view="2.998" :slides-per-view="2.998"
watch-overflow watch-overflow
:autoplay="{ delay: 30000, disableOnInteraction: false }"
observe-parents observe-parents
:space-between="16" :space-between="16"
:autoplay="{ delay: 30000, disableOnInteraction: false }"
observe-slide-children observe-slide-children
:modules="modules" :modules="modules"
class="h-[1776px] py-5" class="h-[1776px] py-5"
@ -25,10 +25,10 @@
</div> </div>
</div> </div>
<div <div
class="random leftt-0 fixed top-0 z-200 flex h-[252px] w-[184px] flex-col items-center justify-start gap-4 rounded-xl border border-solid border-black/5 bg-white bg-gradient-to-b from-[#ededed] to-[#fcfcfc] px-3 pt-3 shadow-[0_4px_10px_0_rgba(0,0,0,0.06)]"
class="random leftt-0 fixed top-0 z-200 flex w-[232px] flex-col items-center justify-start gap-3 rounded-xl border border-solid border-black/5 bg-gradient-to-b from-[#ca339e] to-[#e964c2] p-3 shadow-[0_4px_10px_0_rgba(0,0,0,0.06)]"
> >
<img :src="qr" class="size-40" alt="" />
<div class="text-center text-18 leading-relaxed text-[#333]">欢迎微信扫码留言<br />期待您的宝贵意见</div>
<img :src="qr" class="size-[208px]" alt="" />
<div class="text-center text-20 leading-7 text-white">欢迎微信扫码留言<br />期待您的宝贵意见</div>
</div> </div>
</template> </template>
@ -55,7 +55,7 @@ function swiperInit(_swiper: any) {
} }
let timer: number let timer: number
const noSwiping = ref(false) const noSwiping = ref(false)
const TIMEOUT = 3000
const TIMEOUT = 10000
function disable() { function disable() {
noSwiping.value = true noSwiping.value = true
swiper.value?.autoplay?.stop() swiper.value?.autoplay?.stop()

62
src/components/ListItem/ListItem.vue
View File

@ -1,24 +1,63 @@
<template> <template>
<div
class="custom relative grid grid-cols-2 flex-wrap space-x-6 rounded-xl bg-white pl-6 pr-[6px] pt-6 shadow-[0_4px_10px_0_rgba(0,0,0,0.06)]"
>
<div class="flex-1 justify-between">
<div class="mb-2 flex items-center gap-x-2.5 text-justify !text-16 font-normal leading-4.5 text-black/40">
<div class="relative min-h-[568px] rounded-xl bg-white p-6 shadow-[0_4px_10px_0_rgba(0,0,0,0.06)]">
<div class="mb-3 flex items-center gap-x-2.5 text-justify !text-16 font-normal leading-4.5 text-black/40">
<img src="../../assets/images/q.svg" class="size-7" alt="" /> <img src="../../assets/images/q.svg" class="size-7" alt="" />
{{ formatTime(customer.createTime) }} {{ formatTime(customer.createTime) }}
</div> </div>
<ScrollView class="scroll relative h-[506px]" scrollbar :list="customer.content">
<div class="whitespace-normal pr-3.5 text-justify font-normal leading-normal text-black/50" v-html="customer.content"></div>
<ScrollView class="scroll relative mb-5 h-15" scrollbar :list="customer.content">
<div class="whitespace-normal pr-3.5 text-justify text-20 font-normal leading-normal text-black/50" v-html="customer.content"></div>
</ScrollView> </ScrollView>
</div>
<div class="flex-1">
<div class="mb-2 flex items-center gap-x-2.5 text-justify !text-16 font-normal leading-4.5 text-black/40"> <div class="mb-2 flex items-center gap-x-2.5 text-justify !text-16 font-normal leading-4.5 text-black/40">
<img src="../../assets/images/a.svg" class="size-7" alt="" /> <img src="../../assets/images/a.svg" class="size-7" alt="" />
{{ formatTime(customer.replyTime) }} {{ formatTime(customer.replyTime) }}
</div> </div>
<ScrollView class="scroll relative h-[506px]" scrollbar observe-image :list="customer.disposeDes">
<div class="whitespace-normal pb-49 pr-3.5 text-justify font-normal leading-normal text-[#333333]">
<div class="flex gap-x-12">
<div class="flex-1">
<div class="mb-4 inline-flex items-center gap-x-1 rounded-xl border border-solid border-[#FCCDC5] bg-[#FFEBE8] px-2.5 py-0.5">
<span class="text-justify text-14 leading-tight text-black/70">改善前</span>
<div class="size-4">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" fill="none">
<path
d="M14.3828 5.20234C14.0297 4.36797 13.5234 3.61641 12.8797 2.97266C12.2359 2.32734 11.4875 1.82109 10.65 1.46953C9.78437 1.10391 8.86719 0.917969 7.91875 0.917969C6.97188 0.917969 6.05312 1.10391 5.1875 1.46953C4.35313 1.82109 3.60312 2.32734 2.95781 2.97266C2.31406 3.61641 1.80781 4.36641 1.45469 5.20234C1.09219 6.06797 0.90625 6.98672 0.90625 7.93359C0.90625 8.88047 1.09219 9.79922 1.45781 10.6648C1.81094 11.4992 2.31562 12.2508 2.96094 12.8945C3.60469 13.5383 4.35469 14.0445 5.19063 14.3977C6.05625 14.7633 6.97344 14.9492 7.92188 14.9492C8.86875 14.9492 9.7875 14.7633 10.6531 14.3977C11.4875 14.0445 12.2391 13.5383 12.8828 12.8945C13.5266 12.2508 14.0328 11.5008 14.3859 10.6648C14.7516 9.79922 14.9375 8.88203 14.9375 7.93359C14.9391 6.98516 14.75 6.06797 14.3828 5.20234ZM7.92188 13.9352C4.6125 13.9352 1.92031 11.243 1.92031 7.93359C1.92031 4.62422 4.6125 1.93203 7.92188 1.93203C11.2312 1.93203 13.9234 4.62422 13.9234 7.93359C13.9234 11.243 11.2312 13.9352 7.92188 13.9352Z"
fill="black"
fill-opacity="0.6"
/>
<path
d="M5.47187 6.84609C5.95625 6.84609 6.35 6.45391 6.35 5.96797C6.35 5.48359 5.95781 5.08984 5.47187 5.08984C4.9875 5.08984 4.59375 5.48203 4.59375 5.96797C4.59531 6.45391 4.9875 6.84609 5.47187 6.84609ZM10.3672 6.84609C10.8516 6.84609 11.2453 6.45391 11.2453 5.96797C11.2453 5.48359 10.8531 5.08984 10.3672 5.08984C9.88281 5.08984 9.48906 5.48203 9.48906 5.96797C9.48906 6.45391 9.88281 6.84609 10.3672 6.84609ZM5.14844 10.7352C5.31563 10.7352 5.47031 10.6523 5.56562 10.5148C6.08281 9.77266 6.94375 9.28516 7.91719 9.28516C8.89062 9.28516 9.75156 9.77266 10.2703 10.5148C10.3656 10.6508 10.5203 10.7336 10.6875 10.7336H10.6906C11.0984 10.7336 11.3406 10.2742 11.1063 9.93984C10.975 9.75234 10.8266 9.57578 10.6625 9.41016C9.92969 8.67734 8.95625 8.27422 7.92031 8.27422C6.88438 8.27422 5.90938 8.67734 5.17812 9.41016C5.0125 9.57578 4.86406 9.75234 4.73438 9.93984C4.5 10.2758 4.74063 10.7352 5.14844 10.7352Z"
fill="black"
fill-opacity="0.6"
/>
</svg>
</div>
</div>
<ScrollView class="scroll h-90 relative" scrollbar observe-image :list="customer.disposeDes">
<div class="custom whitespace-normal pr-3.5 text-justify font-normal leading-normal text-[#333333]">
<div v-html="customer.disposeDes"></div> <div v-html="customer.disposeDes"></div>
</div>
</ScrollView>
</div>
<div class="flex-1">
<div class="mb-4 inline-flex items-center gap-x-1 rounded-xl border border-solid border-[#AFF0B5] bg-[#E8FFE9] px-2.5 py-0.5">
<span class="text-justify text-14 leading-tight text-black/70">改善后</span>
<div class="size-4">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" fill="none">
<path
d="M14.3516 5.19063C13.9984 4.35625 13.4922 3.60469 12.8484 2.96094C12.2047 2.31719 11.4547 1.81094 10.6188 1.45781C9.75313 1.09219 8.83438 0.90625 7.8875 0.90625C6.94063 0.90625 6.02187 1.09219 5.15625 1.45781C4.32188 1.81094 3.57031 2.31562 2.92656 2.96094C2.28281 3.60469 1.77656 4.35469 1.42344 5.19063C1.06094 6.05625 0.875 6.975 0.875 7.92188C0.875 8.86875 1.06094 9.7875 1.42656 10.6531C1.77969 11.4875 2.28437 12.2391 2.92969 12.8828C3.57344 13.5266 4.32344 14.0328 5.15938 14.3859C6.025 14.7516 6.94219 14.9375 7.89062 14.9375C8.8375 14.9375 9.75625 14.7516 10.6219 14.3859C11.4563 14.0328 12.2078 13.5266 12.8516 12.8828C13.4953 12.2391 14.0016 11.4891 14.3547 10.6531C14.7203 9.7875 14.9062 8.87031 14.9062 7.92188C14.9062 6.97344 14.7172 6.05625 14.3516 5.19063ZM7.88906 13.9234C4.57969 13.9234 1.8875 11.2312 1.8875 7.92188C1.8875 4.6125 4.57969 1.92031 7.88906 1.92031C11.1984 1.92031 13.8906 4.6125 13.8906 7.92188C13.8906 11.2312 11.1984 13.9234 7.88906 13.9234Z"
fill="black"
fill-opacity="0.6"
/>
<path
d="M11.2372 8.24844C10.9872 8.24844 10.7731 8.43125 10.7372 8.67969C10.531 10.0578 9.34033 11.1172 7.90439 11.1172C6.46845 11.1172 5.27626 10.0578 5.06845 8.67969C5.03095 8.43281 4.81845 8.25 4.56845 8.25C4.25751 8.25 4.02158 8.52656 4.06845 8.83438C4.19033 9.64844 4.56845 10.4 5.16064 10.9922C5.89345 11.725 6.86689 12.1281 7.90283 12.1281C8.93876 12.1281 9.91376 11.725 10.645 10.9922C11.2388 10.4 11.6153 9.64844 11.7372 8.83438C11.7841 8.525 11.5481 8.24844 11.2372 8.24844ZM5.45595 6.85C5.94033 6.85 6.33408 6.45781 6.33408 5.97188C6.33408 5.4875 5.94189 5.09375 5.45595 5.09375C4.97158 5.09375 4.57783 5.48594 4.57783 5.97188C4.57783 6.45781 4.97001 6.85 5.45595 6.85ZM10.3497 6.85C10.8341 6.85 11.2278 6.45781 11.2278 5.97188C11.2278 5.4875 10.8356 5.09375 10.3497 5.09375C9.86533 5.09375 9.47158 5.48594 9.47158 5.97188C9.47158 6.45781 9.86533 6.85 10.3497 6.85Z"
fill="black"
fill-opacity="0.6"
/>
</svg>
</div>
</div>
<ScrollView class="scroll h-90 relative" scrollbar observe-image :list="customer.disposeRep">
<div class="custom whitespace-normal pb-49 pr-3.5 text-justify font-normal leading-normal text-[#333333]">
<div v-html="customer.disposeRep"></div>
<div class="flex items-center pt-4 !text-16"> <div class="flex items-center pt-4 !text-16">
总经理:{{ customer.managerSignature }} 总经理:{{ customer.managerSignature }}
<img class="!size-6" :src="customer.sealUrl" alt="" /> <img class="!size-6" :src="customer.sealUrl" alt="" />
@ -27,6 +66,7 @@
</ScrollView> </ScrollView>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

3
src/types/customer.d.ts
View File

@ -23,7 +23,8 @@ declare interface ProposalList {
* 顾客电话 * 顾客电话
*/ */
customerPhone: string customerPhone: string
disposeDes: string
disposeDes: string //处理前
disposeRep: string //处理后
pictureListAfter: PictureListAfter[] pictureListAfter: PictureListAfter[]
pictureListBefore: PictureListBefore[] pictureListBefore: PictureListBefore[]
proposalCode: string proposalCode: string

Write Preview
Loading…
Cancel
Save