diff --git a/pages.json b/pages.json index 26448cf..f6196c9 100644 --- a/pages.json +++ b/pages.json @@ -197,6 +197,12 @@ "navigationBarBackgroundColor": "#FFFFFF", "navigationStyle": "custom" } + },{ + "path": "clientservedetail/clientservedetail", + "style": { + "navigationBarTitleText": "问题详情", + "navigationBarBackgroundColor": "#f5f5f5" + } },{ "path": "feedback/feedback", "style": { diff --git a/pages/index/index.vue b/pages/index/index.vue index f269a6d..3e4193b 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -37,7 +37,7 @@ - + @@ -100,7 +100,7 @@ - + @@ -274,7 +274,7 @@ - + 3 @@ -337,6 +337,11 @@ const goAssList=()=>{ url:`/order/assList/assList` }) } +const goCarts=()=>{ + uni.switchTab({ + url:`/pages/cart/cart` + }) +} onLoad((options) => { }); diff --git a/static/Intersect@2x.jpg b/static/Intersect@2x.jpg new file mode 100644 index 0000000..ead8180 Binary files /dev/null and b/static/Intersect@2x.jpg differ diff --git a/static/Intersect@2x.png b/static/Intersect@2x.png deleted file mode 100644 index 80ca6cb..0000000 Binary files a/static/Intersect@2x.png and /dev/null differ diff --git a/static/image@2x.jpg b/static/image@2x.jpg new file mode 100644 index 0000000..526160d Binary files /dev/null and b/static/image@2x.jpg differ diff --git a/static/image@2x.png b/static/image@2x.png deleted file mode 100644 index e27d84a..0000000 Binary files a/static/image@2x.png and /dev/null differ diff --git a/static/sidedish/banner.jpg b/static/sidedish/banner.jpg index eec8276..d108f93 100644 Binary files a/static/sidedish/banner.jpg and b/static/sidedish/banner.jpg differ diff --git a/static/userserve/197.png b/static/userserve/197.png new file mode 100644 index 0000000..cc4b85c Binary files /dev/null and b/static/userserve/197.png differ diff --git a/userserve/aiserve/aiserve.vue b/userserve/aiserve/aiserve.vue index 1be0c00..446882b 100644 --- a/userserve/aiserve/aiserve.vue +++ b/userserve/aiserve/aiserve.vue @@ -1,6 +1,72 @@ @@ -12,9 +78,161 @@ import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } fr const counterStore = useCounterStore(); // 使用 Store const { proxy } = getCurrentInstance(); //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新) -const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore); -onLoad((options) => {}); +const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore); +const headShow = ref(false); +const showBack = ref(false); +const pageWidth = ref(0); +const opacity = ref(1); +const timeImg = ref(''); +const danmuList = ref([]) +// 获取页面宽度 +const updatePageWidth = () => { + const systemInfo = uni.getSystemInfoSync(); + pageWidth.value = systemInfo.windowWidth; +}; +const searchWidth = computed(() => { + return pageWidth.value - statusHeight.value - ButtonWidth.value - 35; +}); +// 判断是否有上一页 +const getPages = () => { + const pages = getCurrentPages(); + return pages.length > 1; +}; +const handleBack = () => { + if (getPages()) { + // 如果有上一页，返回上一页 + uni.navigateBack(); + } else { + // 如果没有上一页，返回首页 + uni.switchTab({ + url: '/pages/index/index', + }); + } +}; +const detail=()=>{ + uni.navigateTo({ + url:`/userserve/clientservedetail/clientservedetail` + }) +}; +const timeFun=()=>{ + // 获取当前时间 + const now = new Date(); + // 获取当前小时数（24 小时制） + const hour = now.getHours(); + // 判断时间段 + let timePeriod; + if (hour >= 0 && hour < 6) { + timePeriod = '../../static/userserve/evening.png';//'凌晨'; + } else if (hour >= 6 && hour < 9) { + timePeriod = '../../static/userserve/morning.png';//'早上'; + } else if (hour >= 9 && hour < 12) { + timePeriod = '../../static/userserve/morning.png';//'上午'; + } else if (hour === 12) { + timePeriod = '../../static/userserve/lunchtime.png';//'中午'; + } else if (hour > 12 && hour < 18) { + timePeriod = '../../static/userserve/Afternoon.png';//'下午'; + } else if (hour >= 18 && hour < 24) { + timePeriod = '../../static/userserve/evening.png';//晚上 + } else { + timePeriod = '未知时间段'; + } + timeImg.value = timePeriod; +} +const sendDanmu =()=> { + // 生成弹幕数据 + const danmu = [ + { + id: 1, // 唯一 ID + text: '肉的做法', // 弹幕文本 + top: Math.random(), // 随机 top 值（控制弹幕位置） + duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒） + }, + { + id:2, // 唯一 ID + text: '番茄滑肉煲｜肉片超级嫩滑！天冷来上一锅太暖了', // 弹幕文本 + top: Math.random() * 50, // 随机 top 值（控制弹幕位置） + duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒） + }, + { + id:3, // 唯一 ID + text: '蚂蚁上树——肉末粉条的完美结合', // 弹幕文本 + top: Math.random() * 100, // 随机 top 值（控制弹幕位置） + duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒） + }, + { + id:3, // 唯一 ID + text: '水煮肉片（肯定不翻车）', // 弹幕文本 + top: Math.random() * 150, // 随机 top 值（控制弹幕位置） + duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒） + }, + { + id:4, // 唯一 ID + text: '香菜拌牛肉', // 弹幕文本 + top: Math.random() * 200, // 随机 top 值（控制弹幕位置） + duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒） + }, + { + id:5, // 唯一 ID + text: '香煎五花肉', // 弹幕文本 + top: Math.random() * 250, // 随机 top 值（控制弹幕位置） + duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒） + }, + { + id:6, // 唯一 ID + text: '东北溜肉段（酸甜口，极简版）', // 弹幕文本 + top: Math.random() * 300, // 随机 top 值（控制弹幕位置） + duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒） + }, + { + id:7, // 唯一 ID + text: '绝绝子！甩饭店几条街的粉蒸肉（粉蒸排骨）', // 弹幕文本 + top: Math.random() * 350, // 随机 top 值（控制弹幕位置） + duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒） + }, + { + id:8, // 唯一 ID + text: '孩子爱吃的蒸肉饼', // 弹幕文本 + top: Math.random() * 400, // 随机 top 值（控制弹幕位置） + duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒） + }, + { + id:9, // 唯一 ID + text: '又香又嫩的小炒牛肉（巨好吃，手残党也能做）', // 弹幕文本 + top: Math.random() * 450, // 随机 top 值（控制弹幕位置） + duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒） + }, + { + id:10, // 唯一 ID + text: '湖南农家小炒肉', // 弹幕文本 + top: Math.random() * 500, // 随机 top 值（控制弹幕位置） + duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒） + } + ]; + // 添加到弹幕列表 + danmuList.value = (danmu); +} +onLoad((options) => { + //初始化时判断是否显示返回按钮 + showBack.value = getPages(); + updatePageWidth(); + timeFun(); + sendDanmu(); +}); onShow(() => {}); +onPageScroll((e)=>{ + const top = e.scrollTop; + // 导航条颜色透明渐变 + if (top <= 50) { + headShow.value = false + } else { + if( 50 < top && top <= 200 ){ + opacity.value = top / 200 + }else{ + opacity.value = 1 + } + headShow.value = true + } +}), onReady(()=>{}) onPullDownRefresh(()=>{}) onReachBottom(()=>{}) diff --git a/userserve/aiserve/style.scss b/userserve/aiserve/style.scss index d9599b7..969a0aa 100644 --- a/userserve/aiserve/style.scss +++ b/userserve/aiserve/style.scss @@ -2,5 +2,191 @@ page{ background-color: #f6f6f6; } .main{ - -} \ No newline at end of file + background: url(https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/user_bcg.png) #f6f6f6; + background-repeat: no-repeat; + background-size: 100%; + .head{ + position: fixed; + z-index: 100; + width: 100%; + top: 0; + left: 0; + padding-bottom: 10px; + display: flex; + align-items: center; + .head_cont{ + position: relative; + .head_back{ + display: flex; + align-items: center; + background: rgba(255,255,255,.6); + border: 1rpx solid rgba(0,0,0,.1); + border-radius: 50rpx; + margin-left: 10px; + position: absolute; + z-index: 2; + .head_back_img{ + display: block; + width: 16px; + height: 16px; + margin-left: 7px; + } + } + .head_title{ + position: absolute; + z-index: 1; + font-size: 30rpx; + color: '#000000'; + display: flex; + align-items: center; + font-weight: 500; + justify-content: center; + } + } + + } + .head_show{ + background-color: #FFFFFF; + border-bottom: 1rpx solid #f6f6f6; + } + .content{ + .content_greetings{ + margin: 38rpx 50rpx; + display: flex; + justify-content: space-between; + .content_greetings_l{ + .content_greetings_img{ + width: 317rpx; + height: 64rpx; + display: block; + margin-top: 10rpx; + } + .content_greetings_btn{ + margin-top: 32rpx; + width: 226rpx; + height: 69rpx; + background: #4B5CBA; + box-shadow: inset 0rpx 4rpx 4rpx 0rpx rgba(35,56,172,0.6), inset 0rpx -4rpx 4rpx 0rpx rgba(35,56,172,0.6), 4rpx 4rpx 20rpx 0rpx #95A6FF; + border-radius: 35rpx; + display: flex; + align-items: center; + justify-content: center; + -webkit-animation: 3s scaleDr ease-in-out infinite; + animation: 3s scaleDr ease-in-out infinite; + .content_greetings_btnimg{ + width: 28rpx; + height: 28rpx; + margin-right: 10rpx; + } + .content_greetings_text{ + font-size: 30rpx; + color: #FFFFFF; + } + } + } + .content_greetings_r{ + width: 210rpx; + height: 210rpx; + -webkit-animation: 3s scaleDr ease-in-out infinite; + animation: 3s scaleDr ease-in-out infinite; + } + } + .content_hot{ + margin: -30rpx 20rpx 20rpx 20rpx; + padding: 0rpx 30rpx 30rpx 30rpx; + background-color: #FFFFFF; + border-radius: 16rpx; + box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05); + position: relative; + .content_hot_title{ + font-size: 30rpx; + font-weight: 500; + color: #000; + padding:30rpx 0; + } + .content_hot_danmu{ + width: 100%; + height: 200rpx; + position: relative; + flex: 1; + overflow: hidden; + .content_hot_danmu_li{ + padding: 6rpx 20rpx; + border-radius: 30rpx; + border: 1rpx solid #D9D9D9; + font-size: 28rpx; + color: #707070; + // display: inline-block; + position: absolute; + white-space: nowrap; + animation: danmu-scroll linear infinite; + background-color: #FFFFFF; + .content_hot_danmu_liimg{ + width: 28rpx; + height: 28rpx; + border-radius: 50rpx; + margin-right: 10rpx; + vertical-align: middle; + display: inline-block; + } + .content_hot_danmu_li_text{ + display: inline-block; + vertical-align: middle; + } + } + } + } + .content_list{ + margin: 30rpx 20rpx 20rpx 20rpx; + padding: 25rpx 40rpx 25rpx 40rpx; + background-color: #FFFFFF; + border-radius: 16rpx; + box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05); + display: flex; + align-items: center; + justify-content: space-between; + .content_list_img{ + width: 100rpx; + height: 100rpx; + border-radius: 50rpx; + } + .content_list_script{ + width: 500rpx; + .content_list_title{ + font-size: 28rpx; + font-weight: 500; + color: #333333 + } + .content_list_desc{ + margin-top: 8rpx; + color: #999999; + font-size: 26rpx; + } + } + } + + } + +} + @keyframes scaleDr{ + 0% { + transform: scale(0.98); + } + 25% { + transform: scale(1.05); + } + 50% { + transform: scale(1); + } + 75% { + transform: scale(1.05); + } + } + @keyframes danmu-scroll { + from { + transform: translateX(300%); + } + to { + transform: translateX(-100%); + } + } \ No newline at end of file diff --git a/userserve/clientserve/clientserve.vue b/userserve/clientserve/clientserve.vue index f6e06ba..4ca37e3 100644 --- a/userserve/clientserve/clientserve.vue +++ b/userserve/clientserve/clientserve.vue @@ -1,12 +1,96 @@ @@ -22,6 +106,7 @@ const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = store const headShow = ref(false); const showBack = ref(false); const pageWidth = ref(0); +const opacity = ref(1); // 获取页面宽度 const updatePageWidth = () => { const systemInfo = uni.getSystemInfoSync(); @@ -46,6 +131,11 @@ const handleBack = () => { }); } }; +const detail=()=>{ + uni.navigateTo({ + url:`/userserve/clientservedetail/clientservedetail` + }) +}; onLoad((options) => { //初始化时判断是否显示返回按钮 showBack.value = getPages(); diff --git a/userserve/clientserve/style.scss b/userserve/clientserve/style.scss index 303ade2..46645f9 100644 --- a/userserve/clientserve/style.scss +++ b/userserve/clientserve/style.scss @@ -14,32 +14,34 @@ page{ padding-bottom: 10px; display: flex; align-items: center; - .head_back{ - display: flex; - align-items: center; - background: rgba(255,255,255,.6); - border: 1rpx solid rgba(0,0,0,.1); - border-radius: 50rpx; - margin-left: 10px; - position: absolute; - left: 10px; - z-index: 2; - .head_back_img{ - display: block; - width: 16px; - height: 16px; - margin-left: 7px; + .head_cont{ + position: relative; + .head_back{ + display: flex; + align-items: center; + background: rgba(255,255,255,.6); + border: 1rpx solid rgba(0,0,0,.1); + border-radius: 50rpx; + margin-left: 10px; + position: absolute; + z-index: 2; + .head_back_img{ + display: block; + width: 16px; + height: 16px; + margin-left: 7px; + } + } + .head_title{ + position: absolute; + z-index: 1; + font-size: 30rpx; + color: '#000000'; + display: flex; + align-items: center; + font-weight: 500; + justify-content: center; } - } - .head_title{ - position: absolute; - z-index: 1; - font-size: 34rpx; - color: '#000000'; - display: flex; - align-items: center; - font-weight: 500; - justify-content: center; } } @@ -47,4 +49,215 @@ page{ background-color: #FFFFFF; border-bottom: 1rpx solid #f6f6f6; } -} \ No newline at end of file + .content{ + .content_head{ + display: flex; + align-items: center; + padding-top: 20rpx; + .content_img{ + width: 180rpx; + height: 180rpx; + margin-left: 55rpx; + -webkit-animation: 3s scaleDr ease-in-out infinite; + animation: 3s scaleDr ease-in-out infinite; + } + .content_text{ + font-size: 32rpx; + color: #333333; + font-weight: 500; + margin-left: 40rpx; + } + } + .content_menu{ + display: flex; + align-items: center; + justify-content: space-between; + margin: 20rpx 20rpx 0rpx 20rpx; + background: #FFFFFF; + border-radius: 16rpx; + box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05); + .content_menu_item{ + width: 25%; + padding: 30rpx 0; + .content_menu_item_img{ + margin: 0 auto; + width: 77rpx; + height: 77rpx; + display: block; + -webkit-animation: 3s scaleDr ease-in-out infinite; + animation: 3s scaleDr ease-in-out i + } + .content_menu_item_title{ + font-size: 28rpx; + color: #000000; + text-align: center; + margin-top: 15rpx; + } + } + } + .content_help{ + margin: 20rpx 20rpx 0rpx 20rpx; + background: #FFFFFF; + border-radius: 16rpx; + padding:20rpx 20rpx 0rpx 20rpx; + box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05); + .content_search{ + display: flex; + align-items: center; + background-color: #F6F6F6; + height: 40px; + border-radius: 50rpx; + font-size: 28rpx; + color: #000000; + justify-content: space-between; + .content_search_img{ + width: 6%; + height: 6%; + margin-right: 13rpx; + display: block; + margin-left: 23rpx; + } + .content_search_input{ + width: 94%; + height: 100%; + font-size: 28rpx; + display: flex; + align-items: center; + } + } + .content_x{ + color: #000000; + font-size: 30rpx; + margin-top: 27rpx; + } + .class_scroll{ + white-space: nowrap; + height: 90rpx; + position: relative; + background-color: #FFFFFF; + border-top-left-radius: 30rpx; + border-top-right-radius: 30rpx; + position: sticky; + top: 0; + z-index: 999; + margin-top: 10rpx; + margin-bottom: 25rpx; + .class_scroll_ul{ + width: 100%; + overflow: hidden; + height: 90rpx; + .class_item{ + padding: 0rpx 20rpx; + height: 50rpx; + display: inline-block; + line-height: 50rpx; + font-size: 24rpx; + color: #999999; + margin-top: 15rpx; + background: #F6F6F6; + border: 1px solid #F6F6F6; + border-radius: 50rpx; + margin-right: 20rpx; + } + .class_item_active{ + background-color: #FCF0F2; + border-radius: 50rpx; + padding: 0rpx 20rpx; + color: #FF0000; + font-weight: 500; + border: 1px solid #FF0000; + } + } + } + .content_list{ + display: flex; + align-items: center; + justify-content: space-between; + border-top: 1rpx solid #D9D9D9; + padding: 30rpx 0; + .content_l{ + font-size: 28rpx; + color: #333333; + } + .content_r{ + position: relative; + margin-right: 20rpx; + } + .content_r::after { + content: ''; + position: absolute; + top: 50%; + left: 100%; + transform: translate3d(0, -50%, 0) rotate(45deg); + width: 13rpx; + height: 13rpx; + border-top: 3rpx solid #999999; + border-right: 3rpx solid #999999; + } + } + } + } + .footer{ + position: fixed; + left: 0; + right: 0; + bottom: 0; + z-index: 160; + background: #FFFFFF; + font-size: 30rpx; + padding-bottom: env(safe-area-inset-bottom); + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 20rpx; + padding-left: 20rpx; + padding-right: 20rpx; + border-top: 1rpx solid #efefef; + .footer_tel{ + width: 100rpx; + .footer_telimg{ + margin: 0 auto; + width: 42rpx; + height: 42rpx; + display: block; + -webkit-animation: 3s scaleDr ease-in-out infinite; + animation: 3s scaleDr ease-in-out i + } + .footer_tel_text{ + color: #666666; + font-size: 20rpx; + text-align: center; + margin-top: 10rpx; + } + } + .footer_btn{ + width: 553rpx; + height: 68rpx; + text-align: center; + line-height: 68rpx; + border-radius: 43rpx; + border: 1px solid #FD3F3F; + color: #FD3F3F; + font-size: 28rpx; + font-weight: 500; + .footer_btn_text{ + color: #999999; + font-size: 20rpx; + } + } + } +} + @keyframes scaleDr{ + 0% { + transform: scale(0.98); + } + 25% { + transform: scale(1.05); + } + 50% { + transform: scale(1); + } + 75% { + transform: scale(1.05); + } + } \ No newline at end of file diff --git a/userserve/clientservedetail/clientservedetail.vue b/userserve/clientservedetail/clientservedetail.vue new file mode 100644 index 0000000..e3657f3 --- /dev/null +++ b/userserve/clientservedetail/clientservedetail.vue @@ -0,0 +1,31 @@ + + + + + \ No newline at end of file diff --git a/userserve/clientservedetail/style.scss b/userserve/clientservedetail/style.scss new file mode 100644 index 0000000..c38eece --- /dev/null +++ b/userserve/clientservedetail/style.scss @@ -0,0 +1,20 @@ +page{ + background-color: #f5f5f5; +} +.main{ + margin: 20rpx; + background-color: #FFFFFF; + border-radius: 16rpx; + box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05); + padding: 40rpx 20rpx; + .main_title{ + font-size: 30rpx; + color: #333333; + font-weight: 500; + } + .main_detail{ + color: #999999; + font-size: 28rpx; + margin-top: 30rpx; + } +} \ No newline at end of file