kuangjunhua/TakeOutShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式调整

Browse Source
This commit is contained in:
邝军华 2025-03-08 23:54:59 +08:00
parent 702bf43059
commit 98291a4ab8
15 changed files with 212 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pages.json
View File

@ -20,7 +20,7 @@
{ {
"path": "pages/sidedish/sidedish", "path": "pages/sidedish/sidedish",
"style": { "style": {
"navigationBarTitleText": "帮你配", "navigationBarTitleText": "帮您配",
"navigationBarBackgroundColor": "#F6F6F6", "navigationBarBackgroundColor": "#F6F6F6",
"enablePullDownRefresh": true "enablePullDownRefresh": true
} }
@ -63,7 +63,7 @@
}, },
{ {
"pagePath": "pages/sidedish/sidedish", "pagePath": "pages/sidedish/sidedish",
"text": "帮你配", "text": "帮您配",
"iconPath": "static/tabBar/sidedish.png", "iconPath": "static/tabBar/sidedish.png",
"selectedIconPath": "static/tabBar/sidedish_active.png" "selectedIconPath": "static/tabBar/sidedish_active.png"
}, },

10
pages/cart/cart.vue
View File

@ -2,11 +2,7 @@
<view class="main"> <view class="main">
<!-- 头部区域 --> <!-- 头部区域 -->
<view class="head" :style="{'padding-top':headerHeight+'px'}"> <view class="head" :style="{'padding-top':headerHeight+'px'}">
<view class="head_location"> <view class="head_location head_location_active"><text class="location_title">东方体育中心</text></view>
<image class="location_img" src="../../static/index/location_active.png" mode="widthFix"></image>
<view class="location_title">上海体育中心</view>
<view class="location_arrow_down"></view>
</view>
<view class="head_ul"> <view class="head_ul">
<view class="head_l"> <view class="head_l">
<view class="head_q">购物车</view> <view class="head_q">购物车</view>
@ -308,10 +304,8 @@ import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值 import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app" import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
const counterStore = useCounterStore(); // 使用 Store const counterStore = useCounterStore(); // 使用 Store
const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height'])
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新) //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
//const { count,doubleCount } = storeToRefs(counterStore); const {statusHeight,headerHeight } = storeToRefs(counterStore);
const goDetail= ()=>{ const goDetail= ()=>{
uni.navigateTo({ uni.navigateTo({
url:`/shopProDetail/detail/detail` url:`/shopProDetail/detail/detail`

116
pages/cart/style.scss
View File

@ -14,26 +14,48 @@ page{
display: flex; display: flex;
align-items: center; align-items: center;
height: 45px; height: 45px;
.location_img{ position: relative;
width: 18px;
height: 18px;
margin: 0px 2px 0px 10px;
}
.location_title{ .location_title{
font-size: 28rpx; font-size: 28rpx;
color: #333333; color: #FFFFFF;
font-weight: 500; font-weight: 500;
vertical-align: middle;
display: inline-block;
} }
.location_arrow_down{ }
width: 0; .head_location::before{
height: 0; content: "";
border-left: 10rpx solid transparent; vertical-align: middle;
border-right: 10rpx solid transparent; display: inline-block;
border-top: 11rpx solid #333333; width: 21px;
margin-left: 2px; height: 21px;
margin-top: 1px; background-image: url('../../static/location.png');
background-size: cover;
margin: 0px 2px 0px 10px;
}
.head_location::after{
vertical-align: middle;
display: inline-block;
content: "";
width: 0;
height: 0;
border-left: 10rpx solid transparent;
border-right: 10rpx solid transparent;
border-top: 11rpx solid #FFFFFF;
margin-left: 3px;
margin-top: 1.5px;
}
.head_location_active{
.location_title{
color: #000000;
} }
} }
.head_location_active::before{
background-image: url('../../static/location_active.png');
}
.head_location_active::after{
border-top: 11rpx solid #000000;
}
.head_ul{ .head_ul{
display: flex; display: flex;
align-items: center; align-items: center;
@ -122,58 +144,6 @@ page{
font-size: 24rpx; font-size: 24rpx;
color: #FF2D41; color: #FF2D41;
} }
}
.cart_scroll{
width: 620rpx;
display: flex;
overflow: hidden;
white-space: nowrap;
.cart_scroll_ul{
.cart_scroll_li{
width: 180rpx;
display: inline-block;
margin-right: 20rpx;
.cart_scroll_img{
background: #FFFFFF;
border-radius: 4rpx;
border: 1rpx solid #F3F3F3;
width: 180rpx;
height: 180rpx;
overflow: hidden;
.cart_scroll_img_url{
width: 180rpx;
height: 180rpx;
display: block;
}
}
.cart_scroll_title{
color: #333333;
font-size: 26rpx;
font-weight: 500;
white-space: break-spaces;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
overflow-wrap: break-word;
margin-top: 20rpx;
}
.cart_scroll_price{
font-size: 34rpx;
color: #FF0000;
font-weight: 500;
margin-top: 20rpx;
}
.cart_scroll_market_name{
color: #999999;
font-size: 28rpx;
text-decoration: line-through;
font-weight: 400;
}
}
}
} }
} }
.cart_items{ .cart_items{
@ -212,7 +182,7 @@ page{
.cart_scroll_img{ .cart_scroll_img{
background: #FFFFFF; background: #FFFFFF;
border-radius: 10rpx; border-radius: 10rpx;
border: 1rpx solid #F3F3F3; // border: 1rpx solid #F3F3F3;
width: 180rpx; width: 180rpx;
height: 180rpx; height: 180rpx;
overflow: hidden; overflow: hidden;
@ -328,10 +298,6 @@ page{
} }
} }
} }
} }
.user_title{ .user_title{
display: flex; display: flex;
@ -369,7 +335,7 @@ page{
} }
// 商品区域样式 // 商品区域样式
.shop_view{ .shop_view{
margin-top: 48rpx; margin-top: 10rpx;
padding: 13rpx 20rpx 0rpx 20rpx; padding: 13rpx 20rpx 0rpx 20rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -535,7 +501,7 @@ page{
margin-right: 15rpx; margin-right: 15rpx;
} }
.footer_price{ .footer_price{
font-size: 43rpx; font-size: 38rpx;
color: #FF0000; color: #FF0000;
display: inline-block; display: inline-block;
font-weight: 500; font-weight: 500;
@ -561,10 +527,6 @@ page{
} }
} }
} }
.price::before { .price::before {
content: '¥'; content: '¥';
font-size: 24rpx; font-size: 24rpx;

5
pages/classify/classify.vue
View File

@ -3,7 +3,6 @@
<!-- 头部区域 --> <!-- 头部区域 -->
<view class="head" :style="{'padding-top':headerHeight+3+'px'}"> <view class="head" :style="{'padding-top':headerHeight+3+'px'}">
<view class="head_search"> <view class="head_search">
<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
<input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/> <input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/>
</view> </view>
<view class="head_class"> <view class="head_class">
@ -185,9 +184,7 @@ import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app" import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
const counterStore = useCounterStore(); // 使用 Store const counterStore = useCounterStore(); // 使用 Store
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新) //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
//const { count,doubleCount } = storeToRefs(counterStore); const {statusHeight,headerHeight } = storeToRefs(counterStore);
const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height'])
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
const ScrollLeft = ref(0); const ScrollLeft = ref(0);
const goDetail= ()=>{ const goDetail= ()=>{
uni.navigateTo({ uni.navigateTo({

18
pages/classify/style.scss
View File

@ -21,17 +21,21 @@ page{
font-size: 28rpx; font-size: 28rpx;
color: #000000; color: #000000;
justify-content: space-between; justify-content: space-between;
.head_search_img{
width: 23px;
height: 23px;
margin-left: 13px;
display: block;
}
.head_search_input{ .head_search_input{
width: 500rpx; width: 500rpx;
height: 100%; height: 100%;
margin-left: 10px; margin-left: 10px;
font-size: 26rpx; font-size: 28rpx;
display: flex;
align-items: center;
}
.head_search_input::before{
content: "";
background-image: url('../../static/search_img.png');
background-size: cover;
width: 20px;
height: 20px;
margin-right: 13rpx;
} }
} }
.head_class{ .head_class{

15
pages/index/index.vue
View File

@ -2,15 +2,9 @@
<view class="main"> <view class="main">
<!-- 头部区域 --> <!-- 头部区域 -->
<view class="head" :style="{'padding-top':headerHeight+'px'}"> <view class="head" :style="{'padding-top':headerHeight+'px'}">
<view class="head_location"> <view class="head_location head_location_active"><text class="location_title">东方体育中心</text></view>
<image class="location_img" src="../../static/index/location.png" mode="widthFix"></image> <view class="head_search">
<view class="location_title">未获取到定位</view>
<view class="location_arrow_down"></view>
</view>
<view class="head_search">
<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
<input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/> <input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/>
<view class="head_search_border"></view>
<view class="head_search_btn">搜索</view> <view class="head_search_btn">搜索</view>
</view> </view>
</view> </view>
@ -302,11 +296,10 @@ import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app" import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
const counterStore = useCounterStore(); // 使用 Store const counterStore = useCounterStore(); // 使用 Store
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新) //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
// const { count,doubleCount } = storeToRefs(counterStore); const {statusHeight,headerHeight } = storeToRefs(counterStore);
//使用pinia：方法还是从原来的counterStore中解构赋值 //使用pinia：方法还是从原来的counterStore中解构赋值
const { clickSType } = counterStore; const { clickSType } = counterStore;
const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height'])
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
const goDetail= ()=>{ const goDetail= ()=>{
uni.navigateTo({ uni.navigateTo({
url:`/shopProDetail/detail/detail` url:`/shopProDetail/detail/detail`

86
pages/index/style.scss
View File

@ -20,26 +20,48 @@ page{
display: flex; display: flex;
align-items: center; align-items: center;
height: 45px; height: 45px;
.location_img{ position: relative;
width: 18px;
height: 18px;
margin: 0px 2px 0px 10px;
}
.location_title{ .location_title{
vertical-align: middle;
display: inline-block;
font-size: 28rpx; font-size: 28rpx;
color: #FFFFFF; color: #FFFFFF;
font-weight: 500; font-weight: 500;
} }
.location_arrow_down{ }
width: 0; .head_location::before{
height: 0; content: "";
border-left: 10rpx solid transparent; vertical-align: middle;
border-right: 10rpx solid transparent; display: inline-block;
border-top: 11rpx solid #FFFFFF; width: 21px;
margin-left: 2px; height: 21px;
margin-top: 1px; background-image: url('../../static/location.png');
background-size: cover;
margin: 0px 2px 0px 10px;
}
.head_location::after{
vertical-align: middle;
display: inline-block;
content: "";
width: 0;
height: 0;
border-left: 10rpx solid transparent;
border-right: 10rpx solid transparent;
border-top: 11rpx solid #FFFFFF;
margin-left: 3px;
margin-top: 1.5px;
}
.head_location_active{
.location_title{
color: #000000;
} }
} }
.head_location_active::before{
background-image: url('../../static/location_active.png');
}
.head_location_active::after{
border-top: 11rpx solid #000000;
}
.head_search{ .head_search{
margin:0rpx 10px 0rpx 10px;; margin:0rpx 10px 0rpx 10px;;
display: flex; display: flex;
@ -50,22 +72,21 @@ page{
font-size: 28rpx; font-size: 28rpx;
color: #000000; color: #000000;
justify-content: space-between; justify-content: space-between;
.head_search_img{
width: 20px;
height: 20px;
margin-left: 13px;
display: block;
}
.head_search_input{ .head_search_input{
width: 500rpx; width: 560rpx;
height: 100%; height: 100%;
margin-left: 10px; margin-left: 10px;
font-size: 26rpx; font-size: 28rpx;
display: flex;
align-items: center;
} }
.head_search_border{ .head_search_input::before{
height: 15px; content: "";
width: 1px; background-image: url('../../static/search_img.png');
background-color: #D9D9D9; background-size: cover;
width: 20px;
height: 20px;
margin-right: 13rpx;
} }
.head_search_btn{ .head_search_btn{
width: 120rpx; width: 120rpx;
@ -74,6 +95,19 @@ page{
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.head_search_btn::before{
content: "";
width: 1rpx;
height: 60%;
background-color:#D9D9D9;
margin-right: 20rpx;
}
.head_search_btn::after{
content: "";
width: 1rpx;
height: 60%;
margin-left: 20rpx;
}
} }
} }
// 推荐区域样式 // 推荐区域样式
@ -439,7 +473,7 @@ page{
.footer_cont_m{ .footer_cont_m{
margin-left: 25rpx; margin-left: 25rpx;
.footer_cont_m_price{ .footer_cont_m_price{
font-size: 43rpx; font-size: 38rpx;
color: #FF0000; color: #FF0000;
font-weight: 500; font-weight: 500;
} }

2
pages/sidedish/sidedish.vue
View File

@ -24,7 +24,7 @@
<view class="content_head"> <view class="content_head">
<view class="content_head_l"> <view class="content_head_l">
<image class="content_head_img" src="../../static/sidedish/flame.png"></image> <image class="content_head_img" src="../../static/sidedish/flame.png"></image>
<view class="content_head_title">鲜花人气帮</view> <view class="content_head_title">鲜花人气榜</view>
</view> </view>
<view class="content_head_btn"> <view class="content_head_btn">
<image class="content_head_btnimg" src="../../static/sidedish/addCart.png"></image> <image class="content_head_btnimg" src="../../static/sidedish/addCart.png"></image>

8
pages/sidedish/style.scss
View File

@ -67,8 +67,8 @@ page{
display: flex; display: flex;
align-items: center; align-items: center;
.content_head_img{ .content_head_img{
width: 38rpx; width: 32rpx;
height: 38rpx; height: 32rpx;
display: block; display: block;
margin-right: 10rpx; margin-right: 10rpx;
} }
@ -155,10 +155,10 @@ page{
margin-top: 10rpx; margin-top: 10rpx;
.content_shop_item_l{ .content_shop_item_l{
.content_shop_item_price{ .content_shop_item_price{
font-size: 32rpx; font-size: 28rpx;
color: #FF0000; color: #FF0000;
font-weight: 500; font-weight: 500;
line-height: 38rpx; line-height: 35rpx;
} }
.content_shop_market{ .content_shop_market{
font-size: 23rpx; font-size: 23rpx;

2
pages/user/style.scss
View File

@ -184,7 +184,7 @@ page{
} }
// 商品区域样式 // 商品区域样式
.shop_view{ .shop_view{
margin-top: 48rpx; margin-top: 10rpx;
padding: 13rpx 20rpx 0rpx 20rpx; padding: 13rpx 20rpx 0rpx 20rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

33
shopProDetail/detail/detail.vue
View File

@ -1,5 +1,10 @@
<template> <template>
<view class="mian"> <view class="mian">
<view class="head_capsule" :style="{ top: statusBartop+'px' }">
<view v-if="showBack" @click="handleBack()" :class="showBack?'head_back':'head_home'" :style="{'width': statusHeight+'px','height':statusHeight+'px'}" >
<image :src="showBack?'https://zhkj1.oss-cn-shanghai.aliyuncs.com/newPD/zhBack.png':'https://zhkj1.oss-cn-shanghai.aliyuncs.com/newPD/backHome.png'" :class="showBack?'head_backimg':'head_homeimg'"></image>
</view>
</view>
<view id="top-layout"> <view id="top-layout">
<!-- 轮播图区域 --> <!-- 轮播图区域 -->
<view class="shop_swiper" :style="{'height':swiperHeight+'rpx'}" > <view class="shop_swiper" :style="{'height':swiperHeight+'rpx'}" >
@ -229,11 +234,11 @@ const imglist = ref([
"http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-ac78893d51e54074bb7b27227873907a.jpg" "http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-ac78893d51e54074bb7b27227873907a.jpg"
]) ])
const swiperHeight = ref(200); const swiperHeight = ref(200);
const imgheights = ref([]) const imgheights = ref([]);
const currentIndex = ref(0) const currentIndex = ref(0);
const showBack = ref(false);
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新) //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
// const { count,doubleCount } = storeToRefs(counterStore); const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
//获取图片真实宽度 //获取图片真实宽度
const onImageLoad = (event) => { const onImageLoad = (event) => {
const { width, height } = event.detail; const { width, height } = event.detail;
@ -249,14 +254,30 @@ const previewImage=(i)=>{
urls:imglist.value urls:imglist.value
}); });
}; };
// 判断是否有上一页
const getPages = () => {
const pages = getCurrentPages();
return pages.length > 1;
};
const goCart=()=>{ const goCart=()=>{
uni.switchTab({ uni.switchTab({
url:`/pages/cart/cart` url:`/pages/cart/cart`
}) })
}; };
const handleBack = () => {
if (getPages()) {
// 如果有上一页，返回上一页
uni.navigateBack();
} else {
// 如果没有上一页，返回首页
uni.switchTab({
url: '/pages/index/index',
});
}
};
onLoad((options) => { onLoad((options) => {
//初始化时判断是否显示返回按钮
showBack.value = getPages();
}); });
onShow(() => { onShow(() => {

57
shopProDetail/detail/style.scss
View File

@ -2,6 +2,55 @@ page{
background: #f6f6f6; background: #f6f6f6;
} }
.mian{ .mian{
.head_capsule{
color: #fff;
display: flex;
align-items: center;
margin-left: 10px;
justify-content: space-between;
position: fixed;
z-index: 110;
border-radius: 50rpx;
.head_back{
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.6);
border: 1rpx solid rgba(0, 0, 0, 0.1);
border-radius: 50rpx;
.head_backimg{
display: block;
width: 16px;
height: 16px;
margin-left: 7px;
}
}
.head_line{
width: 1rpx;
margin-left: 5px;
margin-right: 5px;
height: 32rpx;
background-color: rgba(0, 0, 0, 0.1);
}
.head_hove{
background: rgba(255,255,255,.8);
border: 1rpx solid rgba(0, 0, 0, 0.1);
}
.head_home{
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
overflow: hidden;
.head_homeimg{
display: block;
width: 30rpx;
height: 30rpx;
}
}
}
.shop_swiper{ .shop_swiper{
width: 100%; width: 100%;
height: 750rpx; height: 750rpx;
@ -73,7 +122,7 @@ page{
font-weight: 500; font-weight: 500;
} }
.shop_title{ .shop_title{
font-size: 36rpx; font-size: 34rpx;
color: #333333; color: #333333;
font-weight: 500; font-weight: 500;
margin-top: 10rpx; margin-top: 10rpx;
@ -96,7 +145,7 @@ page{
padding: 20rpx 40rpx 20rpx 20rpx; padding: 20rpx 40rpx 20rpx 20rpx;
.shop_comment_head_title{ .shop_comment_head_title{
font-size: 30rpx; font-size: 30rpx;
color: #333333; color: #000000;
font-weight: 500; font-weight: 500;
} }
.shop_comment_head_arrow{ .shop_comment_head_arrow{
@ -179,7 +228,7 @@ page{
overflow: hidden; overflow: hidden;
.shop_comment_title{ .shop_comment_title{
font-size: 27rpx; font-size: 27rpx;
color: #000000; color: #333333;
} }
.shop_comment_item{ .shop_comment_item{
margin: 20rpx 0; margin: 20rpx 0;
@ -292,7 +341,7 @@ page{
} }
// 商品区域样式 // 商品区域样式
.shop_view{ .shop_view{
margin-top: 48rpx; margin-top: 10rpx;
padding: 13rpx 20rpx 0rpx 20rpx; padding: 13rpx 20rpx 0rpx 20rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

0
static/index/location.png → static/location.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 996 B

After

Width:  |  Height:  |  Size: 996 B

0
static/index/location_active.png → static/location_active.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

9
store/counter.js
View File

@ -3,10 +3,13 @@ import { computed,ref } from 'vue';
import { apiService } from "@/server/api.service"; import { apiService } from "@/server/api.service";
export const useCounterStore = defineStore('counter',()=>{ export const useCounterStore = defineStore('counter',()=>{
//定义数据（state) //定义数据（state)
const count = ref(0);
const openId = ref(''); const openId = ref('');
const cellPhone = ref(''); const cellPhone = ref('');
const isLogin = ref(''); const isLogin = ref('');
const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height']);
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight']);
const statusBartop = ref(uni.getMenuButtonBoundingClientRect()['top']);
//定义数据修改的方法(action) //定义数据修改的方法(action)
const clickSType = (params)=>{ const clickSType = (params)=>{
@ -17,7 +20,9 @@ export const useCounterStore = defineStore('counter',()=>{
//以对象的形式return供组件调用 //以对象的形式return供组件调用
return{ return{
count, statusHeight,
headerHeight,
statusBartop,
clickSType clickSType
} }
}) })