772 lines
25 KiB
Vue
772 lines
25 KiB
Vue
<template>
|
||
<div class="ui-appUserMenuAll">
|
||
<div style="background: #f8f8f8">
|
||
<menuSettingTop :detail="topDetail" @update:date="handleDateChange" @update:mode="handleModeChange"></menuSettingTop>
|
||
</div>
|
||
<div class="font_28 color76c ui-pt-16 ui-pb-16 text-center ui-menu-hint">请选择餐单类型后，再点击日期设置餐单*</div>
|
||
<div class="ui-menu-date-box">
|
||
<div class="ui-select-box f-fcc">
|
||
<div v-for="(item, index) in typeList" :key="index" class="ui-select-item f-fcc" :style="{ background: index == typeIndex ? item.bg : '#ffffff' }">
|
||
<div class="ui-select-li ui-relative colorF" :class="[index === 0 ? 'ui-select-li-one' : index === 1 ? 'ui-select-li-two' : 'ui-select-li-three', index == typeIndex ? item.class : '']" @click="changeType(item, index)">
|
||
<div class="ui-pl-20 bold" :class="index == typeIndex ? 'ui-pt-28 font_32' : 'ui-pt-32 font_28'">{{ item.name }}</div>
|
||
<div class="font_24 ui-pl-20 ui-pt-24">已设置：{{ item.day }}天</div>
|
||
<img v-if="index == typeIndex && typeIndex == 0" class="ui-select-icon" src="https://image.fulllinkai.com/202411/05/ac350a6d384e13515829a50e92809632.png" alt="" />
|
||
<img v-if="index == typeIndex && typeIndex == 1" class="ui-select-icon" src="https://image.fulllinkai.com/202411/07/0ecb164256dd97c0eddc3a0e73528fc3.png" alt="" />
|
||
<img v-if="index == typeIndex && typeIndex == 2" class="ui-select-icon" src="https://image.fulllinkai.com/202411/07/0a75f467ed97ff30277eac153f8d3d4b.png" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ui-calendar-box">
|
||
<div class="f-fbc">
|
||
<div class="font_36 color0E bold">{{ typeData.name }}</div>
|
||
<div class="font_28 color76c">{{ typeData.day }}天</div>
|
||
</div>
|
||
<div class="ui-calendar-date">
|
||
<div class="calendar_title f-fbc">
|
||
<img class="triangle_icon" src="https://image.fulllinkai.com/202411/05/fd04e833fb45ca7c14d25a877d4c9581.png" alt="" @click="upMonth" />
|
||
<div class="font_28 color0E">{{ year }}年{{ month }}月</div>
|
||
<img class="triangle_icon_v2" src="https://image.fulllinkai.com/202411/05/358000854fe0ad24249b85f64640f9a4.png" alt="" @click="nextMonth" />
|
||
</div>
|
||
<div class="week_box">
|
||
<div v-for="(item, index) in weekList" :key="index" class="font_28 text-center week_num">{{ item }} </div>
|
||
</div>
|
||
</div>
|
||
<div class="calendar_day">
|
||
<div v-for="index in nbsp" :key="index + '-only'" class="day_number font_28 colorF">空</div>
|
||
<div v-for="(item, index) in signInList" :key="index" class="day_number">
|
||
<div v-if="item == 1 || item == 2" class="number_box menu text-center" @click.stop="getMenu(item, index + 1)">
|
||
<div class="bold font_32 ui-pt-10">{{ index + 1 }}</div>
|
||
<div class="font_20 ui-text-pt">准备</div>
|
||
</div>
|
||
<div v-else-if="item == 3" class="number_box menuV2 text-center" @click.stop="getMenu(item, index + 1)">
|
||
<div class="bold font_32 ui-pt-10">{{ index + 1 }}</div>
|
||
<div class="font_20 ui-text-pt">装修</div>
|
||
</div>
|
||
<div v-else-if="item == 4" class="number_box menuV3 text-center" @click.stop="getMenu(item, index + 1)">
|
||
<div class="bold font_32 ui-pt-10">{{ index + 1 }}</div>
|
||
<div class="font_20 ui-text-pt">清洁</div>
|
||
</div>
|
||
<div v-else class="number_box text-center" @click.stop="getMenu(item, index + 1)">
|
||
<div class="bold font_32 ui-pt-10">{{ index + 1 }}</div>
|
||
<div class="font_20 colorF ui-text-pt">--</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ui-btn-box">
|
||
<div v-if="!modelText && !modeDate" class="ui-save-btn font_32 f-fcc colorF" @click="addMenuAffirm(1)">保存</div>
|
||
<div v-else class="ui-save-btn font_32 f-fcc colorF" @click="addMenuModal(1)">保存模式并重新生成餐单</div>
|
||
<div class="ui-save-list" @click="toCheckList">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||
<path d="M8.88867 1.55566C12.9388 1.55566 16.2217 4.83858 16.2217 8.88867C16.2217 12.9388 12.9388 16.2217 8.88867 16.2217C4.83858 16.2217 1.55566 12.9388 1.55566 8.88867C1.55566 4.83858 4.83858 1.55566 8.88867 1.55566Z" stroke="#66676C" stroke-width="1.33333" />
|
||
<path d="M8.88867 5.77783V9.33339L10.6664 11.1112" stroke="#66676C" stroke-width="1.33333" stroke-linecap="round" />
|
||
</svg>
|
||
<div>变更历史</div>
|
||
</div>
|
||
</div>
|
||
<van-popup v-model:show="showCheck" round :duration="0.5">
|
||
<div class="menu-setting-change-modal-v2">
|
||
<div class="menu-setting-change-m-title">模式变更历史</div>
|
||
<div class="menu-setting-change-m-big-card">
|
||
<div v-for="(item, index) in operatorList" :key="index" class="menu-setting-change-m-card">
|
||
<div class="menu-setting-change-m-c-title">修改为「{{ item.model == 1 ? '3+4模式' : '1+6模式' }}」</div>
|
||
<div class="menu-setting-change-m-c-operator">操作人：{{ item.service_user_name }}</div>
|
||
<div class="menu-setting-change-m-c-operator">时间：{{ item.create_time }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<svg class="close-box" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none" @click="showCheck = false">
|
||
<g clip-path="url(#clip0_9806_26105)">
|
||
<path opacity="0.2" d="M13 26C20.1797 26 26 20.1797 26 13C26 5.8203 20.1797 0 13 0C5.8203 0 0 5.8203 0 13C0 20.1797 5.8203 26 13 26Z" fill="white" />
|
||
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M7.64777 7.61515C7.821 7.45127 8.09291 7.45406 8.26273 7.62147L18.4382 17.6524C18.6005 17.8124 18.6024 18.0738 18.4424 18.2362C18.439 18.2396 18.4356 18.2429 18.4321 18.2462C18.2588 18.4101 17.9869 18.4073 17.8171 18.2399L7.64166 8.20903C7.4793 8.04897 7.47743 7.78759 7.63749 7.62522C7.64086 7.62181 7.64428 7.61845 7.64777 7.61515Z" fill="white" stroke="white" stroke-width="0.3" />
|
||
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M18.3542 7.61515C18.181 7.45127 17.909 7.45406 17.7392 7.62147L7.56378 17.6524C7.40141 17.8124 7.39954 18.0738 7.5596 18.2362C7.56297 18.2396 7.5664 18.2429 7.56988 18.2462C7.74311 18.4101 8.01502 18.4073 8.18485 18.2399L18.3603 8.20903C18.5227 8.04897 18.5245 7.78759 18.3645 7.62522C18.3611 7.62181 18.3577 7.61845 18.3542 7.61515Z" fill="white" stroke="white" stroke-width="0.3" />
|
||
</g>
|
||
<defs>
|
||
<clipPath id="clip0_9806_26105">
|
||
<rect width="26" height="26" fill="white" />
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
</div>
|
||
</van-popup>
|
||
<van-popup v-model:show="showChange" round :duration="0.5">
|
||
<div class="menu-setting-change-modal">
|
||
<div class="menu-setting-change-m-title">确认生成新餐单</div>
|
||
<div class="menu-setting-change-m-sub">切换至「{{ modelText }}」后，历史的餐单记录会被更新。</div>
|
||
<div class="f-fbc color76c ui-examine-box">
|
||
<div class="ui-examine-btn f-fcc" @click="showChange = false">取消</div>
|
||
<div class="ui-examine-btn-v2 f-fcc" @click="modalSave()">确认通过</div>
|
||
</div>
|
||
</div>
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue';
|
||
import { showLoadingToast, showToast, showSuccessToast } from 'vant';
|
||
import weChat from '@/utils/weChat';
|
||
import { useUserStore } from '@/store/modules/user';
|
||
import router from '@/router';
|
||
import menuSettingTop from '@/components/menuSettingTop.vue';
|
||
import requestGo from '@/utils/requestGo';
|
||
|
||
defineOptions({ name: 'AppUserMenuAll' });
|
||
|
||
const userStore = useUserStore() as any;
|
||
const role = ref<any>(0);
|
||
const isEdit = ref<any>(false);
|
||
const chiefCoach = ref(false); // 是否主教练身份
|
||
const viceCoach = ref(false); // 是否副教练身份
|
||
const service = ref(false); // 是否客服身份
|
||
const schemeStatus = ref<any>(''); // 方案是否已设置
|
||
const throttle = ref(true);
|
||
const isAudit = ref<any>(false); // 用户的餐单模板是否审核
|
||
const loading = ref(false);
|
||
const typeList = ref<any>([
|
||
{ name: '准备日', class: 'ui-select-li-one-act', bg: '#ffeedb', type: 0, day: 0 },
|
||
{ name: '清洁日', class: 'ui-select-li-two-act', bg: '#e2fcee', type: 2, day: 0 },
|
||
{ name: '装修日', class: 'ui-select-li-three-act', bg: '#edeaff', type: 1, day: 0 },
|
||
]);
|
||
const typeData = ref<any>(typeList.value[0]);
|
||
const typeIndex = ref<any>(0);
|
||
const selectList = ref<any[]>([]);
|
||
const signInList = ref<any[]>([]); // 日历日期
|
||
const weekList = ref<any[]>(['日', '一', '二', '三', '四', '五', '六']);
|
||
const currentDate = ref<any>(''); // 当前时间
|
||
const year = ref<any>(''); // 年
|
||
const day = ref<any>(''); // 天
|
||
const month = ref<any>(''); // 月份
|
||
const date = ref<any>(''); // 日期
|
||
const nbsp = ref<any>([]); // 空格
|
||
|
||
// 获取每日食谱所需数据
|
||
const getRecipe = () => {
|
||
signInList.value = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
|
||
if (!loading.value) {
|
||
loading.value = true;
|
||
weChat({ url: `/h5/user/guides?date=${year.value}-${month.value}&chat_id=${userStore.chatId}&is_im=1&role=1`, method: 'get' })
|
||
.then((res) => {
|
||
const result = res.data;
|
||
signInList.value = result.date_arr;
|
||
schemeStatus.value = result.scheme_status;
|
||
isAudit.value = result.template_is_check;
|
||
if (result.guides && result.guides.length > 0) {
|
||
result.guides.forEach((item) => {
|
||
JSON.parse(
|
||
JSON.stringify(
|
||
selectList.value.push({
|
||
date: item.phase_date,
|
||
type: item.phase_title == '准备日' ? 0 : item.phase_title == '装修日' ? 1 : 2,
|
||
}),
|
||
),
|
||
);
|
||
signInList.value.forEach((j, index) => {
|
||
if (item.phase_date) {
|
||
if (index == item.phase_date.split('-')[2] * 1 - 1) {
|
||
if (item.phase_title == '准备日') {
|
||
signInList.value[index] = 1;
|
||
} else if (item.phase_title == '装修日') {
|
||
signInList.value[index] = 3;
|
||
} else if (item.phase_title == '清洁日') {
|
||
signInList.value[index] = 4;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
});
|
||
}
|
||
let arr = selectList.value.map((item) => {
|
||
return item.date;
|
||
});
|
||
selectList.value = selectList.value.filter((item, index) => {
|
||
return arr.indexOf(item.date) == index;
|
||
});
|
||
loading.value = false;
|
||
})
|
||
.catch((err) => {
|
||
loading.value = false;
|
||
console.log(err);
|
||
});
|
||
}
|
||
};
|
||
|
||
const getSettings = () => {
|
||
weChat({ url: `/h5/user/guides?date=${year.value}-${month.value}&chat_id=${userStore.chatId}&is_im=1&role=1`, hideLoading: true, method: 'get' })
|
||
.then((res) => {
|
||
const result = res.data;
|
||
typeList.value[0].day = result.prepare_count;
|
||
typeList.value[1].day = result.clean_count;
|
||
typeList.value[2].day = result.trim_count;
|
||
typeData.value = typeList.value[typeIndex.value];
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
});
|
||
};
|
||
|
||
const addMenuAffirm = (state) => {
|
||
let m = month.value > 9 ? month.value : `0${month.value}`;
|
||
let date = `${year.value}-${m}`;
|
||
let data = {
|
||
chat_id: userStore.chatId,
|
||
guide_arr: selectList.value,
|
||
month: date,
|
||
is_send: isEdit.value ? state : 0,
|
||
};
|
||
if (throttle.value) {
|
||
throttle.value = false;
|
||
if (state) {
|
||
showLoadingToast('保存中...');
|
||
}
|
||
weChat({ url: `h5/batch/set/user/guide`, data, hideLoading: true, method: 'post' })
|
||
.then(() => {
|
||
throttle.value = true;
|
||
if (state) {
|
||
showToast('保存成功');
|
||
isEdit.value = false;
|
||
}
|
||
getSettings();
|
||
})
|
||
.catch((err) => {
|
||
throttle.value = true;
|
||
console.log(err);
|
||
});
|
||
}
|
||
};
|
||
|
||
// 初始化日期
|
||
const initCalendar = () => {
|
||
currentDate.value = new Date(); // 本地时间
|
||
year.value = currentDate.value.getFullYear(); // 年
|
||
month.value = currentDate.value.getMonth() + 1; // 月
|
||
date.value = currentDate.value.getDate(); // 今日
|
||
day.value = currentDate.value.getDay() + 1; // 天
|
||
let store = `${year.value}-${month.value}-01`;
|
||
day.value = new Date(store.replace(/-/g, '/')).getDay(); // 当前月份1号在星期几
|
||
if (day.value == 0) {
|
||
nbsp.value = 0;
|
||
} else {
|
||
nbsp.value = day.value;
|
||
}
|
||
getRecipe();
|
||
getSettings();
|
||
};
|
||
|
||
// 上一月
|
||
const upMonth = () => {
|
||
if (loading.value) {
|
||
showToast('操作频率过快');
|
||
return;
|
||
}
|
||
year.value = month.value < 2 ? year.value - 1 : year.value;
|
||
month.value = month.value < 2 ? 12 : month.value - 1;
|
||
currentDate.value = new Date(year.value, month.value - 1, date.value);
|
||
let store = `${year.value}-${month.value}-01`;
|
||
day.value = new Date(store.replace(/-/g, '/')).getDay(); // 当前月份1号在星期几
|
||
if (day.value == 0) {
|
||
nbsp.value = 0;
|
||
} else {
|
||
nbsp.value = day.value;
|
||
}
|
||
getRecipe();
|
||
getSettings();
|
||
};
|
||
|
||
// 下一月
|
||
const nextMonth = () => {
|
||
if (loading.value) {
|
||
showToast('操作频率过快');
|
||
return;
|
||
}
|
||
year.value = month.value > 11 ? year.value + 1 : year.value;
|
||
month.value = month.value > 11 ? 1 : month.value + 1;
|
||
currentDate.value = new Date(year.value, month.value - 1, date.value);
|
||
day.value = currentDate.value.getDay() + 1;
|
||
let store = `${year.value}-${month.value}-01`;
|
||
day.value = new Date(store.replace(/-/g, '/')).getDay(); // 当前月份1号在星期几
|
||
if (day.value == 0) {
|
||
nbsp.value = 0;
|
||
} else {
|
||
nbsp.value = day.value;
|
||
}
|
||
getRecipe();
|
||
getSettings();
|
||
};
|
||
|
||
// 选择日期获取对应餐单
|
||
const getMenu = (item, index) => {
|
||
let m = month.value > 9 ? month.value : `0${month.value}`;
|
||
console.log(month.value, '-==');
|
||
let d = index > 9 ? index : `0${index}`;
|
||
let t = `${year.value}-${m}-${d}`;
|
||
// 选择相同日期并且类型相同时取消选中
|
||
if ((signInList.value[index - 1] == 1 || signInList.value[index - 1] == 2) && typeIndex.value == 0) {
|
||
signInList.value[index - 1] = 0;
|
||
} else if (signInList.value[index - 1] == 3 && typeIndex.value == 2) {
|
||
signInList.value[index - 1] = 0;
|
||
} else if (signInList.value[index - 1] == 4 && typeIndex.value == 1) {
|
||
signInList.value[index - 1] = 0;
|
||
} else {
|
||
if (typeIndex.value == 0) {
|
||
signInList.value[index - 1] = 1;
|
||
} else if (typeIndex.value == 1) {
|
||
signInList.value[index - 1] = 4;
|
||
} else {
|
||
signInList.value[index - 1] = 3;
|
||
}
|
||
let state = false;
|
||
// 选中已有的日期时，不同类型直接更改已有数据类型
|
||
selectList.value.forEach((item, idx) => {
|
||
if (item.date == t) {
|
||
state = true;
|
||
selectList.value[idx] = { date: t, type: typeIndex.value == 0 ? typeIndex.value : typeIndex.value == 1 ? 2 : 1 };
|
||
}
|
||
});
|
||
// 选中已没有的日期时，新增数据
|
||
if (!state) {
|
||
selectList.value.push({ date: t, type: typeIndex.value == 0 ? typeIndex.value : typeIndex.value == 1 ? 2 : 1 });
|
||
}
|
||
if (item != signInList.value[index - 1]) {
|
||
isEdit.value = true;
|
||
}
|
||
addMenuAffirm(0);
|
||
return;
|
||
}
|
||
if (item != signInList.value[index - 1]) {
|
||
isEdit.value = true;
|
||
}
|
||
// 选择相同日期并且类型相同时去除数据
|
||
selectList.value.forEach((item, index) => {
|
||
if (item.date == t) {
|
||
selectList.value.splice(index, 1);
|
||
}
|
||
});
|
||
addMenuAffirm(0);
|
||
};
|
||
|
||
const changeType = (e, index) => {
|
||
typeData.value = e;
|
||
typeIndex.value = index;
|
||
};
|
||
|
||
// 查看历史记录
|
||
const showCheck = ref(false);
|
||
const toCheckList = () => {
|
||
showCheck.value = true;
|
||
};
|
||
|
||
const modelText = ref('');
|
||
const modeDate = ref('');
|
||
const showChange = ref(false); // 展示确认弹窗
|
||
const handleDateChange = (e, e2) => {
|
||
console.log(e, 'e1--');
|
||
modeDate.value = e;
|
||
modelText.value = e2;
|
||
};
|
||
const handleModeChange = (e, e2) => {
|
||
console.log(e, 'e2--');
|
||
modelText.value = e;
|
||
modeDate.value = e2;
|
||
};
|
||
const addMenuModal = () => {
|
||
showChange.value = true;
|
||
};
|
||
const modalSave = async () => {
|
||
if (!modelText.value) {
|
||
showToast('请选择模式');
|
||
return;
|
||
}
|
||
if (!modeDate.value) {
|
||
showToast('请选择日期');
|
||
return;
|
||
}
|
||
let data = {
|
||
model: modelText.value == '减肥型' ? 1 : 2,
|
||
start_date: modeDate.value,
|
||
service_user_id: userStore.serviceUserId - 0,
|
||
};
|
||
console.log(data, 'd===');
|
||
let res = await requestGo({ url: `app/server/model/set/guide?chat_id=${userStore.chatId}`, method: 'post', data });
|
||
if (res.code == 0) {
|
||
showSuccessToast('修改成功');
|
||
showChange.value = false;
|
||
initCalendar();
|
||
}
|
||
};
|
||
|
||
const topDetail = ref();
|
||
const operatorList = ref([]);
|
||
|
||
const getUserDetail = async () => {
|
||
let res = await requestGo({ url: `app/server/model/guide/info?chat_id=${userStore.chatId}` });
|
||
topDetail.value = res.data;
|
||
};
|
||
|
||
const getOperatorList = async () => {
|
||
let res = await requestGo({ url: `app/server/model/guide/log?chat_id=${userStore.chatId}` });
|
||
console.log(res, 'rrr===');
|
||
operatorList.value = res.data;
|
||
};
|
||
|
||
onMounted(() => {
|
||
let route = router.currentRoute.value.query;
|
||
if (role.value) {
|
||
role.value.split(',').forEach((item) => {
|
||
if (item == '1') {
|
||
chiefCoach.value = true;
|
||
}
|
||
if (item == '2') {
|
||
viceCoach.value = true;
|
||
}
|
||
if (item == '3') {
|
||
service.value = true;
|
||
}
|
||
});
|
||
}
|
||
if (route.chat_id) {
|
||
userStore.chatId = route.chat_id;
|
||
}
|
||
initCalendar();
|
||
getUserDetail();
|
||
getOperatorList();
|
||
});
|
||
</script>
|
||
<style lang="scss">
|
||
.ui-appUserMenuAll {
|
||
.van-popup {
|
||
overflow-y: initial;
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.ui-appUserMenuAll {
|
||
background: #ffffff;
|
||
overflow-y: auto;
|
||
height: 100vh;
|
||
}
|
||
|
||
.ui-menu-hint {
|
||
background: #f8f8f8;
|
||
}
|
||
|
||
.ui-menu-date-box {
|
||
padding: px2rem(32) 0 px2rem(260) 0;
|
||
background: #ffffff;
|
||
|
||
.ui-select-box {
|
||
.ui-select-item {
|
||
width: px2rem(236);
|
||
height: px2rem(198);
|
||
border-radius: px2rem(28) px2rem(92) px2rem(28) px2rem(28);
|
||
background: #ffffff;
|
||
|
||
.ui-select-li {
|
||
width: px2rem(196);
|
||
height: px2rem(160);
|
||
border-radius: px2rem(20) px2rem(72) px2rem(20) px2rem(20);
|
||
|
||
.ui-select-icon {
|
||
width: px2rem(36);
|
||
height: px2rem(36);
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
}
|
||
}
|
||
|
||
.ui-select-li-one {
|
||
background: #ffa949;
|
||
}
|
||
|
||
.ui-select-li-two {
|
||
background: #18ca6e;
|
||
}
|
||
|
||
.ui-select-li-three {
|
||
background: #9679ff;
|
||
}
|
||
|
||
.ui-select-li-one-act:before {
|
||
content: '';
|
||
width: 0;
|
||
height: 0;
|
||
position: absolute;
|
||
bottom: px2rem(-26);
|
||
left: 50%;
|
||
transform: translate(-50%);
|
||
border-top: solid px2rem(14) #ffa949;
|
||
border-left: solid px2rem(14) transparent;
|
||
border-right: solid px2rem(14) transparent;
|
||
border-bottom: solid px2rem(14) transparent;
|
||
}
|
||
|
||
.ui-select-li-two-act:before {
|
||
content: '';
|
||
width: 0;
|
||
height: 0;
|
||
position: absolute;
|
||
bottom: px2rem(-26);
|
||
left: 50%;
|
||
transform: translate(-50%);
|
||
border-top: solid px2rem(14) #18ca6e;
|
||
border-left: solid px2rem(14) transparent;
|
||
border-right: solid px2rem(14) transparent;
|
||
border-bottom: solid px2rem(14) transparent;
|
||
}
|
||
|
||
.ui-select-li-three-act:before {
|
||
content: '';
|
||
width: 0;
|
||
height: 0;
|
||
position: absolute;
|
||
bottom: px2rem(-26);
|
||
left: 50%;
|
||
transform: translate(-50%);
|
||
border-top: solid px2rem(14) #9679ff;
|
||
border-left: solid px2rem(14) transparent;
|
||
border-right: solid px2rem(14) transparent;
|
||
border-bottom: solid px2rem(14) transparent;
|
||
}
|
||
}
|
||
}
|
||
|
||
.ui-title {
|
||
color: #fdae18;
|
||
}
|
||
|
||
.ui-title-v2 {
|
||
color: #148a5f;
|
||
}
|
||
|
||
.ui-title-v3 {
|
||
color: #00c897;
|
||
}
|
||
|
||
.ui-calendar-box {
|
||
height: 100%;
|
||
padding: 0 px2rem(30);
|
||
background: #ffffff;
|
||
border-radius: px2rem(24) px2rem(24) 0 0;
|
||
margin-top: px2rem(40);
|
||
|
||
.ui-calendar-date {
|
||
background: linear-gradient(to bottom, #f8f8f8 0%, #ffffff 100%);
|
||
height: px2rem(174);
|
||
border-radius: px2rem(32) px2rem(32) 0 0;
|
||
margin: px2rem(20) 0 px2rem(40) 0;
|
||
|
||
.calendar_title {
|
||
padding: 0 px2rem(20);
|
||
height: px2rem(94);
|
||
|
||
.triangle_icon,
|
||
.triangle_icon_v2 {
|
||
width: px2rem(54);
|
||
height: px2rem(54);
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.week_box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
padding-top: px2rem(40);
|
||
|
||
.week_num {
|
||
width: 14.2%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.calendar_day {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
|
||
.day_number {
|
||
width: 14.2%;
|
||
padding-bottom: px2rem(20);
|
||
|
||
.number_box {
|
||
width: px2rem(76);
|
||
height: px2rem(88);
|
||
border-radius: px2rem(12);
|
||
background: #ffffff;
|
||
margin: 0 auto;
|
||
|
||
.ui-text-pt {
|
||
padding-top: px2rem(2);
|
||
}
|
||
}
|
||
|
||
.menu {
|
||
color: #ffa949;
|
||
background: #ffeedb;
|
||
}
|
||
|
||
.menuV2 {
|
||
color: #8670ff;
|
||
background: #f3f1ff;
|
||
}
|
||
|
||
.menuV3 {
|
||
color: #18ca6e;
|
||
background: #e2fcee;
|
||
}
|
||
}
|
||
}
|
||
|
||
.calendar_day:after {
|
||
content: '';
|
||
flex: auto;
|
||
}
|
||
}
|
||
}
|
||
|
||
.ui-save-btn {
|
||
width: px2rem(686);
|
||
height: px2rem(100);
|
||
border-radius: px2rem(50);
|
||
background: #18ca6e;
|
||
}
|
||
.ui-btn-box {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: -webkit-fill-available;
|
||
display: flex;
|
||
padding: 10px 10px 30px 10px;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 10px;
|
||
background: #fff;
|
||
}
|
||
.ui-save-list {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
color: #66676c;
|
||
font-size: 14px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: normal;
|
||
}
|
||
|
||
.menu-setting-change-modal {
|
||
width: 284px;
|
||
padding-top: 26px;
|
||
gap: 20px;
|
||
border-radius: 16px;
|
||
background: #fff;
|
||
backdrop-filter: blur(18px);
|
||
|
||
.menu-setting-change-m-title {
|
||
margin-bottom: 12px;
|
||
text-align: center;
|
||
color: #0e0e0e;
|
||
font-size: 18px;
|
||
font-style: normal;
|
||
font-weight: bold;
|
||
line-height: normal;
|
||
}
|
||
.menu-setting-change-m-sub {
|
||
padding: 0 12px 20px;
|
||
color: #0e0e0e;
|
||
text-align: justify;
|
||
font-size: 15px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: 25px;
|
||
}
|
||
.ui-examine-box {
|
||
height: 50px; /* 原px2rem(100) */
|
||
border-top: 1px solid #eeeeee; /* 原px2rem(2) */
|
||
font-size: 16px;
|
||
|
||
.ui-examine-btn {
|
||
position: relative;
|
||
width: 50%;
|
||
}
|
||
|
||
.ui-examine-btn:after {
|
||
content: '';
|
||
position: absolute;
|
||
right: 0;
|
||
width: 1px; /* 原px2rem(2) */
|
||
height: 50px; /* 原px2rem(100) */
|
||
background: #eeeeee;
|
||
}
|
||
.ui-examine-btn-v2 {
|
||
width: 50%;
|
||
color: #16ca6e;
|
||
}
|
||
|
||
.ui-examine-btn-v3 {
|
||
width: 50%;
|
||
color: #ff2946;
|
||
}
|
||
}
|
||
}
|
||
|
||
.menu-setting-change-modal-v2 {
|
||
position: relative;
|
||
display: flex;
|
||
padding: 26px 20px;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 284px;
|
||
|
||
.menu-setting-change-m-title {
|
||
margin-bottom: 12px;
|
||
color: #0e0e0e;
|
||
font-size: 18px;
|
||
font-style: normal;
|
||
font-weight: 600;
|
||
line-height: normal;
|
||
}
|
||
.menu-setting-change-m-big-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
width: 100%;
|
||
gap: 16px;
|
||
max-height: 400px;
|
||
overflow-y: scroll;
|
||
}
|
||
.menu-setting-change-m-card {
|
||
display: flex;
|
||
padding: 16px;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 6px;
|
||
align-self: stretch;
|
||
border-radius: 10px;
|
||
border: 0.3px solid #ddd;
|
||
.menu-setting-change-m-c-title {
|
||
color: #0e0e0e;
|
||
font-size: 16px;
|
||
font-style: normal;
|
||
font-weight: 600;
|
||
line-height: normal;
|
||
}
|
||
.menu-setting-change-m-c-operator {
|
||
color: #66676c;
|
||
font-size: 14px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.close-box {
|
||
position: absolute;
|
||
bottom: -40px;
|
||
left: 50%;
|
||
transform: translate(-50%);
|
||
}
|
||
</style>
|