|
@@ -10,13 +10,13 @@
|
|
|
:custom-style="{ padding: '20rpx' }">
|
|
|
<!-- 图标 -->
|
|
|
<image :src="item.icon" class="service-img" mode="aspectFit" />
|
|
|
-
|
|
|
+
|
|
|
<!-- 文本 -->
|
|
|
<text class="grid-text">{{ item.name }}</text>
|
|
|
</up-grid-item>
|
|
|
</up-grid>
|
|
|
</scroll-view>
|
|
|
-
|
|
|
+
|
|
|
<up-toast ref="uToastRef" />
|
|
|
</view>
|
|
|
</template>
|
|
@@ -26,7 +26,8 @@
|
|
|
<swiper :indicator-dots="true" class="swiper">
|
|
|
<swiper-item>
|
|
|
<up-grid :border="false" col="5" @click="handleGridClick">
|
|
|
- <up-grid-item v-for="(item, index) in serviceList2.slice(0,10)" :key="index" :custom-style="custmoStyle">
|
|
|
+ <up-grid-item v-for="(item, index) in serviceList2.slice(0,10)" :key="index"
|
|
|
+ :custom-style="custmoStyle">
|
|
|
<view class="grid-box">
|
|
|
<view class="grid-icon">
|
|
|
<image :src="item.icon" class="service-img" mode="aspectFit" />
|
|
@@ -39,7 +40,8 @@
|
|
|
</swiper-item>
|
|
|
<swiper-item>
|
|
|
<up-grid :border="false" col="4" @click="handleGridClick">
|
|
|
- <up-grid-item v-for="(item, index) in serviceList2.slice(10,12)" :key="index" :custom-style="custmoStyle">
|
|
|
+ <up-grid-item v-for="(item, index) in serviceList2.slice(10,12)" :key="index"
|
|
|
+ :custom-style="custmoStyle">
|
|
|
<view class="grid-box">
|
|
|
<view class="grid-icon">
|
|
|
<image :src="item.icon" class="service-img" mode="aspectFit" />
|
|
@@ -64,41 +66,41 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import {
|
|
|
- ref,
|
|
|
- onMounted,
|
|
|
- watch,
|
|
|
- computed,
|
|
|
- provide
|
|
|
-} from 'vue';
|
|
|
-// import {
|
|
|
-// typeOptionSelect
|
|
|
-// } from "@/api/volunteerDetailsApi/details.js"
|
|
|
-import {
|
|
|
- workDate,
|
|
|
- getDataTime,
|
|
|
- getVolunteerInfo
|
|
|
-} from '@/api/volunteer.js'
|
|
|
-import {
|
|
|
- volunteerSeachgetTreeList,
|
|
|
-} from "@/api/volunteerDetailsApi/details.js"
|
|
|
-import Calendar from '../../components/uni-calendar/components/uni-calendar/uni-calendar.vue'
|
|
|
-
|
|
|
-const swiperList = ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'];
|
|
|
-
|
|
|
-// Toast 控制宫格
|
|
|
-const uToastRef = ref(null);
|
|
|
-const userType = uni.getStorageSync('userType') //读取本地存储
|
|
|
-// 用户/志愿者 识别标识
|
|
|
-const userOrWorker = uni.getStorageSync('storage_data').vuex_userOrWorker //读取本地存储
|
|
|
-
|
|
|
-const calendar = ref(null)
|
|
|
-const info = ref({
|
|
|
- lunar: true,
|
|
|
- range: true,
|
|
|
- insert: false,
|
|
|
-})
|
|
|
-const selected = ref([])
|
|
|
+ import {
|
|
|
+ ref,
|
|
|
+ onMounted,
|
|
|
+ watch,
|
|
|
+ computed,
|
|
|
+ provide
|
|
|
+ } from 'vue';
|
|
|
+ // import {
|
|
|
+ // typeOptionSelect
|
|
|
+ // } from "@/api/volunteerDetailsApi/details.js"
|
|
|
+ import {
|
|
|
+ workDate,
|
|
|
+ getDataTime,
|
|
|
+ getVolunteerInfo
|
|
|
+ } from '@/api/volunteer.js'
|
|
|
+ import {
|
|
|
+ volunteerSeachgetTreeList,
|
|
|
+ } from "@/api/volunteerDetailsApi/details.js"
|
|
|
+ import Calendar from '../../components/uni-calendar/components/uni-calendar/uni-calendar.vue'
|
|
|
+
|
|
|
+ const swiperList = ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'];
|
|
|
+
|
|
|
+ // Toast 控制宫格
|
|
|
+ const uToastRef = ref(null);
|
|
|
+ const userType = uni.getStorageSync('userType') //读取本地存储
|
|
|
+ // 用户/志愿者 识别标识
|
|
|
+ const userOrWorker = uni.getStorageSync('storage_data').vuex_userOrWorker //读取本地存储
|
|
|
+
|
|
|
+ const calendar = ref(null)
|
|
|
+ const info = ref({
|
|
|
+ lunar: true,
|
|
|
+ range: true,
|
|
|
+ insert: false,
|
|
|
+ })
|
|
|
+ const selected = ref([])
|
|
|
|
|
|
// 普通用户
|
|
|
const serviceList1 = ref([{
|
|
@@ -107,7 +109,7 @@ const selected = ref([])
|
|
|
key: 2,
|
|
|
},
|
|
|
{
|
|
|
- icon: '/static/Tioimages/家庭保洁.png',//换
|
|
|
+ icon: '/static/Tioimages/家庭保洁.png',
|
|
|
name: '家庭保洁',
|
|
|
key: 1,
|
|
|
},
|
|
@@ -137,7 +139,7 @@ const selected = ref([])
|
|
|
key: 7,
|
|
|
},
|
|
|
{
|
|
|
- icon: '/static/Tioimages/健康管理.png',//换
|
|
|
+ icon: '/static/Tioimages/健康管理.png',
|
|
|
name: '健康管理',
|
|
|
key: 8,
|
|
|
},
|
|
@@ -157,288 +159,288 @@ const selected = ref([])
|
|
|
key: 11,
|
|
|
},
|
|
|
]);
|
|
|
-
|
|
|
+
|
|
|
//志愿者
|
|
|
- const serviceList2 = ref([
|
|
|
- {
|
|
|
- icon: '/static/serverImg/home/icon/icon2.png',
|
|
|
- name: '陪伴陪聊',
|
|
|
- key: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '/static/serverImg/home/icon/icon4.png',
|
|
|
- name: '孩子陪护',
|
|
|
- key: 2,
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '/static/serverImg/home/icon/icon1.png',
|
|
|
- name: '健康管理',
|
|
|
- key: 3,
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '/static/serverImg/home/icon/icon6.png',
|
|
|
- name: '家庭保洁',
|
|
|
- key: 4
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '/static/serverImg/home/icon/icon3.png',
|
|
|
- name: '临时帮手',
|
|
|
- key: 5
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '/static/serverImg/home/icon/icon5.png',
|
|
|
- name: '专家服务',
|
|
|
- key: 6
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '/static/serverImg/home/icon/icon7.png',
|
|
|
- name: '家电维修',
|
|
|
- key: 8
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '/static/serverImg/home/icon/icon7.png',
|
|
|
- name: '旅游服务',
|
|
|
- key: 9
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '/static/serverImg/home/icon/icon7.png',
|
|
|
- name: '交友专区',
|
|
|
- key: 10
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '/static/serverImg/home/icon/icon7.png',
|
|
|
- name: '商城购物',
|
|
|
- key: 11
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '/static/serverImg/home/icon/icon7.png',
|
|
|
- name: '本地生活',
|
|
|
- key: 12
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '/static/serverImg/home/icon/icon8.png',
|
|
|
- name: '排班管理',
|
|
|
- key: 7
|
|
|
- },
|
|
|
-]);
|
|
|
-
|
|
|
-const parentIdMap = {
|
|
|
- '孩子陪护': 2,
|
|
|
- '陪伴陪聊': 1,
|
|
|
- '家庭助理': 3,
|
|
|
- '健康管理': 4,
|
|
|
- '家庭清洁': 5,
|
|
|
- '家务帮手': 6,
|
|
|
- '资讯与服务': 7,
|
|
|
-};
|
|
|
-
|
|
|
-const getParentId = (service) => parentIdMap[service.name] || 1;
|
|
|
-
|
|
|
-
|
|
|
-// 宫格点击事件
|
|
|
-const handleGridClick = async (index) => {
|
|
|
- const service = serviceList1.value[index]; // 获取点击的服务条目
|
|
|
- // 用户
|
|
|
- if (userType == 1) {
|
|
|
- // 动态获取 parentId
|
|
|
- const parentId = getParentId(service); // 通过服务条目动态获取 parentId
|
|
|
- const params = {
|
|
|
- parentId: parentId
|
|
|
- }
|
|
|
- const res = await volunteerSeachgetTreeList(params)
|
|
|
- console.log(res, '>>>>>dictSort = null')
|
|
|
-
|
|
|
- // 只有第一条和第二条可以跳转
|
|
|
- if (index === 0 || index === 1) {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages_home/pages/client/details?dataList=${encodeURIComponent(JSON.stringify(res.data))}`
|
|
|
- });
|
|
|
- } else {
|
|
|
- // 其他条目提示“敬请期待”
|
|
|
- uni.showToast({
|
|
|
- title: '敬请期待',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- // 志愿者
|
|
|
- if (userType == 2 && uToastRef.value) {
|
|
|
- // pages_home/pages
|
|
|
-
|
|
|
- const data = serviceList2.value[index]
|
|
|
- if (data.key !== 7) {
|
|
|
- const res = await getVolunteerInfo({ serviceCategory: data.key });
|
|
|
- if (res.code === 200 && res.data) {
|
|
|
- //已有注册,跳转详情页面
|
|
|
+ const serviceList2 = ref([{
|
|
|
+ icon: '/static/Tioimages/1v专业指导.png',
|
|
|
+ name: '陪伴陪聊',
|
|
|
+ key: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '/static/Tioimages/1 妇女儿童权益保护服务.png',
|
|
|
+ name: '孩子陪护',
|
|
|
+ key: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '/static/Tioimages/健康管理.png',
|
|
|
+ name: '健康管理',
|
|
|
+ key: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '/static/Tioimages/家庭保洁.png',
|
|
|
+ name: '家庭保洁',
|
|
|
+ key: 4
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '/static/Tioimages/临时帮手.png',
|
|
|
+ name: '临时帮手',
|
|
|
+ key: 5
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '/static/Tioimages/专家服务.png',
|
|
|
+ name: '专家服务',
|
|
|
+ key: 6
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '/static/Tioimages/家电维修.png',
|
|
|
+ name: '家电维护',
|
|
|
+ key: 8
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '/static/Tioimages/旅游服务.png',
|
|
|
+ name: '旅游服务',
|
|
|
+ key: 9
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '/static/Tioimages/交友.png',
|
|
|
+ name: '交友专区',
|
|
|
+ key: 10
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '/static/Tioimages/购物商城.png',
|
|
|
+ name: '商城购物',
|
|
|
+ key: 11
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '/static/Tioimages/本地生活.png',
|
|
|
+ name: '本地生活',
|
|
|
+ key: 12
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '/static/serverImg/home/icon/icon8.png',
|
|
|
+ name: '排班管理',
|
|
|
+ key: 7
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+
|
|
|
+ const parentIdMap = {
|
|
|
+ '孩子陪护': 2,
|
|
|
+ '陪伴陪聊': 1,
|
|
|
+ '家庭助理': 3,
|
|
|
+ '健康管理': 4,
|
|
|
+ '家庭清洁': 5,
|
|
|
+ '家务帮手': 6,
|
|
|
+ '资讯与服务': 7,
|
|
|
+ };
|
|
|
+
|
|
|
+ const getParentId = (service) => parentIdMap[service.name] || 1;
|
|
|
+
|
|
|
+
|
|
|
+ // 宫格点击事件
|
|
|
+ const handleGridClick = async (index) => {
|
|
|
+ const service = serviceList1.value[index]; // 获取点击的服务条目
|
|
|
+ // 用户
|
|
|
+ if (userType == 1) {
|
|
|
+ // 动态获取 parentId
|
|
|
+ const parentId = getParentId(service); // 通过服务条目动态获取 parentId
|
|
|
+ const params = {
|
|
|
+ parentId: parentId
|
|
|
+ }
|
|
|
+ const res = await volunteerSeachgetTreeList(params)
|
|
|
+ console.log(res, '>>>>>dictSort = null')
|
|
|
+
|
|
|
+ // 只有第一条和第二条可以跳转
|
|
|
+ if (index === 0 || index === 1) {
|
|
|
uni.navigateTo({
|
|
|
- url: `/pages_home/pages/details/index?data=${encodeURIComponent(JSON.stringify(data))}`
|
|
|
+ url: `/pages_home/pages/client/details?dataList=${encodeURIComponent(JSON.stringify(res.data))}`
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // 其他条目提示“敬请期待”
|
|
|
+ uni.showToast({
|
|
|
+ title: '敬请期待',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 志愿者
|
|
|
+ if (userType == 2 && uToastRef.value) {
|
|
|
+ // pages_home/pages
|
|
|
+
|
|
|
+ const data = serviceList2.value[index]
|
|
|
+ if (data.key !== 7) {
|
|
|
+ const res = await getVolunteerInfo({
|
|
|
+ serviceCategory: data.key
|
|
|
+ });
|
|
|
+ if (res.code === 200 && res.data) {
|
|
|
+ //已有注册,跳转详情页面
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages_home/pages/details/index?data=${encodeURIComponent(JSON.stringify(data))}`
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ data.key === 1 || data.key === 2 ? uni.navigateTo({
|
|
|
+ url: `/pages_home/pages/register/index?data=${encodeURIComponent(JSON.stringify(data))}`
|
|
|
+ }) : uni.showToast({
|
|
|
+ title: '敬请期待',
|
|
|
+ icon: 'none'
|
|
|
})
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
- data.key === 1 || data.key === 2 ? uni.navigateTo({
|
|
|
- url: `/pages_home/pages/register/index?data=${encodeURIComponent(JSON.stringify(data))}`
|
|
|
- }) : uni.showToast({
|
|
|
- title: '敬请期待',
|
|
|
- icon: 'none'
|
|
|
+ init();
|
|
|
+
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const change = (e) => {
|
|
|
+ console.log('change', e);
|
|
|
+ let dates = [{
|
|
|
+ date: e.fulldate,
|
|
|
+ info: `${e.time.startTime}~${e.time.endTime}`,
|
|
|
+ time: e.time
|
|
|
+ }]
|
|
|
+ if (e.range.before && e.range.after) {
|
|
|
+ dates = e.range.data.map(item => {
|
|
|
+ return {
|
|
|
+ date: item,
|
|
|
+ info: `${e.time.startTime}~${e.time.endTime}`,
|
|
|
+ time: e.time
|
|
|
+ }
|
|
|
})
|
|
|
- return;
|
|
|
}
|
|
|
- init();
|
|
|
-
|
|
|
+ selected.value = [...selected.value, ...dates]
|
|
|
}
|
|
|
-};
|
|
|
-
|
|
|
-const change = (e) => {
|
|
|
- console.log('change', e);
|
|
|
- let dates = [{
|
|
|
- date: e.fulldate,
|
|
|
- info: `${e.time.startTime}~${e.time.endTime}`,
|
|
|
- time: e.time
|
|
|
- }]
|
|
|
- if (e.range.before && e.range.after) {
|
|
|
- dates = e.range.data.map(item => {
|
|
|
- return {
|
|
|
- date: item,
|
|
|
- info: `${e.time.startTime}~${e.time.endTime}`,
|
|
|
- time: e.time
|
|
|
- }
|
|
|
+
|
|
|
+ const onDelete = (e) => {
|
|
|
+ selected.value = selected.value.filter(item => {
|
|
|
+ console.log('item.fulldate !== e.date', item.date, e.fulldate);
|
|
|
+
|
|
|
+ return item.date !== e.fulldate
|
|
|
})
|
|
|
+ console.log(e, selected.value);
|
|
|
}
|
|
|
- selected.value = [...selected.value, ...dates]
|
|
|
-}
|
|
|
|
|
|
-const onDelete = (e) => {
|
|
|
- selected.value = selected.value.filter(item => {
|
|
|
- console.log('item.fulldate !== e.date', item.date, e.fulldate);
|
|
|
-
|
|
|
- return item.date !== e.fulldate
|
|
|
- })
|
|
|
- console.log(e, selected.value);
|
|
|
-}
|
|
|
|
|
|
+ //排班时间去重处理
|
|
|
+ const handleDates = computed(() => {
|
|
|
+ const parmas = selected.value.map(item => {
|
|
|
+ return {
|
|
|
+ workDate: item.date,
|
|
|
+ workStartTime: item.time.startTime,
|
|
|
+ workEndTime: item.time.endTime
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return parmas.reduce((acc, current) => {
|
|
|
+ const existing = acc.find(item => item.workDate === current.workDate);
|
|
|
+ if (existing) {
|
|
|
+ Object.assign(existing, current);
|
|
|
+ } else {
|
|
|
+ acc.push(current);
|
|
|
+ }
|
|
|
+ return acc;
|
|
|
+ }, []);
|
|
|
+ });
|
|
|
+ const confirm = (e) => {
|
|
|
+ const parmas = handleDates.value;
|
|
|
+ console.log('确定', parmas);
|
|
|
+ workDate(parmas).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '修改成功',
|
|
|
+ icon: 'success',
|
|
|
+ success: () => {
|
|
|
+ setTimeout(() => {
|
|
|
+ close();
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ })
|
|
|
|
|
|
-//排班时间去重处理
|
|
|
-const handleDates = computed(() => {
|
|
|
- const parmas = selected.value.map(item => {
|
|
|
- return {
|
|
|
- workDate: item.date,
|
|
|
- workStartTime: item.time.startTime,
|
|
|
- workEndTime: item.time.endTime
|
|
|
- }
|
|
|
- })
|
|
|
- return parmas.reduce((acc, current) => {
|
|
|
- const existing = acc.find(item => item.workDate === current.workDate);
|
|
|
- if (existing) {
|
|
|
- Object.assign(existing, current);
|
|
|
- } else {
|
|
|
- acc.push(current);
|
|
|
- }
|
|
|
- return acc;
|
|
|
- }, []);
|
|
|
-});
|
|
|
-const confirm = (e) => {
|
|
|
- const parmas = handleDates.value;
|
|
|
- console.log('确定', parmas);
|
|
|
- workDate(parmas).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
uni.showToast({
|
|
|
- title: '修改成功',
|
|
|
- icon: 'success',
|
|
|
- success: () => {
|
|
|
- setTimeout(() => {
|
|
|
- close();
|
|
|
- }, 1000)
|
|
|
- }
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
})
|
|
|
-
|
|
|
- return;
|
|
|
- }
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: 'none'
|
|
|
})
|
|
|
- })
|
|
|
-};
|
|
|
-const close = () => {
|
|
|
- calendar.value.close();
|
|
|
-}
|
|
|
-
|
|
|
-const init = () => {
|
|
|
- getDataTime().then(res => {
|
|
|
- console.log('res', res);
|
|
|
- if (res.code === 200) {
|
|
|
- selected.value = res.data.map(item => {
|
|
|
- return {
|
|
|
- date: item.workDate,
|
|
|
- info: `${item.workStartTime}~${item.workEndTime}`,
|
|
|
- time: {
|
|
|
- startTime: item.workStartTime,
|
|
|
- endTime: item.workEndTime
|
|
|
+ };
|
|
|
+ const close = () => {
|
|
|
+ calendar.value.close();
|
|
|
+ }
|
|
|
+
|
|
|
+ const init = () => {
|
|
|
+ getDataTime().then(res => {
|
|
|
+ console.log('res', res);
|
|
|
+ if (res.code === 200) {
|
|
|
+ selected.value = res.data.map(item => {
|
|
|
+ return {
|
|
|
+ date: item.workDate,
|
|
|
+ info: `${item.workStartTime}~${item.workEndTime}`,
|
|
|
+ time: {
|
|
|
+ startTime: item.workStartTime,
|
|
|
+ endTime: item.workEndTime
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- })
|
|
|
- calendar.value.open();
|
|
|
- }
|
|
|
+ })
|
|
|
+ calendar.value.open();
|
|
|
+ }
|
|
|
|
|
|
|
|
|
- })
|
|
|
-}
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
|
|
|
|
|
|
-onMounted(() => {
|
|
|
- // init();
|
|
|
-});
|
|
|
+ onMounted(() => {
|
|
|
+ // init();
|
|
|
+ });
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.Wrapper-grid {
|
|
|
- margin-top: 36rpx;
|
|
|
-}
|
|
|
-
|
|
|
-/* 图标样式 */
|
|
|
-.service-img {
|
|
|
-}
|
|
|
-
|
|
|
-/* 文本样式 */
|
|
|
-.grid-text {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #333;
|
|
|
- text-align: center;
|
|
|
- margin-top: 18rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.grid-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
- margin-bottom: 12rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.grid-icon {
|
|
|
- width: 100rpx;
|
|
|
- height: 100rpx;
|
|
|
- opacity: 1;
|
|
|
- border-radius: 12rpx;
|
|
|
- background: rgba(251, 229, 225, 1);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-
|
|
|
-.service-img {
|
|
|
- width: 58rpx;
|
|
|
- height: 58rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.swiper {
|
|
|
- height: 205px;
|
|
|
-}
|
|
|
-
|
|
|
-.grid-text {
|
|
|
- font-size: 14px;
|
|
|
- color: #909399;
|
|
|
- padding: 10rpx 0 20rpx 0rpx;
|
|
|
-}
|
|
|
+ .Wrapper-grid {
|
|
|
+ margin-top: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 图标样式 */
|
|
|
+ .service-img {}
|
|
|
+
|
|
|
+ /* 文本样式 */
|
|
|
+ .grid-text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 18rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-icon {
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ opacity: 1;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ background: rgba(251, 229, 225, 1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .service-img {
|
|
|
+ width: 58rpx;
|
|
|
+ height: 58rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper {
|
|
|
+ height: 205px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #909399;
|
|
|
+ padding: 10rpx 0 20rpx 0rpx;
|
|
|
+ }
|
|
|
</style>
|