diff --git a/pages.json b/pages.json
index d173330..271bfee 100644
--- a/pages.json
+++ b/pages.json
@@ -21,7 +21,7 @@
"path": "pages/sidedish/sidedish",
"style": {
"navigationBarTitleText": "帮你配",
- "navigationBarBackgroundColor": "#f2f5f7",
+ "navigationBarBackgroundColor": "#F6F6F6",
"enablePullDownRefresh": true
}
},
@@ -81,6 +81,22 @@
}
]
},
+ "subPackages":[{
+ "root": "shopProDetail",
+ "pages": [{
+ "path": "detail/detail",
+ "style": {
+ "navigationBarTitleText": "",
+ "navigationStyle": "custom"
+ }
+ }]
+ }],
+ "preloadRule":{
+ "shopProDetail/detail/detail": {
+ "network": "all",
+ "packages": ["shopProDetail"]
+ }
+ },
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "外卖点餐",
diff --git a/pages/cart/cart.vue b/pages/cart/cart.vue
index d946cae..64cd2e7 100644
--- a/pages/cart/cart.vue
+++ b/pages/cart/cart.vue
@@ -67,17 +67,106 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 火锅配菜青菜
+ 43.959.9
+
+
+
+
+
+ 火锅配菜青菜
+ 43.959.9
+
+
+
+
+
+ 火锅配菜青菜
+ 43.959.9
+
+
+
+
+
+ 火锅配菜青菜
+ 43.959.9
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+
+
+
+
+ 共5款失效商品
+ 一键清空
+
+
+
+
+ 商品已下架
+
+
+
+
+ 糖醋排骨
+ 商品下架了
+
+
+
+
+
+ 商品已下架
+
+
+
+
+ 糖醋排骨
+ 商品下架了
+
+
+
+
+
+
+
-
- 为您推荐
-
+ 为您推荐
-
+
够辣
@@ -99,7 +188,7 @@
-
+
够辣
@@ -121,7 +210,7 @@
-
+
香甜
@@ -146,7 +235,7 @@
-
+
热销
@@ -168,7 +257,7 @@
-
+
新鲜
@@ -223,7 +312,11 @@ const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height'])
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
//const { count,doubleCount } = storeToRefs(counterStore);
-
+const goDetail= ()=>{
+ uni.navigateTo({
+ url:`/shopProDetail/detail/detail`
+ })
+}
// 使用 uni.onLoad 监听页面加载
onLoad((options) => {
diff --git a/pages/cart/style.scss b/pages/cart/style.scss
index e599a7d..c604302 100644
--- a/pages/cart/style.scss
+++ b/pages/cart/style.scss
@@ -46,13 +46,12 @@ page{
.head_q{
color: #000000;
font-weight: 500;
- font-size: 34rpx;
+ font-size: 32rpx;
height: 40px;
padding-left: 10px;
}
.head_w{
color: #333333;
- font-weight: 500;
font-size: 30rpx;
padding-left: 15px;
padding-right: 15px;
@@ -76,18 +75,15 @@ page{
background: linear-gradient(180deg, #FCEEEF 0%, #f6f6f6 100%);
background-repeat: no-repeat;
.cart_item{
- margin-top: 20rpx;
- margin-left: 20rpx;
- margin-right: 20rpx;
+ margin: 0rpx 20rpx 20rpx 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;
+ padding: 20rpx 0rpx 20rpx 0rpx;
.cart_selected{
width: 50rpx;
- height: 180rpx;
display: flex;
align-items: center;
justify-content: center;
@@ -103,7 +99,8 @@ page{
width: 180rpx;
height: 180rpx;
position: relative;
- border-radius: 20rpx;
+ border-radius: 10rpx;
+ // border: 1rpx solid #F3F3F3;
overflow: hidden;
.cart_shop_img{
width: 180rpx;
@@ -114,7 +111,7 @@ page{
}
}
.cart_shop_cont{
- width: 415rpx;
+ width: 410rpx;
.cart_title{
font-size: 28rpx;
color: #333333;
@@ -125,76 +122,251 @@ page{
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;
+
+ }
+ .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_counter_center{
- width: 70rpx;
- height: 48rpx;
- font-size: 28rpx;
+ .cart_scroll_title{
color: #333333;
- display: flex;
- align-items: center;
- justify-content: center;
- border:1px solid #E9E9E9;
+ 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;
}
- .border_l{
- border-left: 1px solid #E9E9E9;
- border-top-left-radius: 50rpx;
- border-bottom-left-radius: 50rpx;
-
+ .cart_scroll_price{
+ font-size: 34rpx;
+ color: #FF0000;
+ font-weight: 500;
+ margin-top: 20rpx;
}
- .border_r{
- border-right: 1px solid #E9E9E9;
- border-top-right-radius: 50rpx;
- border-bottom-right-radius: 50rpx;
+ .cart_scroll_market_name{
+ color: #999999;
+ font-size: 28rpx;
+ text-decoration: line-through;
+ font-weight: 400;
}
}
}
}
}
+ .cart_items{
+ margin: 0rpx 20rpx 20rpx 20rpx;
+ border-radius: 25rpx;
+ background-color: #ffffff;
+ box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
+ padding: 20rpx 0rpx 20rpx 0rpx;
+ .cart_t{
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 20rpx;
+ .cart_selected{
+ width: 50rpx;
+ 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_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: 10rpx;
+ 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: 32rpx;
+ color: #FF0000;
+ font-weight: 500;
+ margin-top: 10rpx;
+ }
+ .cart_scroll_market_name{
+ color: #999999;
+ font-size: 28rpx;
+ text-decoration: line-through;
+ font-weight: 400;
+ }
+ }
+ }
+ }
+ }
+ }
+ .cart_lose{
+ margin: 0rpx 20rpx 20rpx 20rpx;
+ border-radius: 25rpx;
+ background-color: #fff;
+ padding-bottom: 20rpx;
+ box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
+ .cart_lose_top{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1rpx solid #f6f6f6;
+ .cart_lose_top_l{
+ color: #000000;
+ font-size: 28rpx;
+ padding:25rpx 20rpx 25rpx 20rpx;
+ }
+ .cart_lose_top_r{
+ color: #E60703;
+ font-size: 28rpx;
+ padding:25rpx 20rpx 25rpx 20rpx;
+ }
+ }
+ .cart_lose_bottom{
+ display: flex;
+ align-items: center;
+ padding: 20rpx 20rpx 0rpx 20rpx;
+ .cart_lose_img{
+ width: 180rpx;
+ height: 180rpx;
+ position: relative;
+ border-radius: 4rpx;
+ overflow: hidden;
+ .cart_lose_bcg{
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ z-index: 2;
+ .cart_lose_text{
+ width: 130rpx;
+ height: 40rpx;
+ border-radius: 10rpx;
+ background: rgba(0,0,0,0.6);
+ font-size: 23rpx;
+ color: #FFFFFF;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ .cart_lose_img_url{
+ width: 180rpx;
+ height: 180rpx;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ }
+ }
+ .cart_lose_ly{
+ margin-left: 20rpx;
+ .cart_lose_title{
+ color: #333;
+ font-size: 26rpx;
+ font-weight: 500;
+ }
+ .cart_lose_desc{
+ color: #6CA1D2;
+ font-size: 24rpx;
+ }
+ }
+ }
+ }
+
+
+
+
}
.user_title{
display: flex;
align-items: center;
justify-content: center;
- margin-top: 80rpx;
- .user_img{
- width: 28rpx;
- height: 28rpx;
- display: block;
- }
+ margin-top: 60rpx;
.user_name{
color: #FF0000;
font-size: 36rpx;
font-weight: 500;
margin: 0 10rpx 0 10rpx;
+ vertical-align: middle;
+ display: inline-block;
}
}
+ .user_title::before{
+ content: "";
+ vertical-align: middle;
+ display: inline-block;
+ width: 30rpx;
+ height: 30rpx;
+ background-image: url('../../static/user/leftimg.png');
+ background-size: cover;
+ margin-right: 10rpx;
+ }
+ .user_title::after{
+ vertical-align: middle;
+ content: "";
+ display: inline-block;
+ width: 30rpx;
+ height: 30rpx;
+ background-image: url('../../static/user/rightimg.png');
+ background-size: cover;
+ margin-left: 10rpx;
+ }
// 商品区域样式
.shop_view{
margin-top: 48rpx;
@@ -290,7 +462,7 @@ page{
align-items: center;
justify-content: space-between;
.shop_view_cont_price{
- font-size: 34rpx;
+ font-size: 32rpx;
color: red;
font-weight: 500;
}
@@ -363,7 +535,7 @@ page{
margin-right: 15rpx;
}
.footer_price{
- font-size: 46rpx;
+ font-size: 43rpx;
color: #FF0000;
display: inline-block;
font-weight: 500;
@@ -377,9 +549,8 @@ page{
}
.footer_btn{
margin-left: 20rpx;
- font-size: 32rpx;
+ font-size: 30rpx;
color: #FFFFFF;
- font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
@@ -407,9 +578,60 @@ page{
}
.market_name{
color: #999999;
- font-size: 24rpx;
+ font-size: 23rpx;
text-decoration: line-through;
margin-left: 5rpx;
font-weight: 400;
}
+ .cart_bottom{
+ margin-top: 10rpx;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .cart_price{
+ font-size: 32rpx;
+ color: #fe4301;
+ font-weight: 500;
+ }
+ .cart_counter{
+ display: flex;
+ align-items: center;
+ margin-right: 20rpx;
+ .cart_counter_btn{
+ width: 55rpx;
+ height: 50rpx;
+ 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: 60rpx;
+ height: 50rpx;
+ 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;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/pages/classify/classify.vue b/pages/classify/classify.vue
index f218e37..2922413 100644
--- a/pages/classify/classify.vue
+++ b/pages/classify/classify.vue
@@ -59,7 +59,7 @@
-
+
够辣
@@ -81,7 +81,7 @@
-
+
够辣
@@ -103,7 +103,7 @@
-
+
香甜
@@ -128,7 +128,7 @@
-
+
热销
@@ -150,7 +150,7 @@
-
+
新鲜
@@ -189,7 +189,11 @@ const counterStore = useCounterStore(); // 使用 Store
const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height'])
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
const ScrollLeft = ref(0);
-
+const goDetail= ()=>{
+ uni.navigateTo({
+ url:`/shopProDetail/detail/detail`
+ })
+}
//使用 uni.onLoad 监听页面加载
onLoad((options) => {
diff --git a/pages/classify/style.scss b/pages/classify/style.scss
index 3cff3b3..e58cc19 100644
--- a/pages/classify/style.scss
+++ b/pages/classify/style.scss
@@ -41,7 +41,6 @@ page{
line-height: 50px;
position: relative;
.head_class_scroll{
- width: 100%;
overflow: hidden;
height: 50px;
width: 90%;
@@ -203,7 +202,7 @@ page{
align-items: center;
justify-content: space-between;
.shop_view_cont_price{
- font-size: 34rpx;
+ font-size: 32rpx;
color: red;
font-weight: 500;
}
@@ -239,7 +238,7 @@ page{
}
.market_name{
color: #999999;
- font-size: 24rpx;
+ font-size: 23rpx;
text-decoration: line-through;
margin-left: 5rpx;
font-weight: 400;
diff --git a/pages/index/index.vue b/pages/index/index.vue
index a863f9d..12a9134 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -23,14 +23,14 @@
- AI学做菜
+ 学做菜
简单又快捷
- 极速退款
+ 极速退款
食材有问题？
@@ -44,7 +44,7 @@
-
+
@@ -64,7 +64,7 @@
-
+
@@ -83,7 +83,7 @@
-
+
@@ -107,7 +107,7 @@
-
+
@@ -126,7 +126,7 @@
-
+
@@ -145,7 +145,7 @@
-
+
@@ -173,17 +173,17 @@
-
+
-
+
-
+
-
+
够辣
@@ -205,7 +205,7 @@
-
+
香甜
@@ -230,7 +230,7 @@
-
+
热销
@@ -252,7 +252,7 @@
-
+
新鲜
@@ -307,7 +307,11 @@ const counterStore = useCounterStore(); // 使用 Store
const { clickSType } = counterStore;
const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height'])
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
-
+const goDetail= ()=>{
+ uni.navigateTo({
+ url:`/shopProDetail/detail/detail`
+ })
+}
const classify = ()=>{
let params ={
productImgUrl: "http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20240611-c7e219dab5864847bee8c3f0cffbb658.jpg"
@@ -323,8 +327,6 @@ const classify = ()=>{
showCancel: false
})
})
-
-
}
onLoad((options) => {
diff --git a/pages/index/style.scss b/pages/index/style.scss
index cf53086..b868c09 100644
--- a/pages/index/style.scss
+++ b/pages/index/style.scss
@@ -134,11 +134,20 @@ page{
font-weight: 500;
display: flex;
align-items: center;
- .grid_wrap_li_arrow{
- width: 24rpx;
- height: 24rpx;
- margin-left: 10rpx;
- }
+ }
+ .grid_wrap_li_title text{
+ vertical-align: middle;
+ display: inline-block;
+ }
+ .grid_wrap_li_title::after{
+ vertical-align: middle;
+ content: "";
+ display: inline-block;
+ width: 24rpx;
+ height: 24rpx;
+ margin-left: 10rpx;
+ background-image: url('../../static/index/arrow.png');
+ background-size: cover;
}
.grid_wrap_li_desc{
color: #999999;
@@ -241,7 +250,7 @@ page{
justify-content: space-between;
margin-top: 12rpx;
.scroll_view_shop_price{
- font-size: 34rpx;
+ font-size: 32rpx;
color: #FF0000;
font-weight: 500;
@@ -357,7 +366,7 @@ page{
align-items: center;
justify-content: space-between;
.shop_view_cont_price{
- font-size: 34rpx;
+ font-size: 32rpx;
color: red;
font-weight: 500;
}
@@ -430,7 +439,7 @@ page{
.footer_cont_m{
margin-left: 25rpx;
.footer_cont_m_price{
- font-size: 46rpx;
+ font-size: 43rpx;
color: #FF0000;
font-weight: 500;
}
@@ -453,7 +462,7 @@ page{
display: flex;
align-items: center;
justify-content: center;
- font-size: 32rpx;
+ font-size: 30rpx;
color: #FFFFFF;
}
}
@@ -474,7 +483,7 @@ page{
}
.market_name{
color: #999999;
- font-size: 24rpx;
+ font-size: 23rpx;
text-decoration: line-through;
margin-left: 5rpx;
font-weight: 400;
diff --git a/pages/sidedish/sidedish.vue b/pages/sidedish/sidedish.vue
index 86d7c9e..4750217 100644
--- a/pages/sidedish/sidedish.vue
+++ b/pages/sidedish/sidedish.vue
@@ -1,6 +1,108 @@
-
-
+
+
+
+
+
+ 推荐
+ 特惠专区
+ 时令春菜
+ 鸭货卤味
+ 鸡/鹅肉类
+ 轻食萨拉
+ 猪肉类
+
+
+
+
+
+
+
+ 鲜花人气帮
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 火锅配菜青菜
+
+
+ 39.9
+ 59.9
+
+
+
+
+
+
+
+
+
+
+
+ 火锅配菜青菜
+
+
+ 39.9
+ 59.9
+
+
+
+
+
+
+
+
+
+
+
+ 火锅配菜青菜
+
+
+ 39.9
+ 59.9
+
+
+
+
+
+
+
+
+ 4
+
+
+ 火锅配菜青菜
+
+
+ 39.9
+ 59.9
+
+
+
+
+
+
+
+
+
+
+
+
@@ -10,9 +112,14 @@ 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 ScrollLeft = ref(0);
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
// const { count,doubleCount } = storeToRefs(counterStore);
-
+const goDetail= ()=>{
+ uni.navigateTo({
+ url:`/shopProDetail/detail/detail`
+ })
+}
onLoad((options) => {
});
diff --git a/pages/sidedish/style.scss b/pages/sidedish/style.scss
index e69de29..7d58c6e 100644
--- a/pages/sidedish/style.scss
+++ b/pages/sidedish/style.scss
@@ -0,0 +1,200 @@
+page{
+ background-color: #151517;
+}
+.mian{
+ .banner{
+ width: 100%;
+ height: 455rpx;
+ display:block;
+ }
+ .class_content{
+ background-color: #393333;
+ border-top-left-radius: 30rpx;
+ border-top-right-radius: 30rpx;
+ .class_scroll{
+ white-space: nowrap;
+ height: 90rpx;
+ position: relative;
+ background-color: #393333;
+ border-top-left-radius: 30rpx;
+ border-top-right-radius: 30rpx;
+ position: sticky;
+ top: 0;
+ z-index: 999;
+ .class_scroll_ul{
+ width: 100%;
+ overflow: hidden;
+ height: 90rpx;
+ .class_item{
+ padding: 0rpx 20rpx;
+ height: 60rpx;
+ display: inline-block;
+ line-height: 60rpx;
+ font-size: 26rpx;
+ color: #FFFFFF;
+ margin-top: 15rpx;
+ }
+ .class_item_active{
+ background-color: #725D48;
+ border-radius: 50rpx;
+ padding: 0rpx 45rpx;
+ margin-right: 20rpx;
+ color: #FEF6D8;
+ font-weight: 500;
+ margin-left: 20rpx;
+ }
+ }
+ }
+ .content{
+ background-color: #725D48;
+ min-height: 100vh;
+ overflow: hidden;
+ padding-bottom: 20rpx;
+ border-top-left-radius: 30rpx;
+ border-top-right-radius: 30rpx;
+ .content_item{
+ margin: 20rpx 20rpx 0rpx 20rpx;
+ height: 430rpx;
+ background: linear-gradient( 180deg, #FEF2E2 0%, #FFFFFF 20%, #FFFFFF 50%, #FFFFFF 90%, #FDF2E0 100%);
+ border-radius: 16rpx 16rpx 16rpx 16rpx;
+ padding-bottom: 20rpx;
+ .content_head{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20rpx;
+ .content_head_l{
+ display: flex;
+ align-items: center;
+ .content_head_img{
+ width: 38rpx;
+ height: 38rpx;
+ display: block;
+ margin-right: 10rpx;
+ }
+ .content_head_title{
+ font-size: 28rpx;
+ color: #333333;
+ font-weight: 500;
+ }
+ }
+ .content_head_btn{
+ width: 119rpx;
+ height: 42rpx;
+ .content_head_btnimg{
+ width: 119rpx;
+ height: 42rpx;
+ display: block;
+ }
+ }
+ }
+ .content_shop{
+ width: 100%;
+ display: flex;
+ overflow: hidden;
+ white-space: nowrap;
+ .content_shop_ul{
+ .content_shop_item{
+ width: 200rpx;
+ display: inline-block;
+ margin-left: 20rpx;
+ .content_shop_item_img{
+ background: #FFFFFF;
+ border-radius: 10rpx;
+ width: 200rpx;
+ height: 200rpx;
+ overflow: hidden;
+ position: relative;
+ .content_shop_item_tag{
+ width: 50rpx;
+ height: 50rpx;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ .content_shop_item_tagImg{
+ width: 50rpx;
+ height: 50rpx;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: url(../../static/sidedish/no4.png);
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ text-align: center;
+ line-height: 44rpx;
+ font-size: 20rpx;
+ color: #FFFFFF;
+ }
+ .content_shop_item_imgUrl{
+ width: 200rpx;
+ height: 200rpx;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+ .content_shop_item_title{
+ font-size: 24rpx;
+ color: #000000;
+ min-height: 45rpx;
+ 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: 10rpx;
+ }
+ .content_shop_item_bottom{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 10rpx;
+ .content_shop_item_l{
+ .content_shop_item_price{
+ font-size: 32rpx;
+ color: #FF0000;
+ font-weight: 500;
+ line-height: 38rpx;
+ }
+ .content_shop_market{
+ font-size: 23rpx;
+ color: #999999;
+ text-decoration: line-through;
+ }
+ }
+ .content_shop_item_cart{
+ width: 65rpx;
+ height: 65rpx;
+ display: flex;
+ align-items: flex-end;
+ justify-content: flex-end;
+ .content_shop_item_cart_img{
+ width: 50rpx;
+ height: 50rpx;
+ display: block;
+ }
+ }
+ }
+ .price::before {
+ content: '¥';
+ font-size: 24rpx;
+ margin-right: 5rpx;
+ font-weight: 500;
+ }
+ .prices::before {
+ content: '¥';
+ font-size: 20rpx;
+ margin-right: 5rpx;
+ margin-left: 5rpx;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/pages/user/style.scss b/pages/user/style.scss
index d9691a4..2d24a25 100644
--- a/pages/user/style.scss
+++ b/pages/user/style.scss
@@ -31,6 +31,7 @@ page{
.head_user_message_name{
color: #333333;
font-size: 32rpx;
+ font-weight: 500;
}
.head_user_message_desc{
color: #666666;
@@ -151,19 +152,36 @@ page{
display: flex;
align-items: center;
justify-content: center;
- margin-top: 80rpx;
- .user_img{
- width: 28rpx;
- height: 28rpx;
- display: block;
- }
+ margin-top: 60rpx;
.user_name{
color: #FF0000;
font-size: 36rpx;
font-weight: 500;
margin: 0 10rpx 0 10rpx;
+ vertical-align: middle;
+ display: inline-block;
}
}
+ .user_title::before{
+ content: "";
+ vertical-align: middle;
+ display: inline-block;
+ width: 30rpx;
+ height: 30rpx;
+ background-image: url('../../static/user/leftimg.png');
+ background-size: cover;
+ margin-right: 10rpx;
+ }
+ .user_title::after{
+ vertical-align: middle;
+ content: "";
+ display: inline-block;
+ width: 30rpx;
+ height: 30rpx;
+ background-image: url('../../static/user/rightimg.png');
+ background-size: cover;
+ margin-left: 10rpx;
+ }
// 商品区域样式
.shop_view{
margin-top: 48rpx;
@@ -259,7 +277,7 @@ page{
align-items: center;
justify-content: space-between;
.shop_view_cont_price{
- font-size: 34rpx;
+ font-size: 32rpx;
color: red;
font-weight: 500;
}
@@ -295,7 +313,7 @@ page{
}
.market_name{
color: #999999;
- font-size: 24rpx;
+ font-size: 23rpx;
text-decoration: line-through;
margin-left: 5rpx;
font-weight: 400;
diff --git a/pages/user/user.vue b/pages/user/user.vue
index cf5d47a..26c0661 100644
--- a/pages/user/user.vue
+++ b/pages/user/user.vue
@@ -50,15 +50,13 @@
-
- 为您推荐
-
+ 为您推荐
-
+
够辣
@@ -80,7 +78,7 @@
-
+
够辣
@@ -102,7 +100,7 @@
-
+
香甜
@@ -127,7 +125,7 @@
-
+
热销
@@ -149,7 +147,7 @@
-
+
新鲜
@@ -239,6 +237,11 @@ const contList = ref([
name:'地址管理'
}
])
+const goDetail= ()=>{
+ uni.navigateTo({
+ url:`/shopProDetail/detail/detail`
+ })
+}
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
//const { count,doubleCount } = storeToRefs(counterStore);
diff --git a/shopProDetail/detail/detail.vue b/shopProDetail/detail/detail.vue
new file mode 100644
index 0000000..1d064fe
--- /dev/null
+++ b/shopProDetail/detail/detail.vue
@@ -0,0 +1,274 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{currentIndex+1}}/{{imglist.length}}
+
+
+
+
+ 49.979.9
+ 新鲜黄牛牛肉200g+9g/份
+ 外红里黑属于牛肉内部缺氧导致，切开氧化静置会逐步 氧化发红，不影响食用
+
+
+
+
+
+
+
+ 图文详情
+
+
+
+
+
+
+
+
+ 为您推荐
+
+
+
+
+
+
+
+ 够辣
+
+
+
+
+
+ 糖醋排骨
+ 乡下土猪
+
+ 仅剩3份
+ 劲辣胃浓
+
+
+ 43.959.9
+
+
+
+
+
+
+
+
+ 够辣
+
+
+
+
+
+ 糖醋排骨
+ 乡下土猪
+
+ 仅剩3份
+ 劲辣胃浓
+
+
+ 43.959.9
+
+
+
+
+
+
+
+
+ 香甜
+
+
+
+
+
+ 泡椒田鸡
+ 超大只田鸡
+
+ 仅剩3份
+ 劲辣胃浓
+ 劲辣胃浓
+
+
+ 43.959.9
+
+
+
+
+
+
+
+
+
+
+ 热销
+
+
+
+
+
+ 泡椒田鸡
+ 超大只田鸡
+
+ 仅剩3份
+ 劲辣胃浓
+
+
+ 43.959.9
+
+
+
+
+
+
+
+
+ 新鲜
+
+
+
+
+
+ 泡椒田鸡
+ 超大只田鸡
+
+ 仅剩3份
+ 劲辣胃浓
+
+
+ 43.959.9
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/shopProDetail/detail/style.scss b/shopProDetail/detail/style.scss
new file mode 100644
index 0000000..6bf2af4
--- /dev/null
+++ b/shopProDetail/detail/style.scss
@@ -0,0 +1,522 @@
+page{
+ background: #f6f6f6;
+}
+.mian{
+ .shop_swiper{
+ width: 100%;
+ height: 750rpx;
+ position: relative;
+ .shop_swiper_wrap{
+ width: 100%;
+ height: 750rpx;
+ .shop_swiper_marquees{
+ width: 100%;
+ height: 100%;
+ .shop_swiper_img{
+ width: 100%;
+ height: 100%;
+ .shop_swiper_video_list{
+ width: 100%;
+ height: 100%;
+ }
+ .shop_swiper_imgUrl{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+ }
+ .currentNumber{
+ padding: 5rpx 5rpx 5rpx 5rpx;
+ position: absolute;
+ left: 43.5%;
+ bottom: 20rpx;
+ background-color: rgba(81, 63, 55, 0.8);
+ border-radius: 50rpx;
+ display: flex;
+ align-items: center;
+
+ .item_currentNumber{
+ font-size: 24rpx;
+ color: #cdcac6;
+ padding: 3rpx 10rpx 3rpx 10rpx;
+ border-radius: 10rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ .item_currentNumber_img{
+ width: 15rpx;
+ height: 15rpx;
+ display: block;
+ margin-right:5rpx;
+ }
+ }
+ .item_currentNumber_hover{
+ background-color: rgba(0, 0, 0, 0.8);
+ color: #fefefe;
+ font-weight: 500;
+ }
+ .item_currentNumber_width{
+ width: 73rpx;
+ }
+ }
+ }
+ .shop_head{
+ background: #FFFFFF;
+ margin: 20rpx 20rpx 0rpx 20rpx;
+ padding: 20rpx;
+ border-radius: 16rpx;
+ box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
+ .shop_price{
+ font-size: 43rpx;
+ color: #FF0000;
+ font-weight: 500;
+ }
+ .shop_title{
+ font-size: 36rpx;
+ color: #333333;
+ font-weight: 500;
+ margin-top: 10rpx;
+ }
+ .shop_desc{
+ font-size: 26rpx;
+ color: #999999;
+ margin-top: 10rpx;
+ }
+ }
+ .shop_comment{
+ background: #FFFFFF;
+ margin: 20rpx 20rpx 0rpx 20rpx;
+ border-radius: 16rpx;
+ box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
+ .shop_comment_head{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20rpx 40rpx 20rpx 20rpx;
+ .shop_comment_head_title{
+ font-size: 30rpx;
+ color: #333333;
+ font-weight: 500;
+ }
+ .shop_comment_head_arrow{
+ font-size: 26rpx;
+ color: #999999;
+ position: relative;
+ }
+ .shop_comment_head_arrow::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;
+ }
+ }
+ .shop_comment_tag{
+ display: flex;
+ overflow: hidden;
+ flex-wrap: wrap;
+ margin: 0rpx 20rpx 0rpx 20rpx;
+ border-bottom: 1rpx solid #f6f6f6;
+ .shop_comment_item{
+ padding: 0rpx 20rpx 0rpx 20rpx;
+ height: 45rpx;
+ background: #FFD7D7;
+ border-radius: 50rpx;
+ border: 1rpx solid #FFA0A0;
+ color: #FF5D5D;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 23rpx;
+ margin-right: 10rpx;
+ margin-bottom: 20rpx;
+ }
+ }
+ .shop_comment_cont{
+ padding: 0rpx 20rpx 0rpx 20rpx;
+ .shop_comment_cont_ul{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20rpx 0;
+ .shop_comment_cont_l{
+ display: flex;
+ align-items: center;
+ .shop_comment_cont_userimg{
+ width: 60rpx;
+ height: 60rpx;
+ background-color: #000000;
+ border-radius: 50rpx;
+ display: block;
+ }
+ .shop_comment_cont_username{
+ color: #000000;
+ font-size: 26rpx;
+ margin-left: 15rpx;
+ }
+ .shop_comment_cont_amount{
+ padding: 0 10rpx;
+ height: 34rpx;
+ background: #FFF4CD;
+ border-radius: 4rpx;
+ border: 1rpx solid #F9D448;
+ font-size: 22rpx;
+ color: #D0AA1B;
+ margin-left: 15rpx;
+ }
+ }
+ .shop_comment_cont_ip{
+ color: #999;
+ font-size: 23rpx;
+ }
+ }
+ .shop_comment_m{
+ overflow: hidden;
+ .shop_comment_title{
+ font-size: 27rpx;
+ color: #000000;
+ }
+ .shop_comment_item{
+ margin: 20rpx 0;
+ display: flex;
+ justify-content:space-between;
+ .shop_comment_itemImg{
+ width: 155rpx;
+ height: 155rpx;
+ background-color: #666666;
+ border-radius: 20rpx;
+ display: block;
+ }
+ }
+ }
+ }
+ .shop_ask{
+ font-size: 26rpx;
+ color: #333333;
+ }
+ .shop_answer{
+ font-size: 26rpx;
+ color: #666666;
+ }
+ .shop_padding{
+ padding: 0rpx 20rpx 20rpx 20rpx;
+ }
+ .shop_padding text{
+ vertical-align: middle;
+ display: inline-block;
+ }
+ .shop_ask::before {
+ vertical-align: middle;
+ content: "";
+ display: inline-block;
+ width: 30rpx;
+ height: 30rpx;
+ background-image: url('../../static/shopdetail/ask.png');
+ background-size: cover;
+ margin-right: 10rpx; /* 调整图片与标题的间距 */
+ }
+ .shop_answer::before {
+ content: "";
+ display: inline-block;
+ width: 30rpx;
+ height: 30rpx;
+ background-image: url('../../static/shopdetail/answer.png');
+ background-size: cover;
+ margin-right: 10rpx; /* 调整图片与标题的间距 */
+ vertical-align: middle;
+ }
+ }
+ .shop_detail{
+ margin: 20rpx 20rpx 0rpx 20rpx;
+ background-color: #FFFFFF;
+ border-top-left-radius: 16rpx;
+ border-top-right-radius: 16rpx;
+ .shop_detail_title{
+ color: #333333;
+ font-size: 30rpx;
+ padding: 25rpx 20rpx 25rpx 20rpx;
+ font-weight: 500;
+ }
+ .shop_detail_title::before{
+ content: "";
+ width: 10rpx;
+ height: 40rpx;
+ background: linear-gradient(180deg, #FF3135 0%, #f2f5f7 100%);
+ margin-right: 10rpx;
+ display: inline-block;
+ vertical-align: middle;
+ }
+ .shop_detail_img image{
+ width: 100%;
+ display: block;
+ }
+ }
+ .user_title{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 60rpx;
+ .user_name{
+ color: #FF0000;
+ font-size: 36rpx;
+ font-weight: 500;
+ margin: 0 10rpx 0 10rpx;
+ vertical-align: middle;
+ display: inline-block;
+ }
+ }
+ .user_title::before{
+ content: "";
+ vertical-align: middle;
+ display: inline-block;
+ width: 30rpx;
+ height: 30rpx;
+ background-image: url('../../static/user/leftimg.png');
+ background-size: cover;
+ margin-right: 10rpx;
+ }
+ .user_title::after{
+ vertical-align: middle;
+ content: "";
+ display: inline-block;
+ width: 30rpx;
+ height: 30rpx;
+ background-image: url('../../static/user/rightimg.png');
+ background-size: cover;
+ margin-left: 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: 32rpx;
+ 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: 998;
+ left: 0;
+ transform: translate3d(0, -100%, 0);
+ width: 100%;
+ top: 100%;
+ background: #FFFFFF;
+ padding-bottom: env(safe-area-inset-bottom);
+ padding-top: 20rpx;
+ border-top: 1rpx solid #F2F2F2;
+ .footer_cont{
+ padding-right: 20rpx;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .footer_l{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .footer_li{
+ width: 90rpx;
+ .footer_icon{
+ margin: 0 auto;
+ width: 50rpx;
+ height: 50rpx;
+ position: relative;
+ .footer_amount{
+ position: absolute;
+ right: -10rpx;
+ top:-10rpx;
+ width: 30rpx;
+ height: 30rpx;
+ border-radius: 50rpx;
+ background-color: #FF3135;
+ font-size: 18rpx;
+ color: #FFFFFF;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .footer_icon_img{
+ width: 50rpx;
+ height: 50rpx;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ }
+ }
+ .footer_name{
+ font-size: 20rpx;
+ color: #666666;
+ text-align: center;
+ }
+ }
+ }
+ .footer_r{
+ width:75%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .footer_btn{
+ width: 50%;
+ height: 75rpx;
+ font-size: 27rpx;
+ color: #9b5c1f;
+ background-color: #fbe7cf;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 500;
+ }
+ .footer_btn_bcg{
+ color: #FFFFFF;
+ background-color: #FD3F3F;
+ }
+ .border_l{
+ border-radius: 50rpx;
+ margin-right: 20rpx;
+ // border-top-left-radius: 20rpx;
+ // border-bottom-left-radius: 20rpx;
+ }
+ .border_r{
+ border-radius: 50rpx;
+ // border-top-right-radius: 20rpx;
+ // border-bottom-right-radius: 20rpx;
+ }
+ }
+ }
+ }
+ .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: 23rpx;
+ text-decoration: line-through;
+ margin-left: 5rpx;
+ font-weight: 400;
+ }
+}
\ No newline at end of file
diff --git a/static/shopdetail/answer.png b/static/shopdetail/answer.png
new file mode 100644
index 0000000..a150cea
Binary files /dev/null and b/static/shopdetail/answer.png differ
diff --git a/static/shopdetail/ask.png b/static/shopdetail/ask.png
new file mode 100644
index 0000000..f129255
Binary files /dev/null and b/static/shopdetail/ask.png differ
diff --git a/static/shopdetail/cart.png b/static/shopdetail/cart.png
new file mode 100644
index 0000000..9fed18c
Binary files /dev/null and b/static/shopdetail/cart.png differ
diff --git a/static/shopdetail/collect.png b/static/shopdetail/collect.png
new file mode 100644
index 0000000..dfb17b7
Binary files /dev/null and b/static/shopdetail/collect.png differ
diff --git a/static/sidedish/addCart.png b/static/sidedish/addCart.png
new file mode 100644
index 0000000..2a1f2cc
Binary files /dev/null and b/static/sidedish/addCart.png differ
diff --git a/static/sidedish/banner.jpg b/static/sidedish/banner.jpg
new file mode 100644
index 0000000..eec8276
Binary files /dev/null and b/static/sidedish/banner.jpg differ
diff --git a/static/sidedish/flame.png b/static/sidedish/flame.png
new file mode 100644
index 0000000..2c67f23
Binary files /dev/null and b/static/sidedish/flame.png differ
diff --git a/static/sidedish/no1.png b/static/sidedish/no1.png
new file mode 100644
index 0000000..ddd7aec
Binary files /dev/null and b/static/sidedish/no1.png differ
diff --git a/static/sidedish/no2.png b/static/sidedish/no2.png
new file mode 100644
index 0000000..abf7eab
Binary files /dev/null and b/static/sidedish/no2.png differ
diff --git a/static/sidedish/no3.png b/static/sidedish/no3.png
new file mode 100644
index 0000000..7e280f6
Binary files /dev/null and b/static/sidedish/no3.png differ
diff --git a/static/sidedish/no4.png b/static/sidedish/no4.png
new file mode 100644
index 0000000..186ad39
Binary files /dev/null and b/static/sidedish/no4.png differ