From cfeeba575b1a9934bec9e57141a21f17ad96a6ac Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期三, 15 四月 2026 20:12:16 +0800
Subject: [PATCH] 页面
---
small-program/pages/index/index.vue | 2545 ++++++++++------------------------------------------------
1 files changed, 469 insertions(+), 2,076 deletions(-)
diff --git a/small-program/pages/index/index.vue b/small-program/pages/index/index.vue
index 15c8086..fca9930 100644
--- a/small-program/pages/index/index.vue
+++ b/small-program/pages/index/index.vue
@@ -1,2131 +1,524 @@
<template>
- <view class="index">
- <!-- 鎺ュ崟鏂� -->
- <view class="index-j" v-if="userInfo && userInfo.useIdentity === 1">
- <view class="kefubtn" @click="contactPhone()">
- <image style="width: 36rpx;height: 36rpx" src="/static/icon/ic_kefu.png" mode="widthFix"></image>
- <text>瀹㈡湇</text>
- </view>
- <view class="index-j-head">
- <view :style="{ width: '100%', height: statusbarHeight + 'px' }"></view>
- <view class="index-c-title" :style="{ height: navHeight + 'px' }">
- <text>鎺ュ崟澶у巺</text>
+ <view class="index-page">
+ <view class="top-gradient-bg" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }"></view>
+ <view class="top-hero">
+ <view :style="{ height: statusbarHeight + 'px' }"></view>
+ <view class="hero-bar" :style="{ height: navHeight + 'px' }">
+ <view class="location-chip" @tap="handleLocation">
+ <image src="/static/icon/home1_ic_location@2x.png" mode="aspectFit"></image>
+ <text>{{ currentAddress }}</text>
+ <u-icon name="arrow-right" size="14" color="#ffffff"></u-icon>
</view>
- </view>
- <view class="search" :style="{ top: statusbarHeight + navHeight + 'px' }">
- <view class="index-j-cate">
- <view class="index-j-cate-item" v-for="(item, index) in searchType" :key="index" @click="clickCate(item.id)">
- <text :style="{ color: typeVal === item.id ? '#222222' : '', fontSize: typeVal === item.id ? '36rpx' : '', fontWeight: typeVal === item.id ? '600' : '' }">{{item.name}}</text>
- <view class="index-j-cate-item-x" v-if="typeVal === item.id"></view>
+ <view class="hero-actions">
+ <view class="hero-action action-pill">
+ <u-icon name="more-dot-fill" size="34" color="#2c2c2c"></u-icon>
+ </view>
+ <view class="hero-action action-ring">
+ <u-icon name="scan" size="28" color="#2c2c2c"></u-icon>
</view>
</view>
- <view class="index-j-search">
- <view :class="sortType === item.id ? 'index-j-search-item active' : 'index-j-search-item'" v-for="(item, index) in sortList" :key="index" @click="clickSort(item.id)">{{item.name}}</view>
- </view>
</view>
- <view class="index-j-list">
- <view class="index-list-item" v-if="orderList && orderList.length" v-for="(item, index) in orderList" :key="index">
- <view @click="goOrderDetail(item.id)">
- <view class="index-list-item-head" >
- <view class="index-list-item-head-l">
- <view class="xoam"></view>
- <text v-if="item.type === 0 && item.workType === 0">鐢ㄥ伐鍗� - 閲囨憳宸�</text>
- <text v-else-if="item.type === 0 && item.workType === 1">鐢ㄥ伐鍗� - 鍒嗘嫞宸�</text>
- <text v-else-if="item.type === 0 && item.workType === 2">鐢ㄥ伐鍗� - 鍖呰宸�</text>
- <text v-else-if="item.type === 1">杩愯揣鍗�-{{item.categoryName}}</text>
- <text v-else-if="item.type === 2">璁㈤鍗�</text>
- </view>
- <view class="index-list-item-head-r">{{item.distance}}km</view>
- </view>
- <view class="index-list-item-info" v-if="item.type === 0 && item.workType === 0">
- {{item.categoryName}}锝渰{item.priceNum1}}鏂�
- </view>
- <view class="index-list-item-info" v-if="item.type === 0 && item.workType === 1">
- {{item.categoryName}}锝渰{item.priceNum2}}浜�
- </view>
- <view class="index-list-item-info" v-if="item.type === 0 && item.workType === 2&& item.carType === 0">
- {{item.categoryName}}锝渰{item.priceNum1}}澶� 锝渰{item.priceNum2}}浜�
- </view>
- <view class="index-list-item-info" v-if="item.type === 0 && item.workType === 2&& item.carType === 1">
- {{item.categoryName}}锝渰{item.priceNum1}}灏忔椂 锝渰{item.priceNum2}}浜�
- </view>
- <view class="index-list-item-info" v-if="item.type === 0 && item.workType === 2&& item.carType === 2">
- {{item.categoryName}}锝渰{item.priceNum1}}鏂�
- </view>
- <view class="index-list-item-info" v-if="item.type === 1">
- {{item.carUnit}} | {{item.transportTypeName}} | {{item.transportNum}}{{item.transportUnit}}锝滅敤杞{item.priceNum1}}{{item.carType === 0?"澶�":"娆�"}}
- </view>
- <view class="index-list-item-info" v-if="item.type === 2">
- {{item.wayInfoCopy}}
- </view>
-
- <view class="address" v-if="item.type === 1">
- <view class="address-xian"></view>
- <view class="address-row" v-if="item.wayInfo" v-for="(address, i) in item.wayInfo" :key="i">
- <image src="/static/icon/ic_qidian@2x.png" mode="widthFix" v-if="i === 0"></image>
- <image src="/static/icon/ic_jingguo@2x.png" mode="widthFix" v-else-if="i !== 0 && i !== item.wayInfo.length - 1"></image>
- <image src="/static/icon/ic_zhongdian@2x.png" mode="widthFix" v-else-if="i === item.wayInfo.length - 1"></image>
- <text>{{address.location}}</text>
- </view>
- </view>
- <template v-if="[0, 2].includes(item.type)">
- <view class="index-list-item-dz">
- <image src="/static/icon/order_ic_location@2x.png" mode="widthFix"></image>
- <text>{{item.location}}</text>
- </view>
- <view class="index-list-item-dz">
- <image src="/static/icon/order_ic_time@2x.png" mode="widthFix"></image>
- <text>{{item.startDate}} 鑷� {{item.endDate}}锛坽{item.totalDays}}澶╋級</text>
- </view>
- </template>
- <view class="index-list-item-price">
- <text>棰勪及锛�</text>
- <text>楼{{item.estimatedAccount / 100}}</text>
- </view>
- </view>
- <view class="eidt">
- <!-- <sunui-mverify @change="getaccept($event, item.id, index)"></sunui-mverify> -->
- <view class="eidt-btn" @click="show1 = true, orderId = item.id">鎶㈠崟</view>
- </view>
+
+ <view class="search-box" @tap="goStoragePage">
+ <image src="/static/icon/home_ic_search@2x.png" mode="aspectFit"></image>
+ <text class="search-text">鎼滅储瀵勫瓨鐐瑰悕绉版垨鍦板潃</text>
+ </view>
+
+ <view class="banner-card hero-banner">
+ <view class="banner-tag">2027鏄ヨ繍淇濋殰璁″垝</view>
+ <view class="banner-copy">
+ <text>杞绘澗鍑鸿</text>
+ <text>琛屾潕鍏堣</text>
</view>
- <view v-if="orderList && orderList.length&& !next" class="more">宸插姞杞藉叏閮�</view>
- <view v-if="(!orderList || !orderList.length)&& !next" class="more">鏆傛棤璁㈠崟鍝�</view>
+ <image class="banner-image" mode="aspectFill"></image>
</view>
</view>
-
- <!-- 鍙戝崟鏂� -->
- <view class="index-c" v-if="!isLogin || !userInfo || userInfo.useIdentity === 0">
- <view :style="{ width: '100%', height: statusbarHeight + 'px' }"></view>
- <view class="index-c-title" :style="{ height: navHeight + 'px' }" @click="selectAddress(-1)">
- <text class="index-c-title-logo">杩戝揩</text>
- <image class="dingwei" src="/static/icon/home_ic_location@2x.png" mode="widthFix"></image>
- <text>{{location.address || address || '鑾峰彇鍦板潃澶辫触'}}</text>
- <image class="qu" src="/static/icon/home_ar_next@2x.png" mode="widthFix"></image>
- </view>
-
- <view class="index-c-cate">
- <view
- v-if="type"
- :class="typeId === item.id ? 'index-c-cate-item active' : 'index-c-cate-item'"
- v-for="(item, index) in type"
- :key="index"
- @click="clickType(item.id)">
- {{item.name}}
+
+ <view class="page-body">
+ <view class="service-grid">
+ <view class="service-card deposit-card">
+ <image class="service-image" src="/static/image/home_ic_jicun@2x.png" mode="aspectFit"></image>
+ </view>
+ <view class="service-card retrieve-card">
+ <image class="service-image" src="/static/image/home_ic_qujian@2x.png" mode="aspectFit"></image>
</view>
</view>
-
- <!-- 璁㈤ -->
- <template v-if="typeId === 2">
- <view class="list">
- <view class="list-item">
- <view class="list-item-label">鏃堕棿鍦扮偣</view>
- <view class="list-item-row" @click="show = true">
- <view class="list-item-row-label">鐢ㄩ鏃ユ湡<b>*</b></view>
- <view class="list-item-row-val">
- <text>{{ form.startDate ? form.startDate + ' 鑷� ' + form.endDate + '锛�' + form.days + '澶╋級' : '璇烽�夋嫨'}}</text>
- <u-icon name="arrow-right" color="#111111" size="16"></u-icon>
- </view>
- </view>
- <view class="list-item-row">
- <view class="list-item-row-label">鐢ㄩ鏃堕棿<b>*</b></view>
- <view class="list-item-row-radio">
- <view class="radio-item" v-if="orderFood" v-for="(item, index) in orderFood" :key="index">
- <view class="radio-item-label">{{item.name}}</view>
- <view class="radio-item-list">
- <view class="radio-item-list-l">
- <view v-if="item.list" :class="child.active ? 'radio-item-list-item active' : 'radio-item-list-item'" v-for="(child, childIndex) in item.list" :key="childIndex" @click="selectMenu(index, childIndex)">{{child.price||0}}鍏�</view>
- </view>
- <view class="radio-item-list-data">
- <text style="flex-shrink: 0;">浠芥暟锛�</text>
- <input type="digit" v-model="item.num" placeholder="璇疯緭鍏�">
- <text style="color: #999999;">浠�</text>
- <view class="radio-item-list-data-btn" @click="clear(index)">鍙栨秷</view>
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="list-item-row" @click="selectAddress(1)">
- <view class="list-item-row-label">鐢ㄩ鍦扮偣<b>*</b></view>
- <view class="list-item-row-val">
- <text>{{form.address ? form.address : '璇烽�夋嫨'}}</text>
- <u-icon name="arrow-right" color="#111111" size="16"></u-icon>
- </view>
- </view>
- <view class="list-item-row">
- <view class="list-item-row-label">鍦扮偣鎻忚堪</view>
- <view class="list-item-row-val">
- <input type="text" v-model="form.locationRemark" placeholder="璇疯緭鍏�" />
- </view>
- </view>
- <view class="list-item-row" >
- <view class="list-item-row-label">闇�姹傝ˉ鍏�</view>
- <view class="list-item-row-val">
- <textarea v-model="form.supplement" cols="30" rows="10" placeholder="璇疯緭鍏�" maxlength="200"></textarea>
- </view>
- </view>
- <view class="list-item-row" >
- <view class="list-item-row-label">鍥剧墖</view>
- <view class="list-item-row-upload">
- <view class="upload-item" v-if=" form.multifileList" v-for="(item, index) in form.multifileList" :key="index" @click="preview(index, form.multifileList)">
- <image :src="item.url" mode="widthFix"></image>
- <image class="upload-item-dele" @click.stop="form.multifileList.splice(index, 1)" src="/static/icon/ic_delete1@2x.png" mode="widthFix"></image>
- </view>
- <view class="upload-item" @click="uploadImg">
- <u-icon name="plus" color="#999999" size="24"></u-icon>
- <text>鐐瑰嚮涓婁紶</text>
- </view>
- <view style="width: 208rpx; height: 0;"></view>
- </view>
- </view>
- <!-- <view class="list-item-zk" @click="viewStatus = !viewStatus">
- <text>{{viewStatus ? '鏀惰捣' : '琛ュ厖闇�姹�'}}</text>
- <u-icon :name="viewStatus ? 'arrow-up' : 'arrow-down'" color="#00BC12" size="16"></u-icon>
- </view> -->
- </view>
- <view class="list-item">
- <view class="list-item-label">鑱旂郴浜轰俊鎭�</view>
- <view class="list-item-row">
- <view class="list-item-row-label">鑱旂郴浜�</view>
- <view class="list-item-row-val">
- <input type="text" v-model="form.linkName" placeholder="璇疯緭鍏�" />
- </view>
- </view>
- <view class="list-item-row">
- <view class="list-item-row-label">鑱旂郴鐢佃瘽<b>*</b></view>
- <view class="list-item-row-val">
- <input type="number" v-model="form.linkPhone" placeholder="璇疯緭鍏�" maxlength="11" />
- </view>
- </view>
- </view>
+
+ <view class="notice-card">
+ <view class="notice-icon-wrap">
+ <image src="/static/icon/home_ic_daizhifu@2x.png" mode="aspectFit"></image>
</view>
- <view style="width: 100%; height: 214rpx;"></view>
- <view class="footer">
- <view class="footer-price">
- <view class="footer-price-info">棰勪及鎬昏垂鐢�</view>
- <view class="footer-price-num">
- <text>{{totalPrice}}</text>
- <text>鍏�</text>
- </view>
- </view>
- <view class="box-hz-btn" :style="{ backgroundImage: 'url(' + btn + ')' }">
- <view class="box-hz-btn-kf" @click="contactPhone()">瀹㈡湇</view>
- <view class="box-hz-btn-next" @click="submit">绔嬪嵆涓嬪崟</view>
- </view>
+ <view class="notice-copy">
+ <text class="notice-title">寰呮敮浠�</text>
+ <text class="notice-text">璇峰湪 10 鍒嗛挓鍐呭畬鎴愭敮浠橈紝瓒呮椂璁㈠崟灏嗚嚜鍔ㄥ彇娑�</text>
</view>
- </template>
-
- <view class="box" v-if="typeId !== 2">
- <view class="box-hz" :style="{ minHeight: 'calc(100vh - env(safe-area-inset-bottom) - 94rpx - ' + ((navHeight + statusbarHeight) + 'px') + ')' }">
-
- <!-- 鐢ㄥ伐 -->
- <template v-if="typeId === 0">
- <view class="box-hz-cate">
- <view v-if="typeWork" :class="form.workType === item.id ? 'box-hz-cate-item active' : 'box-hz-cate-item'" v-for="(item, index) in typeWork" :key="index" @click="clickTypeWork(item.id)">
- <text>{{item.name}}</text>
- <view class="box-hz-cate-item-x" v-if="form.workType === item.id"></view>
- </view>
+ </view>
+
+ <view class="section-head">
+ <text class="section-title">鎺ㄨ崘瀵勫瓨鐐�</text>
+ <text class="section-more">鏌ョ湅鏇村</text>
+ </view>
+
+ <view class="recommend-list">
+ <view v-for="(item, index) in pointList" :key="index" class="point-card" @tap="goStoragePage">
+ <view class="point-thumb">
+ <image class="point-thumb-image" mode="aspectFill"></image>
+ </view>
+ <view class="point-main">
+ <view class="point-head">
+ <text class="point-name">{{ item.name }}</text>
+ <text class="point-distance">{{ item.distance }}</text>
</view>
- <view class="box-hz-list">
- <view class="box-hz-list-item" @click="show = true">
- <view class="box-hz-list-item-label"><text>鐢ㄥ伐鏃堕棿锛�</text></view>
- <view :class="form.startDate ? 'box-hz-list-item-val active' : 'box-hz-list-item-val'">
- <view class="box-hz-list-item-val-left">
- <image class="icon" src="/static/icon/ic_time@2x.png" mode="widthFix"></image>
- <text>{{ form.startDate ? form.startDate + ' 鑷� ' + form.endDate : '璇烽�夋嫨鐢ㄥ伐鏃堕棿'}}</text>
- </view>
- <u-icon name="arrow-right" color="#111111" size="16"></u-icon>
- </view>
- </view>
- <view class="box-hz-list-item" @click="selectAddress(1)">
- <view class="box-hz-list-item-label"><text>鐢ㄥ伐鍦扮偣锛�</text></view>
- <view :class="form.address ? 'box-hz-list-item-val active' :'box-hz-list-item-val'">
- <view class="box-hz-list-item-val-left">
- <image class="icon" src="/static/icon/ic_location@2x.png" mode="widthFix"></image>
- <text>{{form.address ? form.address : '璇烽�夋嫨鐢ㄥ伐鍦扮偣'}}</text>
- </view>
- <u-icon name="arrow-right" color="#111111" size="16"></u-icon>
- </view>
- </view>
+ <view class="point-address">
+ <image src="/static/icon/home_ic_location3@2x.png" mode="aspectFit"></image>
+ <text>{{ item.address }}</text>
</view>
- </template>
-
- <!-- 杩愯揣 -->
- <template v-if="typeId === 1">
- <scroll-view class="nav-scroll" scroll-x="true">
- <view v-if="car" :class="form.categoryId === item.id ? 'nav-item active' : 'nav-item'" v-for="(item, index) in car" :key="index" @click="clickCar(item)">
- <text>{{item.name}}</text>
- <view class="nav-item-x" v-if="form.categoryId === item.id"></view>
- </view>
- </scroll-view>
-
- <view class="box-hz-car">
- <view class="box-hz-car-image">
- <image :src="carImage" mode="widthFix"></image>
- </view>
- <view class="box-hz-car-info" v-if="carRemark">
- {{carRemark || ''}}
- </view>
- </view>
- <view class="box-hz-list">
- <view class="box-hz-list-item" @click="show = true">
- <view class="box-hz-list-item-label"><text>鐢ㄨ溅鏃堕棿锛�</text></view>
- <view :class="form.startDate ? 'box-hz-list-item-val active' : 'box-hz-list-item-val'">
- <view class="box-hz-list-item-val-left">
- <image class="icon" src="/static/icon/ic_time@2x.png" mode="widthFix"></image>
- <text>{{ form.startDate ? form.startDate + ' 鑷� ' + form.endDate : '璇烽�夋嫨鐢ㄨ溅鏃堕棿'}}</text>
- </view>
- <u-icon name="arrow-right" color="#111111" size="16"></u-icon>
- </view>
- </view>
- <view class="box-hz-list-item">
- <view class="box-hz-list-item-label">
- <text>鐢ㄨ溅鍦扮偣锛�</text>
- <text @click="addAddr">+澧炲姞閫旂粡鐐�</text>
- </view>
- <view class="item-d">
- <view class="item-d-row" @click="selectAddress(2)">
- <view class="item-d-row-icon">
- <image src="/static/icon/ic_qidian@2x.png" mode="widthFix"></image>
- </view>
- <view class="item-d-row-val">
- <text>{{form.address ? form.address : '璇烽�夋嫨鐢ㄨ溅璧风偣'}}</text>
- <u-icon name="arrow-right" color="#111111" size="16"></u-icon>
- </view>
- </view>
- <view class="item-d-row" v-if="form.wayInfoDTOList" v-for="(item, index) in form.wayInfoDTOList" :key="index" @click="selectAddress(4, index)">
- <view class="item-d-row-icon">
- <image src="/static/icon/ic_jingguo@2x.png" mode="widthFix"></image>
- </view>
- <view class="item-d-row-val">
- <text>{{item.location ? item.location : '璇烽�夋嫨閫旂粡鍦扮偣'}}</text>
- <view style="display: flex; align-items: center; flex-shrink: 0;">
- <image src="/static/icon/ic_delete@2x.png" style="margin-right: 22rpx; width: 32rpx; height: 32rpx;" @click.stop="form.wayInfoDTOList.splice(index, 1)" mode="widthFix"></image>
- <u-icon name="arrow-right" color="#111111" size="16"></u-icon>
- </view>
- </view>
- </view>
- <view class="item-d-row" @click="selectAddress(3)">
- <view class="item-d-row-icon">
- <image src="/static/icon/ic_zhongdian@2x.png" mode="widthFix"></image>
- </view>
- <view class="item-d-row-val">
- <text>{{form.locationEnd ? form.locationEnd : '璇烽�夋嫨鐢ㄨ溅缁堢偣'}}</text>
- <u-icon name="arrow-right" color="#111111" size="16"></u-icon>
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <view class="box-hz-btn" :style="{ backgroundImage: 'url(' + btn + ')' }">
- <view class="box-hz-btn-kf" @click="contactPhone()" >瀹㈡湇</view>
- <view class="box-hz-btn-next" @click="jump()" v-if="typeId == 2">绔嬪嵆涓嬪崟</view>
- <view class="box-hz-btn-next" @click="jump()" v-if="typeId !== 2">涓嬩竴姝�</view>
+ <text class="point-time">{{ item.time }}</text>
</view>
</view>
</view>
</view>
-
- <!-- 閫夋嫨鏃ユ湡鑼冨洿 -->
- <u-calendar :show="show" color="#00BC12" :allowSameDay="true" mode="range" @close="show = false" @confirm="confirmDate"></u-calendar>
-
- <u-popup :show="showPhone" round="15" mode="bottom" :safeAreaInsetBottom="true" @close="contactPhone()" :closeable="true" :closeOnClickOverlay="true">
- <view class="phone">
- <view class="phone-head">
- <view></view>
- <text>鑱旂郴瀹㈡湇</text>
- </view>
- <view class="phone-item">
- <view>
- <image style="width: 36rpx;height: 36rpx" src="/static/icon/ic_kefu.png" mode="widthFix"></image>
- <button open-type="contact" plain="true" bindcontact="handleContact">鍦ㄧ嚎瀹㈡湇</button>
- </view>
- <view class="line" v-if="serverPhone && serverPhone.length"></view>
- </view>
- <view class="phone-item" v-if="serverPhone" v-for="(item,index) in serverPhone" :key="item" @click="contactPhoneDo(item)">
- <view>
- <image src="/static/icon/ic_call@2x.png" mode="widthFix"></image>
- <text>{{item}}</text>
- </view>
- <view class="line" v-if="index<serverPhone.length-1"></view>
- </view>
- <view style="width: 100%; height: 30rpx;"></view>
- <!-- <view class="phone-botton" @click="contactPhone()" >鍏抽棴</view> -->
+
+ <view class="location-toast">
+ <view class="toast-copy">
+ <text class="toast-title">鏈巿鏉冨畾浣�</text>
+ <text class="toast-text">鎴戜滑鏃犳硶鑾峰緱鎮ㄥ綋鍓嶄綅缃俊鎭负鎮ㄦ帹鑽愰檮杩戝瘎瀛樼偣</text>
</view>
- </u-popup>
-
- <u-modal
- title="娓╅Θ鎻愮ず"
- :show="show1"
- closeOnClickOverlay
- showCancelButton
- >
- <view class="slot-content">
- 鏄惁纭鎶㈠崟锛�
- </view>
- <view slot="confirmButton" style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
- <view class="btn1" @click="show1 = false">鍙栨秷</view>
- <view class="btn2" @click="getaccept1">纭</view>
- </view>
- </u-modal>
- <u-modal
- title="鏀粯鏈垚鍔�"
- :show="show2"
- closeOnClickOverlay
- showCancelButton
- >
- <view class="slot-content">
- 璇风‘璁ゆ槸鍚﹀彇娑堟敮浠樻垨鏌ョ湅璁㈠崟缁х画鏀粯锛�
- </view>
- <view slot="confirmButton" style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
- <view class="btn1" @click="show2 = false;payOrderId=null">鍙栨秷鏀粯</view>
- <view class="btn2" @click="goOrderDetail(payOrderId)">鏌ョ湅璁㈠崟</view>
- </view>
- </u-modal>
+ <view class="toast-btn" @tap="handleLocation">寮�鍚畾浣�</view>
+ </view>
</view>
</template>
<script>
import { mapState } from 'vuex'
- import sunuiMverify from '@/components/sunui-mverify/sunui-mverify.vue';
- var QQMapWX = require('@/utils/qqmap-wx-jssdk.js');
+
export default {
- components: { sunuiMverify },
computed: {
- ...mapState(['navHeight', 'statusbarHeight','userInfo','token','openid', 'latitude', 'longitude','address']),
- totalPrice() {
- return this.form.estimatedAccount / 100
+ ...mapState(['navHeight', 'statusbarHeight', 'address']),
+ currentAddress() {
+ return this.address && this.address !== '瀹氫綅涓�' ? this.address : '鑾峰彇瀹氫綅'
}
},
data() {
return {
- showPhone:false,
- serverPhone:[],
- show: false,
- isLogin: false,
- typeId: 0,
- qqmapsdk: null,
- location:{
- latitude:null,
- longitude:null,
- address:null,
- },
- type: [
- { name: '鐢ㄥ伐', id: 0 },
- { name: '杩愯揣', id: 1 },
- { name: '璁㈤', id: 2 }
- ],
- searchType: [
- { name: '鍏ㄩ儴', id: '' },
- { name: '鐢ㄥ伐', id: 0 },
- { name: '杩愯揣', id: 1 },
- { name: '璁㈤', id: 2 }
- ],
- typeWork: [
- { name: '閲囨憳宸�', id: 0 },
- { name: '鍒嗘嫞宸�', id: 1 },
- { name: '鍖呰宸�', id: 2 }
- ],
- sortList: [
- { name: '鏈�鏂板彂甯�', id: 0 },
- { name: '璺濈浼樺厛', id: 1 },
- { name: '浠锋牸浠庨珮鍒颁綆', id: 2 }
- ],
- car: [],
- btn: require('@/static/image/btn.png'),
- typeViewId: 0,
- carImage: '',
- carRemark: '',
-
- orderFood: [],
- viewStatus: true,
-
- form: {
- startDate: '',
- endDate: '',
- latitude: '',
- longitude: '',
- location: '',
- locationEnd: '',
- wayInfoDTOList: [],
- workType: 0,
- categoryId: '',
- categoryName: '',
- days: '',
- locationRemark: '',
- supplement: '',
- multifileList: [],
- linkName: '',
- linkPhone: '',
- estimatedAccount: '',
- price: '',
- address: ''
- },
- sortType: 0,
- orderList: [],
- typeVal: '',
- page: 1,
- next: true,
-
- isOnce: true,
- show1: false,
- show2: false,
- orderId: null,
- payOrderId:null
- }
- },
- async onLoad() {
- await this.$onLaunched;
- console.log('2')
- // if (this.token && this.token != '' && this.userInfo && JSON.stringify(this.userInfo) != '{}' && this.userInfo.useIdentity === 1) {
- // this.getOrderList()
- // }
-
- this.getCategoryLists()
- this.getDictInfo()
-
- if (this.token && this.token != '' && this.userInfo && JSON.stringify(this.userInfo) != '{}') {
- this.form.linkPhone = this.userInfo.telephone || ''
- this.form.linkName = this.userInfo.name || ''
- }
-
- this.qqmapsdk = new QQMapWX({
- key: '4PXBZ-JLBC7-LCLXG-P2SZX-C4HYE-LDBLQ'
- });
-
- uni.$on('clear', (data) => {
- this.form.startDate = ''
- this.form.endDate = ''
- this.form.latitude = ''
- this.form.longitude = ''
- this.form.location = ''
- this.form.locationEnd = ''
- this.form.wayInfoDTOList = []
- this.form.workType = 0
- this.form.days = ''
- this.form.locationRemark = ''
- this.form.supplement = ''
- this.form.multifileList = []
- this.form.estimatedAccount = ''
- this.form.price = ''
- this.form.address = ''
- this.clearAll()
- })
- // 鍒锋柊棣栭〉鏁版嵁
- uni.$on('refresh', () => {
- this.getCategoryLists()
- this.getDictInfo()
-
- if (this.token && this.token != '' && this.userInfo && JSON.stringify(this.userInfo) != '{}') {
- this.form.linkPhone = this.userInfo.telephone
- }
- })
- },
- async onShow(options) {
- await this.$onLaunched;
- if(this.token && this.token != '' && this.userInfo && JSON.stringify(this.userInfo) != '{}') {
- console.log('宸茬櫥闄�')
- this.isLogin = true
-
- // this.typeViewId = this.userInfo.useIdentity
- // !this.isOnce &&
- if (this.userInfo.useIdentity === 1) {
- console.log('宸茬櫥闄�111')
- this.page = 1
- this.next = true
- this.orderList = []
- this.getOrderList()
- }
-
- } else {
- this.isLogin = false
- console.log('鏈櫥闄�')
- }
- // this.payOrderId=null
- },
- watch: {
- typeId: {
- handler(news, old) {
- this.clearFormParam()
- }
- },
- orderFood: {
- deep: true,
- handler(news, old) {
- let price = 0
- news.forEach(item => {
- let num = 0
- item.list.forEach(child => {
- if (child.active) {
- num = Number(child.price)
- }
- })
- if (item.num && num > 0) {
- price += num * item.num
- }
- })
- console.log("========================",price)
- this.form.price = price
- }
- },
- 'form.price': {
- handler(news, old) {
- console.log(news,"==========",old)
- if (news != old) {
- this.getPrice()
+ backgroundImage: require('@/static/image/bg_home@2x.png'),
+ pointList: [
+ {
+ name: '涓搧蹇繍鍗楃珯鏃楄埌搴�',
+ address: '鍚堣偉鍗楃珯璐熶竴灞�100鍙�',
+ time: '鍛ㄤ竴鑷冲懆鏃� 7:00~23:00',
+ distance: '239m'
+ },
+ {
+ name: '涓搧蹇繍鍚堣偉鐏溅绔�',
+ address: '鍚堣偉鐏溅绔欎竴灞�12鍙�',
+ time: '鍛ㄤ竴鑷冲懆鏃� 7:00~23:00',
+ distance: '12.8km'
+ },
+ {
+ name: '鍚堣偉鐏溅绔欏寳骞垮満',
+ address: '鍚堣偉鐏溅绔欎竴灞�12鍙�',
+ time: '鍛ㄤ竴鑷冲懆鏃� 7:00~23:00',
+ distance: '13.1km'
}
- }
+ ]
}
},
- onReachBottom() {
- if (this.token && this.token != '' && this.userInfo && JSON.stringify(this.userInfo) != '{}' && this.userInfo.useIdentity === 1) {
- this.getOrderList()
- }
+ async onLoad() {
+ await this.$onLaunched
},
methods: {
- preview(current, arr) {
- let urls = arr.map(item => item.url || item.fileurlFull)
- uni.previewImage({ current, urls })
+ handleLocation() {
+ uni.showToast({
+ title: '瀹氫綅鍔熻兘寰呮帴鍏�',
+ icon: 'none'
+ })
},
- goOrderDetail(id){
+ goStoragePage() {
uni.navigateTo({
- url: '/pages/order-details/order-details?id='+id
+ url: '/pages/storage-point/storage-point'
})
- var that =this
- setTimeout(function(){
- that.orderId=null
- that.payOrderId=null
- that.show2=false
- },1000)
-
- },
- clearFormParam(){
- this.form.startDate = ''
- this.form.address = ''
- this.form.endDate = ''
- this.form.latitude = ''
- this.form.longitude = ''
- this.form.location = ''
- this.form.locationEnd = ''
- this.form.wayInfoDTOList = []
- this.form.workType = 0
- this.form.days = ''
- this.form.locationRemark = ''
- this.form.supplement = ''
- this.form.multifileList = []
- this.form.estimatedAccount = ''
- this.form.price = ''
- this.viewStatus = false
- this.clearAll()
- },
- clear(index) {
- this.orderFood[index].num = ''
- this.orderFood[index].list.forEach(item => {
- item.active = false
- })
- },
- clearAll() {
- this.orderFood.forEach(p=>{
- p.num=null
- p.list.forEach(item => {
- item.active = false
- })
- })
- },
- getDictInfo(){
- var that = this;
- this.$u.api.getPlatformAboutUs({}).then(res =>{
- that.serverPhone = (res.data.serverPhone||'').split(",")
- })
- },
- contactPhone(){
- this.showPhone = !this.showPhone
- console.log("==================================",this.showPhone)
- },
- contactPhoneDo(phone){
- if(phone !=null && phone!=''){
- uni.makePhoneCall({
- phoneNumber: phone
- })
- }
- },
- // 鎵嬪姩鎺ュ崟
- getaccept() {
- var that = this;
- that.$u.api.accept({ orderId: this.orderId })
- .then(res1 => {
- if (res1.code === 200) {
- uni.showToast({ title: '鎶㈠崟鎴愬姛锛�', icon: 'success', duration: 2000 })
- setTimeout(() => {
- that.page = 1
- that.next = true
- that.orderList = []
- that.getOrderList()
- that.goOrderDetail(that.orderId)
- }, 2000)
- }
- })
- },
- getaccept1() {
- var that = this;
- this.show1 = false
- uni.requestSubscribeMessage({
- tmplIds: ['AA97cHjvlPiNO4viMkVe4JifCf9TD5b5Eb7s6El3VS8','3YSC7gouRlSjHXz4CrWOGFzPmGwEBtFj4snwdfMvKHk','tDpYImlrdv-0d3euTrHbYZ1cEZvjVHTNlqHvV0tpLHg'],
- success(res) {
- that.getaccept()
- },
- fail(err) {
- that.getaccept()
- }
- })
- },
- clickSort(id) {
- this.sortType = id
- this.page = 1
- this.next = true
- this.orderList = []
- this.getOrderList()
- },
- clickCate(id) {
- this.typeVal = id
- this.page = 1
- this.next = true
- this.orderList = []
- this.getOrderList()
- },
- // 璁㈠崟鍒嗛〉
- getOrderList() {
- if (!this.next) return;
- this.$u.api.orderPage({
- capacity: 10,
- page: this.page,
- model: {
- queryMyOrderType: 2,
- type: this.typeVal,
- sortType: this.sortType,
- queryLat: uni.getStorageSync('address').latitude,
- queryLgt: uni.getStorageSync('address').longitude
- }
- }).then(res => {
- if (res.code !== 200) return;
- this.isOnce = false
- res.data.records.forEach(item => {
- // 璁㈤鍗�
- if (item.type === 2) {
- item.wayInfoCopy = JSON.parse(item.wayInfo).map(item => {
- return `${item.name}${item.price / 100}鍏�(${item.num}浠�)`
- }).join(' | ')
- // 杩愯揣
- } else if (item.type === 1) {
- item.wayInfo = JSON.parse(item.wayInfo)
- }
- })
- this.orderList = [...this.orderList, ...res.data.records]
-
- if (this.orderList.length === res.data.total) {
- this.next = false
- } else {
- this.page += 1
- }
- })
- },
- // 鎻愪氦璁㈠崟
- submit() {
- var that = this
- this.payOrderId=null
- if (!this.form.startDate) {
- return uni.showToast({ title: '璇烽�夋嫨鐢ㄩ鏃堕棿', icon: 'none' })
- }
- let cateringDTOList = []
- let valid = true
- let msg ='璇烽�夋嫨'
- that.orderFood.forEach(item => {
- item.list.forEach(child => {
- if (child.active) {
- // (Number(child.price) * Number(item.num))
- if( !item.num){
- msg =msg +'銆�'+item.name+'銆�';
- valid =false
- }
- cateringDTOList.push({
- id:item.id,
- name: item.name,
- num: item.num,
- price: child.price * 100
- })
- }
- })
- })
- if(!valid){
- return uni.showToast({ title: msg+'鐢ㄩ浠芥暟', icon: 'none' })
- }
- if (cateringDTOList.length === 0) {
- return uni.showToast({ title: '璇烽�夋嫨鐢ㄩ鏍囧噯', icon: 'none' })
- }
- if (!this.form.address) {
- return uni.showToast({ title: '璇烽�夋嫨鐢ㄩ鍦扮偣', icon: 'none' })
- }
- if (!this.form.linkPhone) {
- return uni.showToast({ title: '璇疯緭鍏ヨ仈绯荤數璇�', icon: 'none' })
- }
- uni.requestSubscribeMessage({
- tmplIds: ['oVjOBLcHxIlGzOMJsdInmgI5CHGXh-UTvMzQqfFOnIg','AA97cHjvlPiNO4viMkVe4JifCf9TD5b5Eb7s6El3VS8'],
- success(res) {
- that.$u.api.release({
- ...that.form,
- type: 2,
- price: Number(that.form.price) * 100,
- priceNum1: that.form.days,
- location: that.form.address,
- lat: that.form.latitude,
- lgt: that.form.longitude,
- cateringDTOList
- }).then(res => {
- if (res.code == 200) {
- that.clearFormParam();
- wx.requestPayment({
- timeStamp: res.data.object.timeStamp,
- nonceStr: res.data.object.nonceStr,
- package: res.data.object.packageVal,
- signType: res.data.object.signType,
- paySign: res.data.object.paySign,
- success (res1) {
- if (res1.errMsg = 'requestPayment:ok') {
- uni.showToast({ title: '鏀粯鎴愬姛', icon: 'success', duration: 2000 });
- setTimeout(() => {
- uni.navigateTo({
- url: `/pages/success/success?orderId=${res.data.id}`
- })
- }, 1500)
- }
- },
- fail(err) {
- that.payOrderId = res.data.id
- that.show2=true
- console.log("=====================", res.data.id,that.payOrderId,err)
- }
- })
- }
- })
- console.log(cateringDTOList)
- },
- fail(err) {
- console.log(err)
- }
- })
- },
- uploadImg() {
- uni.chooseImage({
- success: (chooseImageRes) => {
- for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
- uni.uploadFile({
- url: this.$baseUrl + '/web/public/upload',
- filePath: chooseImageRes.tempFilePaths[i],
- name: 'file',
- formData: {
- 'folder': 'orders'
- },
- success: (uploadFileRes) => {
- const res = JSON.parse(uploadFileRes.data)
- this.form.multifileList.push({
- fileurl: res.data.imgaddr,
- name: res.data.originname,
- url: res.data.url,
- type: 0
- })
- }
- });
- }
- }
- });
- },
- // 璁＄畻閲戦
- getPrice() {
- var that = this
- if (that.form.price && that.form.days) {
- that.$u.api.getTotal({
- price: Number(that.form.price) * 100,
- priceNum1: that.form.days,
- type: 2
- }).then(res => {
- if (res.code === 200) {
- that.form.estimatedAccount = res.data
- }
- })
- }else{
- that.form.estimatedAccount = 0
- }
- },
- addAddr() {
- this.form.wayInfoDTOList.push({
- lat: '',
- lgt: '',
- location: ''
- })
- },
- confirmDate(e) {
- this.form.startDate = e[0]
- this.form.endDate = e[e.length - 1]
-
- let time = this.form.startDate == this.form.endDate ? 1 : 0
-
- this.form.days = e.length - time;
- this.show = false
- if (this.typeId === 2) {
- this.getPrice()
- }
- },
- selectAddress(type, index) {
- uni.chooseLocation({
- success: (res) => {
- console.log("==================",res)
- if ([1,2].includes(type)) {
- this.form.latitude = res.latitude
- this.form.longitude = res.longitude
- this.form.address = res.name ||res.address
- } else if (type === 3) {
- this.form.locationEnd = res.name ||res.address
- this.form.latEnd = res.latitude
- this.form.lgtEnd = res.longitude
- } else if (type === 4) {
- this.form.wayInfoDTOList[index].lat = res.latitude
- this.form.wayInfoDTOList[index].lgt = res.longitude
- this.form.wayInfoDTOList[index].location = res.name|| res.address
- }else if (type == -1) {
- console.log(res)
- this.location.latitude = res.latitude
- this.location.longitude = res.longitude
- this.location.address =res.name || res.address
- }
- }
- });
- },
- clickType(e) {
- if (!this.token) {
- uni.navigateTo({
- url: '/pages/login/login'
- })
- return
- }
- this.typeId = e
- if (e === 2) {
- this.form.categoryId = this.car[0].id
- this.form.categoryName = this.car[0].name
- this.carRemark = this.car[0].remark
- this.carImage = this.car[0].iconFull
- }
- },
- clickTypeWork(e) {
- this.form.workType = e
- },
- clickCar(item) {
- this.form.categoryId = item.id
- this.form.categoryName = item.name
- this.carImage = item.iconFull
- this.carRemark = item.remark
- },
- jump() {
- if(!this.userInfo || !this.token){
- uni.navigateTo({
- url: '/pages/login/login'
- })
- return
- }
-
- const { form } = this;
-
- // 鐢ㄥ伐
- if (this.typeId === 0) {
-
- if (!form.startDate || !form.endDate) {
- return uni.showToast({ title: '璇烽�夋嫨鐢ㄥ伐鏃堕棿', icon: 'none' })
- } else if (!form.latitude || !form.longitude) {
- return uni.showToast({ title: '璇烽�夋嫨鐢ㄥ伐鍦扮偣', icon: 'none' })
- }
-
- // 閲囨憳宸�
- if (this.form.workType === 0) {
- uni.navigateTo({
- url: `/pages/using-workers/using-workers?days=${form.days}&startDate=${form.startDate}&endDate=${form.endDate}&latitude=${form.latitude}&longitude=${form.longitude}&address=${form.address}&workType=${form.workType}`
- })
- // 鍒嗘嫞宸�
- } else if (this.form.workType === 1) {
- uni.navigateTo({
- url: `/pages/sorting/sorting?days=${form.days}&startDate=${form.startDate}&endDate=${form.endDate}&latitude=${form.latitude}&longitude=${form.longitude}&address=${form.address}&workType=${form.workType}`
- })
- // 鍖呰宸�
- } else if (this.form.workType === 2) {
- uni.navigateTo({
- url: `/pages/packaging-worker/packaging-worker?days=${form.days}&startDate=${form.startDate}&endDate=${form.endDate}&latitude=${form.latitude}&longitude=${form.longitude}&address=${form.address}&workType=${form.workType}`
- })
- }
- // 杩愯揣
- } else if (this.typeId === 1) {
-
- if (!form.startDate || !form.endDate) {
- return uni.showToast({ title: '璇烽�夋嫨鐢ㄨ溅鏃堕棿', icon: 'none' })
- } else if (!form.latitude || !form.longitude) {
- return uni.showToast({ title: '璇烽�夋嫨鐢ㄨ溅璧风偣', icon: 'none' })
- } else if (!form.latEnd || !form.lgtEnd) {
- return uni.showToast({ title: '璇烽�夋嫨鐢ㄨ溅缁堢偣', icon: 'none' })
- }
-
- let carData = {
- startDate: form.startDate,
- endDate: form.endDate,
- lat: form.latitude,
- lgt: form.longitude,
- location: form.address,
- latEnd: form.latEnd,
- lgtEnd: form.lgtEnd,
- locationEnd: form.locationEnd,
- wayInfoDTOList: form.wayInfoDTOList,
- categoryId: form.categoryId,
- categoryName: form.categoryName,
- days: form.days
- }
-
- uni.setStorageSync('carData', carData);
-
- uni.navigateTo({
- url: `/pages/freight/freight`
- })
- }
- },
- // 閫夋嫨濂楅
- selectMenu(a, b) {
- this.orderFood.forEach((item, index) => {
- if (index === a) {
- item.list.forEach((child, childIndex) => {
- child.active = b === childIndex
- })
- }
- })
- },
- getCategoryLists() {
- this.$u.api.getCategoryList({ type: 1 })
- .then(res => {
- if (res.code === 200) {
- this.car = res.data
- this.form.categoryId = res.data[0].id
- this.form.categoryName = res.data[0].name
- this.carRemark = res.data[0].remark
- this.carImage = res.data[0].iconFull
- }
- })
- this.$u.api.getCategoryList({ type: 2 })
- .then(res => {
- if (res.code === 200) {
- res.data.forEach(item => {
- item.num = ''
- item.list = item.detailList.map(child => {
- return {
- active: false,
- price: child
- }
- })
- })
- this.orderFood = res.data
- }
- })
}
}
}
</script>
-<style>
- page {
- background: #F7F7F7;
- }
-</style>
-
<style lang="scss" scoped>
- .index {
+ .index-page {
+ position: relative;
+ min-height: 100vh;
+ background: #f5f7fb;
+ padding-bottom: 160rpx;
+ }
+
+ .top-gradient-bg {
+ position: absolute;
+ left: 0;
+ top: 0;
width: 100%;
- .slot-content {
- width: 100%;
- text-align: center;
- font-weight: 400;
- font-size: 30rpx;
- color: #333333;
- margin: 30rpx 0;
+ height: 420rpx;
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ z-index: 0;
+ }
+
+ .top-hero {
+ position: relative;
+ z-index: 1;
+ padding: 0 30rpx 0 30rpx;
+ box-sizing: border-box;
+ }
+
+ .hero-banner {
+ margin-top: 30rpx;
+ }
+
+ .hero-bar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .location-chip {
+ display: flex;
+ align-items: center;
+ gap: 6rpx;
+ max-width: 360rpx;
+ image {
+ width: 36rpx;
+ height: 36rpx;
+ margin-right: 8rpx;
}
- .btn1 {
- width: 264rpx;
- height: 88rpx;
- line-height: 88rpx;
- text-align: center;
- font-weight: 400;
- font-size: 32rpx;
- color: #666666;
- border-radius: 44rpx;
- border: 1rpx solid #B2B2B2;
- }
- .btn2 {
- width: 264rpx;
- height: 88rpx;
- line-height: 88rpx;
- text-align: center;
+ text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
- background: #00BC12;
- border-radius: 44rpx;
}
- .index-j {
- .kefubtn{
- background-color: white;
- display: flex;
- justify-content: center;
- align-items: center;
- position: fixed;
- bottom: 100rpx;
- flex-direction: column;
- right:30rpx;
- height: 88rpx;
- width: 88rpx;
- border: 1rpx solid #f2f2f2;
- border-radius: 50%;
- image{
- width: 36rpx;
- width: 36rpx;
- }
- text{
- width: 44rpx;
- height: 32rpx;
- font-weight: 400;
- font-size: 22rpx;
- color: #222222;
- line-height: 32rpx;
- text-align: center;
- }
- }
- width: 100%;
- .index-j-head {
- width: 100%;
- background-color: #ffffff;
- position: sticky;
- top: 0;
- left: 0;
- z-index: 999;
- .index-c-title {
- width: 100%;
- padding: 0 30rpx;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- text {
- font-weight: bold;
- font-size: 36rpx;
- color: #111111;
- }
- }
- }
- .search {
- width: 100%;
- position: sticky;
- left: 0;
- z-index: 999;
- .index-j-cate {
- width: 100%;
- height: 110rpx;
- display: flex;
- background-color: #ffffff;
- align-items: center;
- border-bottom: 1rpx solid #E5E5E5;
- .index-j-cate-item {
- flex: 1;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
- text {
- font-weight: 400;
- font-size: 32rpx;
- color: #666666;
- }
- .index-j-cate-item-x {
- position: absolute;
- bottom: 0;
- left: 50%;
- transform: translate(-50%, 0);
- width: 40rpx;
- height: 6rpx;
- background: #00BC12;
- border-radius: 3rpx;
- }
- }
- }
- .index-j-search {
- width: 100%;
- height: 96rpx;
- padding: 0 30rpx;
- box-sizing: border-box;
- background-color: #ffffff;
- display: flex;
- align-items: center;
- .active {
- background: rgba(91,190,56,0.08) !important;
- font-weight: 400 !important;
- font-size: 26rpx !important;
- color: #4DB02B !important;
- }
- .index-j-search-item {
- padding: 10rpx 20rpx;
- box-sizing: border-box;
- background: #F7F7F7;
- border-radius: 28rpx;
- font-weight: 400;
- font-size: 26rpx;
- color: #666666;
- margin-right: 24rpx;
- }
- }
- }
- .index-j-list {
- width: 100%;
- padding: 24rpx 30rpx;
- box-sizing: border-box;
- .more{
- width: 100%;
- margin-top: 40rpx;
- text-align: center;
- font-size: 24rpx;
- color: #666666;
- }
- .index-list-item {
- width: 100%;
- padding: 30rpx;
- box-sizing: border-box;
- background: #FFFFFF;
- border-radius: 20rpx;
- margin-bottom: 20rpx;
- &:last-child {
- margin: 0 !important;
- }
- .eidt {
- width: 100%;
- height: 100rpx;
- padding: 6rpx;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: center;
- .eidt-btn {
- width: 100%;
- height: 88rpx;
- line-height: 88rpx;
- text-align: center;
- background: #00BC12;
- border-radius: 44rpx;
- font-weight: 500;
- font-size: 32rpx;
- color: #FFFFFF;
- }
- // background: #00BC12;
- // border-radius: 50rpx;
- // text {
- // font-weight: 500;
- // font-size: 36rpx;
- // color: #FFFFFF;
- // }
- }
- .index-list-item-price {
- width: 100%;
- display: flex;
- align-items: center;
- margin-bottom: 20rpx;
- text {
- &:nth-child(1) {
- font-weight: 400;
- font-size: 26rpx;
- color: #333333;
- }
- &:nth-child(2) {
- font-weight: 600;
- font-size: 36rpx;
- color: #FF0000;
- }
- }
- }
- .index-list-item-dz {
- width: 100%;
- display: flex;
- align-items: center;
- margin-bottom: 20rpx;
- image {
- width: 32rpx;
- height: 32rpx;
- flex-shrink: 0;
- margin-right: 16rpx;
- }
- text {
- flex: 1;
- font-weight: 400;
- font-size: 28rpx;
- color: #333333;
- }
- }
- .index-list-item-info {
- font-weight: 400;
- font-size: 28rpx;
- color: #888888;
- margin-bottom: 20rpx;
- }
- .address {
- width: 100%;
- background: #F7F7F7;
- border-radius: 16rpx;
- padding: 30rpx;
- box-sizing: border-box;
- margin-bottom: 24rpx;
- position: relative;
- .address-xian {
- position: absolute;
- top: 17px;
- left: 24px;
- width: 1rpx;
- height: calc(100% - 60rpx);
- border-right: 2rpx dashed #B2B2B2;
- }
- .address-row {
- position: relative;
- z-index: 2;
- width: 100%;
- display: flex;
- align-items: center;
- margin-bottom: 30rpx;
- &:last-child {
- margin: 0 !important;
- }
- image {
- width: 36rpx;
- height: 36rpx;
- flex-shrink: 0;
- margin-right: 24rpx;
- }
- text {
- font-weight: 400;
- font-size: 28rpx;
- color: #333333;
- }
- }
- }
- .index-list-item-date {
- width: 100%;
- display: flex;
- align-items: center;
- margin-bottom: 20rpx;
- image {
- flex-shrink: 0;
- width: 28rpx;
- height: 28rpx;
- margin-right: 18rpx;
- }
- text {
- font-weight: 400;
- font-size: 28rpx;
- color: #333333;
- }
- }
- .index-list-item-head {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 20rpx;
- .index-list-item-head-l {
- display: flex;
- align-items: center;
- .xoam {
- width: 6rpx;
- height: 30rpx;
- background: #00BC12;
- border-radius: 4rpx;
- margin-right: 20rpx;
- }
- text {
- font-weight: 600;
- font-size: 32rpx;
- color: #222222;
- }
- }
- .index-list-item-head-r {
- font-weight: 400;
- font-size: 28rpx;
- color: #888888;
- }
- }
- }
- }
+ }
+
+ .hero-actions {
+ display: flex;
+ align-items: center;
+ padding: 6rpx 10rpx;
+ border-radius: 999rpx;
+ background: rgba(255, 255, 255, 0.7);
+ }
+
+ .hero-action {
+ width: 52rpx;
+ height: 52rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .action-ring {
+ border-left: 1rpx solid rgba(44, 44, 44, 0.12);
+ }
+
+ .search-box {
+ height: 72rpx;
+ margin-top: 10rpx;
+ padding: 0 22rpx;
+ border-radius: 16rpx;
+ background: #ffffff;
+ display: flex;
+ align-items: center;
+ gap: 14rpx;
+ image {
+ width: 28rpx;
+ height: 28rpx;
}
- .index-c {
- width: 100%;
- height: 520rpx;
- background: linear-gradient(#00BC12 0%, #00BC12 83%, #ffffff 100%);
- .index-c-title {
- width: 100%;
- padding: 0 30rpx;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- .index-c-title-logo {
- font-weight: bold;
- font-size: 40rpx;
- color: #FFFFFF;
- margin-right: 30rpx;
- }
- .dingwei {
- width: 36rpx;
- height: 36rpx;
- margin-right: 8rpx;
- }
- text {
- font-weight: 500;
- font-size: 32rpx;
- color: #ffffff;
- margin-right: 12rpx;
- max-width: 280rpx;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .qu {
- width: 22rpx;
- height: 22rpx;
- }
- }
- .list {
- width: 100%;
- display: flex;
- padding: 0 30rpx 30rpx 30rpx;
- box-sizing: border-box;
- flex-direction: column;
- margin-top: 26rpx;
- .list-item {
- width: 100%;
- padding: 40rpx 30rpx;
- box-sizing: border-box;
- background-color: #ffffff;
- border-radius: 20rpx;
- margin-bottom: 20rpx;
- &:last-child {
- margin: 0 !important;
- }
- .list-item-label {
- font-weight: 600;
- font-size: 32rpx;
- color: #222222;
- margin-bottom: 28rpx;
- }
- .list-item-zk {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- text {
- font-weight: 400;
- font-size: 28rpx;
- color: #00BC12;
- margin-right: 8rpx;
- }
- }
- .list-item-row {
- width: 100%;
- display: flex;
- flex-direction: column;
- border-bottom: 1rpx solid #E5E5E5;
- margin-bottom: 30rpx;
- &:last-child {
- margin: 0 !important;
- }
- .list-item-row-label {
- font-weight: 400;
- font-size: 28rpx;
- color: #666666;
- display: flex;
- align-items: center;
- b {
- color: red;
- }
- }
- .list-item-row-user {
- width: 100%;
- display: flex;
- flex-direction: column;
- .user-item {
- width: 100%;
- padding: 30rpx 0;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- margin-bottom: 30rpx;
- justify-content: space-between;
- border-bottom: 1rpx solid #E5E5E5;
- &:last-child {
- margin: 0 !important;
- }
- text {
- flex-shrink: 0;
- font-weight: 400;
- font-size: 30rpx;
- color: #333333;
- }
- input {
- flex: 1;
- text-align: center;
- margin: 0 30rpx;
- font-weight: 400;
- font-size: 30rpx;
- color: #222222;
- }
- }
- }
- .list-item-row-radio {
- width: 100%;
- display: flex;
- padding: 30rpx 0;
- box-sizing: border-box;
- flex-direction: column;
- // border-bottom: 1rpx solid #E5E5E5;
- .radio-item {
- width: 100%;
- display: flex;
- align-items: flex-start;
- margin-bottom: 30rpx;
- border-bottom: 1rpx solid #E5E5E5;
- &:last-child {
- border: none;
- }
- &:last-child {
- margin: 0 !important;
- }
- .radio-item-label {
- width: 200rpx;
- flex-shrink: 0;
- font-weight: 400;
- font-size: 30rpx;
- color: #111111;
- }
- .radio-item-list {
- flex: 1;
- display: flex;
- flex-direction: column;
- .radio-item-list-l {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-wrap: wrap;
- .active {
- background: #00BC12 !important;
- color: #ffffff !important;
- }
- .radio-item-list-item {
- width: 124rpx;
- height: 72rpx;
- line-height: 72rpx;
- text-align: center;
- background: #EEEEEE;
- border-radius: 36rpx;
- font-weight: 400;
- font-size: 28rpx;
- color: #111111;
- margin-top: 30rpx;
- &:nth-child(1) {
- margin-top: 0 !important;
- }
- &:nth-child(2) {
- margin-top: 0 !important;
- }
- &:nth-child(3) {
- margin-top: 0 !important;
- }
- }
- }
- .radio-item-list-data {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: flex-end;
- margin-top: 42rpx;
- margin-bottom: 34rpx;
- .radio-item-list-data-btn {
- width: 110rpx;
- height: 64rpx;
- line-height: 64rpx;
- margin-left: 20rpx;
- font-weight: 400;
- font-size: 24rpx;
- color: #666666;
- text-align: center;
- border: 1rpx solid #B2B2B2;
- border-radius: 34rpx;
- }
- text {
- font-weight: 400;
- font-size: 30rpx;
- color: #333333;
- }
- input {
- width: 100rpx;
- font-weight: bold;
- font-size: 30rpx;
- color: #222222;
- text-align: right;
- margin: 0 30rpx;
- &::-webkit-input-placeholder {
- color: #999999;
- font-weight: 400;
- }
- }
- }
- }
- }
- }
- .list-item-row-upload {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-wrap: wrap;
- padding: 30rpx 0;
- box-sizing: border-box;
- .upload-item {
- width: 208rpx;
- height: 208rpx;
- display: flex;
- align-items: center;
- flex-direction: column;
- justify-content: center;
- background: #F8F9FB;
- border-radius: 8rpx;
- border: 2rpx solid #EEEEEE;
- position: relative;
- &:last-child {
- margin: 0 !important;
- }
- image {
- width: 100%;
- }
- text {
- font-weight: 400;
- font-size: 26rpx;
- color: #666666;
- margin-top: 16rpx;
- }
- .upload-item-dele {
- position: absolute;
- top: -20rpx;
- right: -20rpx;
- width: 40rpx;
- height: 40rpx;
- z-index: 9;
- }
- }
- }
- .list-item-row-val {
- width: 100%;
- padding: 30rpx 0;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: space-between;
- text {
- font-weight: 400;
- font-size: 30rpx;
- color: #111111;
- }
- input {
- width: 100%;
- font-weight: 400;
- font-size: 30rpx;
- color: #222222;
- }
- textarea {
- width: 100%;
- height: 90rpx;
- font-weight: 400;
- font-size: 30rpx;
- color: #111111;
- }
- }
- }
- }
- }
- .index-c-cate {
- width: 100%;
- padding: 0 30rpx;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-top: 28rpx;
- .active {
- background: #FFFFFF !important;
- color: #5BBE38 !important;
- }
- .index-c-cate-item {
- width: 128rpx;
- height: 64rpx;
- line-height: 64rpx;
- text-align: center;
- border-radius: 32rpx;
- font-weight: 400;
- font-size: 32rpx;
- color: #FFFFFF;
- }
- }
- .footer {
- width: 100%;
- height: 214rpx;
- padding: 20rpx 30rpx;
- box-sizing: border-box;
- position: fixed;
- bottom: 0;
- left: 0;
- z-index: 9;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- background: #FFFFFF;
- box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(0,0,0,0.06);
- .footer-price {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .footer-price-info {
- font-weight: 400;
- font-size: 30rpx;
- color: #222222;
- }
- .footer-price-num {
- display: flex;
- align-items: center;
- text {
- &:nth-child(1) {
- font-weight: 500;
- font-size: 40rpx;
- color: #FF0000;
- margin-right: 20rpx;
- }
- &:nth-child(2) {
- font-weight: 400;
- font-size: 30rpx;
- color: #222222;
- }
- }
- }
- }
- .box-hz-btn {
- width: 100%;
- height: 88rpx;
- background-repeat: no-repeat;
- background-size: 100% 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .box-hz-btn-kf {
- flex-shrink: 0;
- width: 188rpx;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- font-weight: 500;
- font-size: 32rpx;
- color: #8B2300;
- }
- .box-hz-btn-next {
- flex: 1;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- font-weight: 500;
- font-size: 32rpx;
- color: #FFFFFF;
- }
- }
- // .footer-bottom {
- // width: 100%;
- // display: flex;
- // align-items: center;
- // justify-content: space-between;
- // .footer-bottom-kf {
- // flex-shrink: 0;
- // margin-right: 40rpx;
- // display: flex;
- // flex-direction: column;
- // align-items: center;
- // justify-content: center;
- // image {
- // width: 36rpx;
- // height: 36rpx;
- // }
- // text {
- // font-weight: 400;
- // font-size: 24rpx;
- // color: #222222;
- // margin-top: 8rpx;
- // }
- // }
- // .footer-bottom-btn {
- // flex: 1;
- // height: 88rpx;
- // display: flex;
- // align-items: center;
- // justify-content: center;
- // background: #00BC12;
- // box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(91,190,56,0.16);
- // border-radius: 44rpx;
- // text {
- // &:nth-child(1) {
- // font-weight: 500;
- // font-size: 32rpx;
- // color: #FFFFFF;
- // }
- // &:nth-child(2) {
- // font-weight: 500;
- // font-size: 26rpx;
- // color: #FFFFFF;
- // }
- // }
- // }
- // }
- }
- .box {
- width: 100%;
- padding: 0 30rpx 30rpx 30rpx;
- box-sizing: border-box;
- margin-top: 30rpx;
- .box-hz {
- width: 100%;
- padding: 40rpx 30rpx;
- border-radius: 20rpx;
- box-sizing: border-box;
- background-color: #FFFFFF;
- .box-hz-car {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- margin-top: 24rpx;
- margin-bottom: 40rpx;
- .box-hz-car-image {
- width: 432rpx;
- height: 200rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- overflow: hidden;
- image {
- width: 100%;
- }
- }
- .box-hz-car-info {
- width: 100%;
- padding: 24rpx;
- box-sizing: border-box;
- background: #F7F7F7;
- font-weight: 400;
- font-size: 26rpx;
- color: #666666;
- border-radius: 16rpx;
- margin-top: 30rpx;
- }
- }
- .nav-scroll {
- white-space: nowrap; /* 闃叉瀵艰埅椤规崲琛� */
- margin-bottom: 50rpx;
- height: 66rpx;
- overflow: auto; /* 鍏佽婊氬姩鏉″嚭鐜� */
- .nav-item {
- display: inline-block; /* 浣垮鑸」姘村钩鎺掑垪 */
- margin-right: 60rpx;
- position: relative;
- text {
- font-weight: 400;
- font-size: 30rpx;
- color: #666666;
- }
- .nav-item-x {
- width: 40rpx;
- height: 6rpx;
- position: absolute;
- bottom: -10rpx;
- left: 50%;
- transform: translate(-50%, 0);
- background: #FF5A40;
- border-radius: 3rpx;
- }
- // padding: 10px 20px; /* 璁剧疆鍐呰竟璺� */
- // margin-right: 10px; /* 璁剧疆鍙宠竟璺� */
- // background-color: #f0f0f0; /* 璁剧疆鑳屾櫙鑹� */
- // border: 1px solid #ddd; /* 璁剧疆杈规 */
- // border-radius: 5px; /* 璁剧疆鍦嗚 */
- }
- .active {
- text {
- font-weight: 600 !important;
- font-size: 32rpx !important;
- color: #222222 !important;
- }
- }
- }
- .box-hz-cate {
- width: 100%;
- display: flex;
- align-items: center;
- margin-bottom: 50rpx;
- .active {
- text {
- font-weight: 600 !important;
- font-size: 32rpx !important;
- color: #222222 !important;
- }
- }
- .box-hz-cate-item {
- position: relative;
- margin-right: 60rpx;
- text {
- font-weight: 400;
- font-size: 30rpx;
- color: #666666;
- }
- .box-hz-cate-item-x {
- width: 40rpx;
- height: 6rpx;
- position: absolute;
- bottom: -10rpx;
- left: 50%;
- transform: translate(-50%, 0);
- background: #FF5A40;
- border-radius: 3rpx;
- }
- }
- }
- .box-hz-list {
- width: 100%;
- .box-hz-list-item {
- width: 100%;
- display: flex;
- flex-direction: column;
- margin-bottom: 40rpx;
- .item-d {
- width: 100%;
- padding: 0 30rpx;
- box-sizing: border-box;
- background: #FFFCF9;
- border-radius: 16rpx;
- border: 2rpx solid #FD9E24;
- .item-d-row {
- width: 100%;
- // height: 100rpx;
- height: auto;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .item-d-row-icon {
- width: 36rpx;
- height: 36rpx;
- flex-shrink: 0;
- margin-right: 24rpx;
- image {
- width: 100%;
- height: 100%;
- }
- }
- .item-d-row-val {
- flex: 1;
- // height: 100%;
- padding: 30rpx 0;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: space-between;
- border-bottom: 1rpx solid #E5E5E5;
- text {
- flex: 1;
- font-weight: 400;
- font-size: 32rpx;
- color: #111111;
- }
- image {
- flex-shrink: 0;
- width: 30rpx;
- height: 30rpx;
- }
- }
- }
- }
- .box-hz-list-item-label {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 30rpx;
- text {
- &:nth-child(1) {
- font-weight: 400;
- font-size: 28rpx;
- color: #666666;
- }
- &:nth-child(2) {
- font-weight: 400;
- font-size: 28rpx;
- color: #5BBE38;
- }
- }
- }
- .active {
- background: rgba(91,190,56,0.06) !important;
- border: 2rpx solid #5BBE38 !important;
- }
- .box-hz-list-item-val {
- width: 100%;
- height: 104rpx;
- display: flex;
- align-items: center;
- justify-content: space-between;
- background: #FFFCF9;
- border-radius: 16rpx;
- padding: 0 30rpx;
- box-sizing: border-box;
- border: 2rpx solid #FD9E24;
- .box-hz-list-item-val-left {
- flex: 1;
- height: 100%;
- display: flex;
- align-items: center;
- .icon {
- width: 36rpx;
- height: 36rpx;
- margin-right: 24rpx;
- flex-shrink: 0;
- }
- text {
- width: 470rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-weight: 400;
- font-size: 32rpx;
- color: #111111;
- }
- }
- }
- }
- }
- .list {
- width: 100%;
- display: flex;
- flex-direction: column;
- .list-label {
- font-weight: 600;
- font-size: 32rpx;
- color: #222222;
- }
- }
- .box-hz-btn {
- width: 100%;
- height: 88rpx;
- background-repeat: no-repeat;
- background-size: 100% 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .box-hz-btn-kf {
- flex-shrink: 0;
- width: 188rpx;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- font-weight: 500;
- font-size: 32rpx;
- color: #8B2300;
- }
- .box-hz-btn-next {
- flex: 1;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- font-weight: 500;
- font-size: 32rpx;
- color: #FFFFFF;
- }
- }
- }
- }
+ }
+
+ .search-text {
+ font-size: 26rpx;
+ color: #b6bcc8;
+ }
+
+ .page-body {
+ position: relative;
+ z-index: 1;
+ padding: 18rpx 22rpx 0;
+ }
+
+ .banner-card {
+ position: relative;
+ height: 310rpx;
+ padding: 28rpx 26rpx;
+ border-radius: 20rpx;
+ overflow: hidden;
+ background: linear-gradient(180deg, #bde7ff 0%, #e9f9ff 38%, #90d16e 100%);
+ box-sizing: border-box;
+ }
+
+ .banner-card::before,
+ .banner-card::after {
+ content: '';
+ position: absolute;
+ top: 28rpx;
+ width: 140rpx;
+ height: 78rpx;
+ background: rgba(255, 255, 255, 0.62);
+ border-radius: 999rpx;
+ }
+
+ .banner-card::before {
+ left: -34rpx;
+ }
+
+ .banner-card::after {
+ right: -24rpx;
+ }
+
+ .banner-tag {
+ display: inline-flex;
+ align-items: center;
+ height: 46rpx;
+ padding: 0 18rpx;
+ border-radius: 24rpx;
+ background: #ff7d51;
+ font-size: 24rpx;
+ font-weight: 600;
+ color: #ffffff;
+ }
+
+ .banner-copy {
+ position: relative;
+ z-index: 1;
+ width: 196rpx;
+ margin-top: 44rpx;
+ padding: 20rpx 18rpx;
+ border: 4rpx solid rgba(255, 255, 255, 0.7);
+ border-radius: 18rpx;
+ background: rgba(112, 175, 92, 0.28);
+ text {
+ display: block;
+ font-size: 48rpx;
+ font-weight: 700;
+ line-height: 1.25;
+ color: #ffffff;
}
- .phone {
- width: 100%;
- padding-top: 40rpx;
- box-sizing: border-box;
- .phone-botton {
- width: 100%;
- height: 88rpx;
- line-height: 88rpx;
- text-align: center;
- font-weight: 500;
- font-size: 32rpx;
- color: #FFFFFF;
- background: #00BC12;
- border-radius: 44rpx;
- margin-top: 60rpx;
- }
- .phone-head {
- width: 100%;
- text-align: center;
- justify-content: space-between;
- margin-bottom: 40rpx;
- text {
- font-weight: 800;
- font-size: 32rpx;
- color: #222222;
- }
- }
-
- .phone-item {
- width: 100%;
- text-align: center;
- display: flex;
- justify-content: center;
- flex-direction: column;
- // border-bottom: 1rpx solid #eeeeee;
- line-height: 78rpx;
- button{
- border: 1rpx white solid;
- display: inline;
- width: 300rpx;
- font-weight: 500;
- font-size: 32rpx;
- line-height: 32rpx;
- color: #222222;
- }
- image{
- width: 28rpx;
- height: 28rpx;
- margin-right: 30rpx;
- }
- .line{
- width: 100%;
- height: 1rpx;
- background-color: #f2f2f2
- }
- text {
- font-weight: 500;
- font-size: 28rpx;
- line-height: 28rpx;
- color: #222222;
- }
- }
+ }
+
+ .banner-image {
+ position: absolute;
+ right: 10rpx;
+ bottom: 12rpx;
+ width: 320rpx;
+ height: 220rpx;
+ }
+
+ .service-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 18rpx;
+ margin-top: 18rpx;
+ }
+
+ .service-card {
+ width: 334rpx;
+ height: 176rpx;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ box-sizing: border-box;
+ }
+
+ .service-image {
+ width: 334rpx;
+ height: 176rpx;
+ }
+
+ .notice-card {
+ display: flex;
+ align-items: center;
+ margin-top: 30rpx;
+ padding: 30rpx;
+ box-sizing: border-box;
+ border-radius: 18rpx;
+ background: linear-gradient(135deg, #25a2f5 0%, #1eaef4 100%);
+ overflow: hidden;
+ }
+
+ .notice-icon-wrap {
+ flex-shrink: 0;
+ width: 76rpx;
+ height: 76rpx;
+ border-radius: 38rpx;
+ background: rgba(255, 255, 255, 0.14);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .notice-icon {
+ width: 38rpx;
+ height: 38rpx;
+ }
+
+ .notice-copy {
+ margin-left: 18rpx;
+ min-width: 0;
+ }
+
+ .notice-title {
+ display: block;
+ font-weight: bold;
+ font-size: 30rpx;
+ color: #FFFFFF;
+ }
+
+ .notice-text {
+ display: block;
+ margin-top: 6rpx;
+ font-weight: 400;
+ font-size: 24rpx;
+ color: rgba(255,255,255,0.85);
+ }
+
+ .section-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 40rpx;
+ }
+
+ .section-title {
+ font-size: 36rpx;
+ font-weight: 700;
+ color: #202020;
+ }
+
+ .section-more {
+ font-size: 24rpx;
+ color: #a4acb8;
+ }
+
+ .section-more::after {
+ content: ' >';
+ }
+
+ .recommend-list {
+ margin-top: 14rpx;
+ }
+
+ .point-card {
+ display: flex;
+ gap: 18rpx;
+ padding: 24rpx;
+ margin-bottom: 18rpx;
+ border-radius: 18rpx;
+ background: #f4f7fc;
+ }
+
+ .point-thumb {
+ position: relative;
+ flex-shrink: 0;
+ width: 132rpx;
+ height: 104rpx;
+ border-radius: 12rpx;
+ overflow: hidden;
+ background: #dfe7f3;
+ }
+
+ .point-thumb-image {
+ width: 100%;
+ height: 100%;
+ }
+
+ .point-main {
+ flex: 1;
+ min-width: 0;
+ }
+
+ .point-head {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 10rpx;
+ }
+
+ .point-name {
+ flex: 1;
+ font-size: 32rpx;
+ font-weight: 600;
+ line-height: 1.35;
+ color: #222222;
+ }
+
+ .point-distance {
+ flex-shrink: 0;
+ font-size: 24rpx;
+ color: #a6aebb;
+ }
+
+ .point-address {
+ display: flex;
+ align-items: center;
+ gap: 6rpx;
+ margin-top: 8rpx;
+ font-size: 24rpx;
+ color: #8f97a4;
+ image {
+ width: 20rpx;
+ height: 20rpx;
}
}
+
+ .point-time {
+ display: block;
+ margin-top: 10rpx;
+ font-size: 24rpx;
+ color: #9aa2ae;
+ }
+
+ .location-toast {
+ position: fixed;
+ left: 20rpx;
+ right: 20rpx;
+ bottom: 8rpx;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 18rpx 20rpx;
+ border-radius: 12rpx;
+ background: rgba(42, 42, 42, 0.88);
+ z-index: 30;
+ }
+
+ .toast-copy {
+ min-width: 0;
+ padding-right: 16rpx;
+ }
+
+ .toast-title {
+ display: block;
+ font-size: 28rpx;
+ font-weight: 600;
+ color: #ffffff;
+ }
+
+ .toast-text {
+ display: block;
+ margin-top: 6rpx;
+ font-size: 22rpx;
+ line-height: 1.4;
+ color: rgba(255, 255, 255, 0.76);
+ }
+
+ .toast-btn {
+ flex-shrink: 0;
+ height: 54rpx;
+ line-height: 54rpx;
+ padding: 0 20rpx;
+ border-radius: 27rpx;
+ background: linear-gradient(135deg, #18b2ff 0%, #0b95ff 100%);
+ font-size: 24rpx;
+ font-weight: 600;
+ color: #ffffff;
+ }
</style>
--
Gitblit v1.9.3