diff --git a/pages.json b/pages.json
index 6c14a7a..d173330 100644
--- a/pages.json
+++ b/pages.json
@@ -30,14 +30,16 @@
"style": {
"navigationBarTitleText": "购物车",
"navigationBarBackgroundColor": "#f2f5f7",
- "enablePullDownRefresh": true
+ "enablePullDownRefresh": true,
+ "navigationStyle": "custom"
}
},
{
"path": "pages/user/user",
"style": {
"navigationBarTitleText": "我的",
- "navigationBarBackgroundColor": "#f2f5f7"
+ "navigationBarBackgroundColor": "#f2f5f7",
+ "navigationStyle": "custom"
}
}
],
diff --git a/pages/cart/cart.vue b/pages/cart/cart.vue
index 3832237..d946cae 100644
--- a/pages/cart/cart.vue
+++ b/pages/cart/cart.vue
@@ -1,6 +1,215 @@
-
-
+
+
+
+
+
+ 上海体育中心
+
+
+
+
+ 购物车
+ 我常买
+
+
+ 优惠券(3)
+ 管理
+
+
+
+
+
+
+
+
+
+
+
+
+ 火锅配菜青菜
+ 比加入时下降1.1元
+
+ 43.959.9
+
+
+
+
+ 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 火锅配菜青菜
+ 比加入时下降1.1元
+
+ 43.959.9
+
+
+
+
+ 1
+
+
+
+
+
+
+
+
+
+
+ 为您推荐
+
+
+
+
+
+
+
+
+ 够辣
+
+
+
+
+
+ 糖醋排骨
+ 乡下土猪
+
+ 仅剩3份
+ 劲辣胃浓
+
+
+ 43.959.9
+
+
+
+
+
+
+
+
+ 够辣
+
+
+
+
+
+ 糖醋排骨
+ 乡下土猪
+
+ 仅剩3份
+ 劲辣胃浓
+
+
+ 43.959.9
+
+
+
+
+
+
+
+
+ 香甜
+
+
+
+
+
+ 泡椒田鸡
+ 超大只田鸡
+
+ 仅剩3份
+ 劲辣胃浓
+ 劲辣胃浓
+
+
+ 43.959.9
+
+
+
+
+
+
+
+
+
+
+ 热销
+
+
+
+
+
+ 泡椒田鸡
+ 超大只田鸡
+
+ 仅剩3份
+ 劲辣胃浓
+
+
+ 43.959.9
+
+
+
+
+
+
+
+
+ 新鲜
+
+
+
+
+
+ 泡椒田鸡
+ 超大只田鸡
+
+ 仅剩3份
+ 劲辣胃浓
+
+
+ 43.959.9
+
+
+
+
+
+
+
+
+
+
+
+
@@ -10,8 +219,10 @@ import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
const counterStore = useCounterStore(); // 使用 Store
+const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height'])
+const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
//使用pinia:storeToRefs方法包裹(保持响应式更新,不使用视图无法更新)
-// const { count,doubleCount } = storeToRefs(counterStore);
+//const { count,doubleCount } = storeToRefs(counterStore);
// 使用 uni.onLoad 监听页面加载
onLoad((options) => {
@@ -21,7 +232,7 @@ onShow(() => {
});
onPullDownRefresh(()=>{
-
+ uni.stopPullDownRefresh();
})
onReachBottom(()=>{
diff --git a/pages/cart/style.scss b/pages/cart/style.scss
index e69de29..e599a7d 100644
--- a/pages/cart/style.scss
+++ b/pages/cart/style.scss
@@ -0,0 +1,415 @@
+page{
+ background-color: #F6F6F6;
+}
+.main{
+ // 头部样式
+ .head{
+ position: fixed;
+ z-index: 100;
+ width: 100%;
+ top: 0;
+ left: 0;
+ background:#FCEEEF;
+ .head_location{
+ display: flex;
+ align-items: center;
+ height: 45px;
+ .location_img{
+ width: 18px;
+ height: 18px;
+ margin: 0px 2px 0px 10px;
+ }
+ .location_title{
+ font-size: 28rpx;
+ color: #333333;
+ font-weight: 500;
+ }
+ .location_arrow_down{
+ width: 0;
+ height: 0;
+ border-left: 10rpx solid transparent;
+ border-right: 10rpx solid transparent;
+ border-top: 11rpx solid #333333;
+ margin-left: 2px;
+ margin-top: 1px;
+ }
+ }
+ .head_ul{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 40px;
+ line-height: 40px;
+ .head_l{
+ display: flex;
+ align-items: center;
+ .head_q{
+ color: #000000;
+ font-weight: 500;
+ font-size: 34rpx;
+ height: 40px;
+ padding-left: 10px;
+ }
+ .head_w{
+ color: #333333;
+ font-weight: 500;
+ font-size: 30rpx;
+ padding-left: 15px;
+ padding-right: 15px;
+ }
+ }
+ .head_r{
+ display: flex;
+ align-items: center;
+ .head_li{
+ color: #333333;
+ font-size: 28rpx;
+ height: 40px;
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+ }
+ }
+ }
+ // 购物车区域
+ .cart{
+ background: linear-gradient(180deg, #FCEEEF 0%, #f6f6f6 100%);
+ background-repeat: no-repeat;
+ .cart_item{
+ margin-top: 20rpx;
+ margin-left: 20rpx;
+ margin-right: 20rpx;
+ border-radius: 25rpx;
+ background-color: #ffffff;
+ box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
+ display: flex;
+ justify-content: space-between;
+ padding: 20rpx 20rpx 20rpx 0rpx;
+ .cart_selected{
+ width: 50rpx;
+ height: 180rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-left: 20rpx;
+ .cart_selected_false{
+ width: 35rpx;
+ height: 35rpx;
+ border-radius: 50%;
+ border: 2rpx solid #bfbfbf;
+ }
+ }
+ .cart_shop{
+ width: 180rpx;
+ height: 180rpx;
+ position: relative;
+ border-radius: 20rpx;
+ overflow: hidden;
+ .cart_shop_img{
+ width: 180rpx;
+ height: 180rpx;
+ position: absolute;
+ top: 0;
+ z-index: 1;
+ }
+ }
+ .cart_shop_cont{
+ width: 415rpx;
+ .cart_title{
+ font-size: 28rpx;
+ color: #333333;
+ font-weight: 500;
+ min-height: 85rpx;
+ }
+ .cart_desc{
+ font-size: 24rpx;
+ color: #FF2D41;
+ }
+ .cart_bottom{
+ margin-top: 10rpx;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .cart_price{
+ font-size: 34rpx;
+ color: #fe4301;
+ font-weight: 500;
+ }
+ .cart_counter{
+ display: flex;
+ align-items: center;
+ .cart_counter_btn{
+ width: 70rpx;
+ height: 48rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-top: 1px solid #E9E9E9;
+ border-bottom: 1px solid #E9E9E9;
+ .cart_counter_btn_img{
+ width: 25rpx;
+ height: 25rpx;
+ display: block;
+ }
+ }
+ .cart_counter_center{
+ width: 70rpx;
+ height: 48rpx;
+ font-size: 28rpx;
+ color: #333333;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border:1px solid #E9E9E9;
+ }
+ .border_l{
+ border-left: 1px solid #E9E9E9;
+ border-top-left-radius: 50rpx;
+ border-bottom-left-radius: 50rpx;
+
+ }
+ .border_r{
+ border-right: 1px solid #E9E9E9;
+ border-top-right-radius: 50rpx;
+ border-bottom-right-radius: 50rpx;
+ }
+ }
+ }
+ }
+ }
+ }
+ .user_title{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 80rpx;
+ .user_img{
+ width: 28rpx;
+ height: 28rpx;
+ display: block;
+ }
+ .user_name{
+ color: #FF0000;
+ font-size: 36rpx;
+ font-weight: 500;
+ margin: 0 10rpx 0 10rpx;
+ }
+ }
+ // 商品区域样式
+ .shop_view{
+ margin-top: 48rpx;
+ padding: 13rpx 20rpx 0rpx 20rpx;
+ display: flex;
+ justify-content: space-between;
+ .shop_view_ul{
+ width: 346rpx;
+ .shop_view_li{
+ background-color: #FFFFFF;
+ border-radius: 20rpx;
+ width: 100%;
+ box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
+ margin-bottom: 20rpx;
+ .shop_view_li_swiper{
+ width: 100%;
+ height: 504rpx;
+ .shop_view_li_swiper_item{
+ width: 100%;
+ .shop_view_li_swiper_img_url{
+ width: 100%;
+ height: 504rpx;
+ display: block;
+ border-radius: 20rpx;
+ }
+ }
+ }
+ .shop_view_img{
+ width: 100%;
+ position: relative;
+ height: 320rpx;
+ .shop_view_tag{
+ width: 66rpx;
+ height: 42rpx;
+ position: absolute;
+ z-index: 2;
+ right: -15rpx;
+ top: 20rpx;
+ background: url(../../static/tag_img.png);
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ .shop_view_tag_text{
+ font-size: 20rpx;
+ color: #FFFFFF;
+ height: 30rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ .shop_view_img_u{
+ width: 300rpx;
+ position: absolute;
+ z-index: 1;
+ left: 20rpx;
+ top: 20rpx;
+ .shop_view_img_url{
+ width: 100%;
+ height: 300rpx;
+ display: block;
+ }
+ }
+ }
+ .shop_view_cont{
+ padding: 20rpx;
+ .shop_view_cont_title{
+ font-size: 28rpx;
+ font-weight: 500;
+ color: #000000;
+ min-height: 80rpx;
+ }
+ .shop_view_cont_desc{
+ color: #666666;
+ font-size: 24rpx;
+ }
+ .shop_view_cont_tag{
+ display: flex;
+ flex-wrap: wrap;
+ .shop_view_cont_tag_text{
+ border-radius: 6rpx;
+ border: 1rpx solid #FF6868;
+ padding: 0rpx 10rpx;
+ border-radius: 10rpx;
+ color: #ff6868;
+ font-size: 18rpx;
+ margin-top: 10rpx;
+ margin-right: 10rpx;
+ }
+ }
+ }
+ .shop_view_cont_bottom{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .shop_view_cont_price{
+ font-size: 34rpx;
+ color: red;
+ font-weight: 500;
+ }
+ .shop_view_cont_cart{
+ width: 65rpx;
+ height: 65rpx;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ .shop_view_cont_cart_img{
+ width: 40rpx;
+ height: 40rpx;
+ display: block;
+ }
+ }
+ }
+ }
+ .shop_view_bcg{
+ background-color: inherit;
+ }
+ }
+ }
+ .footer{
+ position: fixed;
+ z-index: 888;
+ left: 0;
+ transform: translate3d(0,-100%,0);
+ width: 100%;
+ top: 100%;
+ background: #FFFFFF;
+ border-top: 1rpx solid #F6F6F6;
+ border-bottom: 1rpx solid #F6F6F6;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-top: 20rpx;
+ padding-bottom: 20rpx;
+ border-top-left-radius: 40rpx;
+ border-top-right-radius: 40rpx;
+ .footer_l{
+ display: flex;
+ align-items: center;
+ margin-left: 20rpx;
+ .footer_selected{
+ display: flex;
+ align-items: center;
+ height: 80rpx;
+ .footer_selected_false{
+ width: 35rpx;
+ height: 35rpx;
+ border-radius: 50%;
+ border: 2rpx solid #bfbfbf;
+ }
+ .footer_text{
+ color: #333333;
+ font-size: 28rpx;
+ margin-left: 10rpx;
+ }
+ }
+ }
+ .footer_r{
+ margin-right: 20rpx;
+ display: flex;
+ align-items: center;
+ .footer_v{
+ .footer_text{
+ font-size: 28rpx;
+ color: #666666;
+ display: inline-block;
+ margin-right: 15rpx;
+ }
+ .footer_price{
+ font-size: 46rpx;
+ color: #FF0000;
+ display: inline-block;
+ font-weight: 500;
+ }
+ .footer_price::before {
+ content: '¥';
+ font-size: 28rpx;
+ margin-right: 5rpx;
+ font-weight: 500;
+ }
+ }
+ .footer_btn{
+ margin-left: 20rpx;
+ font-size: 32rpx;
+ color: #FFFFFF;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 205rpx;
+ height: 77rpx;
+ background: linear-gradient( 90deg, #FD4955 0%, #FD343C 100%);
+ border-radius: 39rpx 39rpx 39rpx 39rpx;
+ }
+ }
+ }
+
+
+
+
+ .price::before {
+ content: '¥';
+ font-size: 24rpx;
+ margin-right: 5rpx;
+ }
+ .prices::before {
+ content: '¥';
+ font-size: 20rpx;
+ margin-right: 5rpx;
+ margin-left: 5rpx;
+ }
+ .market_name{
+ color: #999999;
+ font-size: 24rpx;
+ text-decoration: line-through;
+ margin-left: 5rpx;
+ font-weight: 400;
+ }
+}
\ No newline at end of file
diff --git a/pages/classify/classify.vue b/pages/classify/classify.vue
index c23a7ab..f218e37 100644
--- a/pages/classify/classify.vue
+++ b/pages/classify/classify.vue
@@ -48,7 +48,10 @@
-
+
+
+
+
diff --git a/pages/classify/style.scss b/pages/classify/style.scss
index 2692249..3cff3b3 100644
--- a/pages/classify/style.scss
+++ b/pages/classify/style.scss
@@ -98,15 +98,12 @@ page{
display: flex;
align-items: center;
justify-content: center;
+ .head_class_arrow_box_img{
+ width: 50rpx;
+ height: 50rpx;
+ }
}
- .head_class_arrow_up {
- width: 16rpx;
- height: 16rpx;
- border-top: 2rpx solid #7D7B88;
- border-right: 2rpx solid #7D7B88;
- transform: translate3d(0, -50%, 0) rotate(134deg);
- margin-top: 10rpx;
- }
+
}
}
diff --git a/pages/index/index.vue b/pages/index/index.vue
index d78162f..a863f9d 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -280,8 +280,14 @@