会员模块

project.private.config.json

@@ -9,9 +9,9 @@
     "miniprogram": {
       "list": [
         {
-          "name": "pages/seckillSub/seckillIndex/index",
-          "pathName": "pages/productDetail/index",
-          "query": "id=1",
+          "name": "pages/productManagement/index",
+          "pathName": "pages/earningsOrder/index",
+          "query": "",
           "launchMode": "default",
           "scene": null
         }

src/app.config.js

@@ -1,12 +1,16 @@
 
-import Taro from '@tarojs/taro'
 export default defineAppConfig({
   pages: [
     'pages/index/index',
     'pages/member/index',
     "pages/mine/index",
     "pages/seckillIndex/index",
-    "pages/productDetail/index"
+    "pages/productDetail/index",
+    "pages/storeManagement/index",
+    "pages/productManagement/index",
+    "pages/productClassify/index",
+    "pages/earningsDetail/index",
+    "pages/earningsOrder/index"
   ],
   subpackages: [
   ],

src/components/ProductCard/index.jsx

@@ -4,7 +4,7 @@ import './index.less'
 const ProductCard = ({ product }) => {
   return (
     <View className='product-card'>
-      <Image className='product-img' src={product.imageUrl} mode='aspectFill' />
+      <Image className='product-img' src={product.imageUrl} mode='widthFix' />
       <View className='product-content'>
         <Text className='title'>{product.name}</Text>
         <View className='price-row'>

src/components/ProductCard/index.less

@@ -4,15 +4,16 @@
     border-radius: 20px;
     display: flex;
     flex-wrap: wrap;
-    gap: 17px;
+    justify-content: space-between;
     .product-card {
-        width: 352px;
+        width: 332px;
         background-color: #fff;
         border-radius: 20px;
         margin-bottom: 10px;
         .product-img {
-            width: 352px;
-            height: 258px;
+            width: 100%;
+            height: 324px;
+            background-color: red;
         }
 
         .product-content {
@@ -40,6 +41,7 @@
                     color: #ff4d4f;
                     font-size: 36px;
                     line-height: 26px;
+                    margin-right: 10px;
                     .currency {
                         font-size: 22px;
                     }

src/components/index/ProductList/index.jsx

@@ -1,49 +1,73 @@
+import React, { useState } from "react";
 import { View, Text, Image } from "@tarojs/components";
+import { AtCheckbox } from "taro-ui";
 import Taro from "@tarojs/taro";
 import "./index.less";
-import joinStoreBg from '../../../images/index/jionStore.png'
-import saveMoneyBg from '../../../images/index/save-money.png'
-import shareEarnBg from '../../../images/index/share-earn.png'
-import seckillIcon from '../../../images/seckill/seckillIcon.png'
+import joinStoreBg from "../../../images/index/jionStore.png";
+import saveMoneyBg from "../../../images/index/save-money.png";
+import shareEarnBg from "../../../images/index/share-earn.png";
+import seckillIcon from "../../../images/seckill/seckillIcon.png";
 const ProductList = (props) => {
-  const { isSeckill } = props;
+  const { isSeckill } = props; //是否是秒杀产品引用
+  const { isManagement } = props; //是否是管理产品引用
+  const { isManagementStatus } = props; //是否是管理状态引用
+  const [selectedProducts, setSelectedProducts] = useState([]); // 管理选中的商品列表
   // 模拟商品数据
   const products = [
     {
       id: 1,
-      image: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
+      image:
+        "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
       name: "这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称",
       price: 99.99,
       originalPrice: 199.99,
       saveMoney: 10,
-      shareEarn: 20
+      shareEarn: 20,
     },
     {
-      id: 1,
-      image: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
+      id: 2,
+      image:
+        "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
       name: "这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称",
       price: 99.99,
       originalPrice: 199.99,
       saveMoney: 10,
-      shareEarn: 20
+      shareEarn: 20,
     },
     {
-      id: 1,
-      image: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
+      id: 3,
+      image:
+        "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
       name: "这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称",
       price: 99.99,
       originalPrice: 199.99,
       saveMoney: 10,
-      shareEarn: 20
+      shareEarn: 20,
     },
-    // ... 其他商品数据
   ];
   // 跳转产品详情
   const toDetail = (id) => {
-    Taro.navigateTo({
-      url: `/pages/productDetail/index?id=${id}`
+    // if(isManagementStatus){
+    //   handleChange()
+    // }else{
+    //   Taro.navigateTo({
+    //     url: `/pages/productDetail/index?id=${id}`,
+    //   });
+    // }
+  };
+  // 单选
+  const handleChange = (productId) => {
+    setSelectedProducts((prevSelected) => {
+      const isSelected = prevSelected.includes(productId);
+      if (isSelected) {
+        // 如果已经选中，则取消选择
+        return prevSelected.filter((id) => id !== productId);
+      } else {
+        // 如果未选中，则添加到选中列表
+        return [...prevSelected, productId];
+      }
     });
-  }
+  };
   return (
     <View className="product-list-wrap">
       {isSeckill && (
@@ -54,43 +78,63 @@ const ProductList = (props) => {
       )}
       {products.map((product, index) => (
         <View key={product.id}>
-          <View onClick={() => toDetail(product.id)} className="product-item">
-            <Image className="product-img" src={product.image} mode="aspectFill" />
-            <View className="product-info">
-              <View className="product-name" style={{"WebkitBoxOrient": "vertical"}}>
-                <Text className="self-tag">{!isSeckill ? '自营' : '鱼市秒杀'}</Text>
-                {product.name}
-              </View>
-              <View className="price-line">
-                <View className="price-info">
-                  <Text className="symbol">¥</Text>
-                  <Text className="price">{product.price}</Text>
-                  <Text className="original-price">¥{product.originalPrice}</Text>
+          <View className="product-item">
+            {isManagement && isManagementStatus && (
+              <AtCheckbox
+                options={[{ value: product.id.toString(), label: "" }]} // 确保每个复选框的 options 是独立的
+                selectedList={selectedProducts.map((id) => id.toString())}
+                onChange={(selectedList) => handleChange(product.id)} // 传递当前 product.id
+              />
+            )}
+            <View className="right">
+              <Image
+                className="product-img"
+                src={product.image}
+                mode="aspectFill"
+              />
+              <View className="product-info">
+                <View
+                  className="product-name"
+                  style={{ WebkitBoxOrient: "vertical" }}
+                >
+                  <Text className="self-tag">
+                    {!isSeckill ? "自营" : "鱼市秒杀"}
+                  </Text>
+                  {product.name}
                 </View>
-                {!isSeckill && (
-                  <View className="add-btn">
-                    <Image 
-                      className="join-store-bg" 
-                      src={joinStoreBg}
-                      mode="aspectFit"
-                    />
-                    <Text className="btn-text">加入小店</Text>
-                  </View>
-                )}
-              </View>
-              <View className="profit-line">
-                <View className="save-money">
-                  <Image className="bg" src={saveMoneyBg} mode="aspectFit" />
-                  <View className="content">
-                    <Text className="label">自购省</Text>
-                    <Text className="money">¥{product.saveMoney}</Text>
+                <View className="price-line">
+                  <View className="price-info">
+                    <Text className="symbol">¥</Text>
+                    <Text className="price">{product.price}</Text>
+                    <Text className="original-price">
+                      ¥{product.originalPrice}
+                    </Text>
                   </View>
+                  {!isSeckill && !isManagement && (
+                    <View className="add-btn">
+                      <Image
+                        className="join-store-bg"
+                        src={joinStoreBg}
+                        mode="aspectFit"
+                      />
+                      <Text className="btn-text">加入小店</Text>
+                    </View>
+                  )}
                 </View>
-                <View className="share-earn">
-                  <Image className="bg" src={shareEarnBg} mode="aspectFit" />
-                  <View className="content">
-                    <Text className="label">分享赚</Text>
-                    <Text className="money">¥{product.shareEarn}</Text>
+                <View className="profit-line">
+                  <View className="save-money">
+                    <Image className="bg" src={saveMoneyBg} mode="aspectFit" />
+                    <View className="content">
+                      <Text className="label">自购省</Text>
+                      <Text className="money">¥{product.saveMoney}</Text>
+                    </View>
+                  </View>
+                  <View className="share-earn">
+                    <Image className="bg" src={shareEarnBg} mode="aspectFit" />
+                    <View className="content">
+                      <Text className="label">分享赚</Text>
+                      <Text className="money">¥{product.shareEarn}</Text>
+                    </View>
                   </View>
                 </View>
               </View>
@@ -104,7 +148,7 @@ const ProductList = (props) => {
 };
 
 ProductList.defaultProps = {
-  isSeckill: false
+  isSeckill: false,
 };
 
-export default ProductList; 
+export default ProductList;

src/components/index/ProductList/index.less

@@ -3,34 +3,61 @@
   background: #FFFFFF;
   border-radius: 16px;
   position: relative;
-  
+
   .product-item {
     padding: 27px 20px 27px 17px;
     display: flex;
-    
+    align-items: center;
+
+    // 单选框内容
+    .at-checkbox::after,
+    .at-checkbox::before {
+      content: none;
+    }
+    .at-checkbox__option-wrap {
+      padding: 0 15px 0 0;
+    }
+
+    .at-checkbox__option {
+      padding: 0;
+    }
+
+    .at-checkbox__option--selected .at-checkbox__icon-cnt {
+      background-color: #f6c71a;
+    }
+
+    .at-checkbox__icon-cnt {
+      margin-right: 0;
+    }
+
+    .right {
+      display: flex;
+    }
+
     .product-img {
       width: 260px;
       height: 256px;
       margin-right: 20px;
       flex-shrink: 0;
     }
-    
+
     .product-info {
       flex: 1;
       min-width: 0; // 解决flex布局下文本溢出问题
       display: flex;
       flex-direction: column;
       justify-content: space-between;
+
       .product-name {
         font-size: 28px;
-        overflow : hidden;
+        overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         /* autoprefixer: ignore next */
         -webkit-box-orient: vertical;
-        
-        
+
+
         .self-tag {
           display: inline-block;
           padding: 2px 8px;
@@ -43,40 +70,40 @@
           vertical-align: middle;
         }
       }
-      
+
       .price-line {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        
+
         .price-info {
           display: flex;
           align-items: baseline;
-          
+
           .symbol {
             font-size: 22px;
             color: #FF1D17;
           }
-          
+
           .price {
             font-size: 36px;
             color: #FF1D17;
             font-weight: bold;
             margin-right: 8px;
           }
-          
+
           .original-price {
             font-size: 26px;
             color: #999999;
             text-decoration: line-through;
           }
         }
-        
+
         .add-btn {
           position: relative;
           width: 158px;
           height: 58px;
-          
+
           .join-store-bg {
             width: 100%;
             height: 100%;
@@ -84,7 +111,7 @@
             top: 0;
             left: 0;
           }
-          
+
           .btn-text {
             padding-left: 8px;
             position: absolute;
@@ -99,22 +126,25 @@
           }
         }
       }
-      
+
       .profit-line {
         display: flex;
         gap: 20px;
-        .save-money{
-            color: #F6C71A;
+
+        .save-money {
+          color: #F6C71A;
         }
-        .share-earn{
-            color: #fff;
+
+        .share-earn {
+          color: #fff;
         }
+
         .save-money,
         .share-earn {
           position: relative;
           width: 192px;
           height: 84px;
-          
+
           .bg {
             width: 100%;
             height: 100%;
@@ -122,7 +152,7 @@
             top: 0;
             left: 0;
           }
-          
+
           .content {
             position: relative;
             z-index: 1;
@@ -132,7 +162,7 @@
             align-items: center;
             justify-content: center;
             font-size: 28px;
-            
+
             .label,
             .money {
               line-height: 41px;
@@ -142,20 +172,22 @@
       }
     }
   }
-  
+
   .divider {
     height: 1px;
     margin: 0 17px 0 20px;
     border-top: 1px dashed #D8D8D8;
   }
-  .seckill-icon{
+
+  .seckill-icon {
     padding: 18px 0 0 17px;
     font-size: 26px;
     font-weight: bold;
-    Image{
+
+    Image {
       height: 26px;
       width: 26px;
       margin-right: 10px;
     }
   }
-} 
+}

src/pages/earningsDetail/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '收益详情'
+})

src/pages/earningsDetail/index.jsx

@@ -0,0 +1,65 @@
+import { Component } from 'react'
+import { View, Text } from '@tarojs/components'
+import './index.less'
+
+export default class Index extends Component {
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    return (
+      <View className='index'>
+        <View className='earnings-list'>
+          <View className='earnings-list-item'>
+            <View className='item-line title-one'>
+              <Text className='title'>今天预估总收益</Text>
+              <Text className='money'>￥100.00</Text>
+            </View>
+            <View className='dotted-line'></View>
+            <View className='item-line title-two'>
+              <Text className='title'>预估推广收益</Text>
+              <Text className='money'>￥70.00</Text>
+            </View>
+            <View className='line'></View>
+            <View className='item-line title-two'>
+              <Text className='title'>预估推广收益</Text>
+              <Text className='money'>￥70.00</Text>
+            </View>
+            <View className='item-line'>
+              <Text className='title'>惊喜红包</Text>
+              <Text className='money'>￥70.00</Text>
+            </View>
+            <View className='item-line'>
+              <Text className='title'>惊喜红包</Text>
+              <Text className='money'>￥70.00</Text>
+            </View>
+            <View className='item-line'>
+              <Text className='title'>惊喜红包</Text>
+              <Text className='money'>￥70.00</Text>
+            </View>
+            <View className='item-line'>
+              <Text className='title'>惊喜红包</Text>
+              <Text className='money'>￥70.00</Text>
+            </View>
+            <View className='item-line'>
+              <Text className='title'>惊喜红包</Text>
+              <Text className='money'>￥70.00</Text>
+            </View>
+            <View className='item-line'>
+              <Text className='title'>惊喜红包</Text>
+              <Text className='money'>￥70.00</Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    )
+  }
+}

src/pages/earningsDetail/index.less

@@ -0,0 +1,61 @@
+.index {
+    background-color: #f9f9f9;
+    padding: 20px 16px;
+    box-sizing: border-box;
+    min-height: 100vh;
+
+    .earnings-list {
+        .dotted-line{
+            width: 100%;
+            border: 1px dashed #D8D8D8;
+            margin: 6px 0 30px 0;
+        }
+        .line {
+            width: 100%;
+            border: 1px solid #D8D8D8;
+            margin: 9px 0 30px 0;
+        }
+        .earnings-list-item {
+            padding: 30px 17px 7px 17px;
+            box-sizing: border-box;
+            background-color: #fff;
+            border-radius: 20px;
+
+            .item-line {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                font-size: 26px;
+                color: #BDBDBD;
+                margin-bottom: 20px;
+
+            }
+
+            .title-one {
+                .title {
+                    color: #000000;
+                    line-height: 43px;
+                    font-size: 30px;
+                }
+
+                .money {
+                    color: #FF1D17;
+                    font-size: 30px;
+                }
+            }
+
+            .title-two {
+                .title {
+                    color: #A19D99;
+                    font-size: 28px;
+                    line-height: 41px;
+                }
+
+                .money {
+                    color: #A19D99;
+                    font-size: 28px;
+                }
+            }
+        }
+    }
+}

src/pages/earningsOrder/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '我的小店'
+})

src/pages/earningsOrder/index.jsx

@@ -0,0 +1,159 @@
+import { Component } from "react";
+import { View, Text, Image, Picker } from "@tarojs/components";
+import { AtDivider } from "taro-ui";
+import "./index.less";
+import selectIcon from "../../images/productManagement/selectIcon.png";
+import vip from "../../images/earningsOrder/vip.png";
+import Taro from "@tarojs/taro";
+
+export default class Index extends Component {
+  state = {
+    current: 0,
+    productOptions: ["全部", "咸鱼商品", "自建商品"], //商品下拉选项
+    selectedProduct: "全部", //商品默认名称
+    timeOptions: ["全部时间", "一个月前", "一周前"], //下单时间下拉选项
+    selectTime: "下单时间", //下单时间
+    tabList: [
+      { title: "全部", num: 0 },
+      { title: "已付款", num: 0 },
+      { title: "已完成", num: 2 },
+      { title: "已结算", num: 10 },
+      { title: "无效", num: 0 },
+    ],
+  };
+
+  handleTabClick = (index) => {
+    this.setState({ current: index });
+  };
+  // 下单时间下拉选项
+  timeSelectOption = (e) => {
+    const selectTime = this.state.timeOptions[e.detail.value];
+    this.setState({ selectTime });
+  };
+  // 商品下拉选项
+  productSelectOption = (e) => {
+    const selectedProduct = this.state.productOptions[e.detail.value];
+    this.setState({ selectedProduct });
+  };
+  handleCopy = async (text) => {
+    try {
+      await Taro.setClipboardData({
+        data: text,
+      });
+      Taro.showToast({
+        title: "内容已复制",
+        icon: "success",
+        duration: 2000,
+      });
+    } catch (error) {
+      Taro.showToast({
+        title: "复制失败",
+        icon: "error",
+        duration: 2000,
+      });
+    }
+  };
+
+  render() {
+    const { current, tabList } = this.state;
+    return (
+      <View className="index">
+        {/* tab切换 */}
+        <View className="tab-container">
+          {tabList.map((tab, index) => (
+            <View
+              key={index}
+              className={`tab-item ${current === index ? "active" : ""}`}
+              onClick={() => this.handleTabClick(index)}
+            >
+              <Text>{tab.title}</Text>
+              {tab.num > 0 && <Text className="tag">{tab.num}</Text>}
+            </View>
+          ))}
+        </View>
+        {/* 下拉筛选 */}
+        <View className="filter-container">
+          <Picker
+            mode="selector"
+            range={this.state.timeOptions}
+            onChange={this.timeSelectOption}
+          >
+            <View className="filter-item">
+              <Text>{this.state.selectTime}</Text>
+              <Image src={selectIcon} className="select-icon" />
+            </View>
+          </Picker>
+          <Picker
+            mode="selector"
+            range={this.state.productOptions}
+            onChange={this.productSelectOption}
+          >
+            <View className="filter-item">
+              <Text>{this.state.selectedProduct}</Text>
+              <Image src={selectIcon} className="select-icon" />
+            </View>
+          </Picker>
+        </View>
+        {/* 订单列表 */}
+        <View className="order-list">
+          <View className="order-item">
+            {/* 头部信息 */}
+            <View className="order-header">
+              <View className="user-info">
+                <Image className="avatar" src="" />
+                <Text className="username">张三</Text>
+              </View>
+              <Text className="pay-status">已付款</Text>
+            </View>
+            <AtDivider content="" />
+            {/* 订单信息 */}
+            <View className="order-info">
+              <View className="order-details">
+                <View className="detail-item">
+                  <Text className="label">订单编号:</Text>
+                  <Text className="value">2024031512345</Text>
+                  <Text
+                    className="copy-text"
+                    onClick={() => this.handleCopy("2024031512345")}
+                  >
+                    复制
+                  </Text>
+                </View>
+                <View className="detail-item">
+                  <Text className="label">下单时间:</Text>
+                  <Text className="value">2024-03-15 12:34:56</Text>
+                </View>
+                <View className="detail-item">
+                  <Text className="label">订单类型:</Text>
+                  <Text className="value">普通订单</Text>
+                </View>
+              </View>
+              <View className="member-info">
+                <Image className="member-icon" src={vip} />
+                <Text className="member-text">闲鱼会员</Text>
+              </View>
+            </View>
+
+            {/* 产品信息 */}
+            <View className="product-info">
+              <Image className="product-image" src="" />
+              <View className="product-details">
+                <Text className="product-name">
+                  这是一个很长的产品名称这是一个很长的产品名称这是一个很长的产品名称
+                </Text>
+                <View className="promotion-info">
+                  <View className="tag">推广收入</View>
+                  <Text className="amount">¥99.99</Text>
+                </View>
+                <View className="payment-info">
+                  <Text className="label">实付金额:</Text>
+                  <Text className="amount">¥199.99</Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    );
+  }
+}

src/pages/earningsOrder/index.less

@@ -0,0 +1,241 @@
+.index {
+    background-color: #f9f9f9; // ... 其他样式 ...
+    min-height: 100vh;
+}
+
+// tab切换
+.tab-container {
+    display: flex;
+    justify-content: space-between;
+    background-color: #fff;
+    padding: 22px 34px;
+    box-sizing: border-box;
+
+    .tab-item {
+        font-size: 26px;
+        color: #000000;
+
+        .tag {
+            margin-left: 4px;
+            font-size: 26px;
+            color: #fff;
+            background-color: #f6c71a;
+            border-radius: 20px;
+            padding: 2px 20px;
+            font-weight: normal;
+        }
+    }
+
+    .tab-item.active {
+        color: #F6C71A;
+        /* 高亮颜色 */
+        font-size: 28px;
+        font-weight: bold;
+    }
+}
+
+// 下拉筛选
+.filter-container {
+    border-top: 1px solid #F4F4F4;
+    background-color: #fff;
+    height: 70px;
+    padding: 0 134px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .filter-item {
+        display: flex;
+        align-items: center;
+        font-size: 26px;
+        color: #000000;
+
+        .select-icon {
+            width: 14px;
+            height: 14px;
+            margin-left: 4px;
+        }
+    }
+}
+
+// 订单列表样式
+.order-list {
+    padding: 24px;
+
+    .at-divider {
+        height: 0;
+        margin-bottom: 18px;
+    }
+
+    .order-item {
+        background: #FFFFFF;
+        border-radius: 20px;
+        padding: 0 18px 34px 18px;
+        margin-bottom: 24px;
+        box-sizing: border-box;
+
+        .order-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 98px;
+
+            .user-info {
+                display: flex;
+                align-items: center;
+
+                .avatar {
+                    width: 58px;
+                    height: 58px;
+                    background-color: red;
+                    border-radius: 50%;
+                    margin-right: 10px;
+                }
+
+                .username {
+                    font-size: 26px;
+                    color: #000000;
+                }
+            }
+
+            .pay-status {
+                color: #FB8E36;
+                font-size: 26px;
+            }
+        }
+
+        .order-info {
+            display: flex;
+            justify-content: space-between;
+            padding-bottom: 24px;
+
+            .order-details {
+                .detail-item {
+                    display: flex;
+                    align-items: center;
+                    margin-bottom: 8px;
+
+                    .label {
+                        color: #999;
+                        font-size: 22px;
+                        margin-right: 12px;
+                        line-height: 32px;
+                    }
+
+                    .value {
+                        color: #999;
+                        font-size: 22px;
+                        line-height: 32px;
+                    }
+
+                    .copy-text {
+                        color: #F6C71A;
+                        font-size: 22px;
+                        margin-left: 30px;
+                        line-height: 32px;
+                    }
+                }
+            }
+
+            .member-info {
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-start;
+                align-items: center;
+
+                .member-icon {
+                    width: 58px;
+                    height: 49px;
+                }
+
+                .member-text {
+                    font-size: 18px;
+                    color: #E7BE78;
+                    line-height: 26px;
+                    margin-top: 4px;
+                }
+            }
+        }
+
+        .product-info {
+            display: flex;
+            padding-top: 20px;
+            height: 168px;
+
+            .product-image {
+                width: 297px;
+                height: 168px;
+                background-color: red;
+                border-radius: 8px;
+                margin-right: 16px;
+            }
+
+            .product-details {
+                flex: 1;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+
+                .product-name {
+                    font-size: 28px;
+                    color: #000000;
+                    line-height: 41px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                    margin-bottom: 16px;
+                }
+
+                .promotion-info {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-bottom: 16px;
+                    height: 30px;
+                    width: fit-content;
+                    border-radius: 10px;
+
+                    .tag {
+                        color: #F6C71A;
+                        font-size: 18px;
+                        z-index: 1;
+                        background-color: #fff;
+                        padding: 2px 6px;
+                        box-sizing: border-box;
+                        border: 1px solid #F6C71A;
+                    }
+
+                    .amount {
+                        color: #fff;
+                        font-size: 18px;
+                        z-index: 1;
+                        background-color: #f6c71a;
+                        padding: 2px 4px;
+                        box-sizing: border-box;
+                        border: 1px solid #F6C71A;
+                    }
+                }
+
+                .payment-info {
+                    display: flex;
+                    align-items: center;
+                    font-weight: 500;
+
+                    .label {
+                        color: #000000;
+                        font-size: 22px;
+                        margin-right: 10px;
+                    }
+
+                    .amount {
+                        color: #000000;
+                        font-size: 22px;
+                    }
+                }
+            }
+        }
+    }
+}

src/pages/index/index.less

@@ -58,6 +58,7 @@
       .at-tabs__header {
         background-color: transparent;
         height: 100%;
+        text-align: left;
       }
 
       .at-tabs__item {

src/pages/member/index.jsx

@@ -1,5 +1,7 @@
 import { Component } from "react";
 import { View, Text, Image } from "@tarojs/components";
+import { AtIcon } from "taro-ui";
+import Taro from "@tarojs/taro";
 import "./index.less";
 import vip from "../../images/member/vip.png";
 import home from "../../images/nav/home.png";
@@ -36,7 +38,7 @@ export default class Index extends Component {
               </View>
             </View>
             {/* 我的小店 */}
-            <View className="my-shop">
+            <View onClick={() => Taro.navigateTo({ url: `/pages/storeManagement/index?isManager=${true}` })} className="my-shop">
               <Image className="my-shop-icon" src={home} />
               <Text className="my-shop-text">我的小店</Text>
             </View>
@@ -46,16 +48,16 @@ export default class Index extends Component {
             <Text className="estimated-income-title">预估收益</Text>
             <View className="estimated-income-content">
               <View className="income-item">
-                <Text className="amount">¥0.00</Text>
+                <Text className="amount">0.00</Text>
                 <Text className="label">今日预估收益</Text>
               </View>
               <View className="divider"></View>
               <View className="income-item">
-                <Text className="amount">¥0.00</Text>
+                <Text className="amount">0.00</Text>
                 <Text className="label">累计收益</Text>
               </View>
             </View>
-            <view className="estimated-income-detail">
+            <view onClick={() => Taro.navigateTo({ url: `/pages/earningsDetail/index` })} className="estimated-income-detail">
               收益详情
               <Image className="to-detail" src={toDetail} />
             </view>
@@ -77,6 +79,33 @@ export default class Index extends Component {
               <View className="right">点击提现</View>
             </View>
           </View>
+          {/* 今日订单 */}
+          <View className="today-order">
+            <View className="today-order-header">
+              <View className="today-order-header-left">
+                <Image className="today-order-icon" src={order} />
+                <Text className="today-order-title">今日订单</Text>
+              </View>
+              <View className="today-order-header-right">
+                历史订单
+                <AtIcon value='chevron-right' size='10' color='#A1A1A1'></AtIcon>
+              </View>
+            </View>
+            <View className="today-order-content">
+              <View className="order-item">
+                <Text className="label">订单总量</Text>
+                <Text className="amount">0</Text>
+              </View>
+              <View className="order-item">
+                <Text className="label">推广订单</Text>
+                <Text className="amount">0</Text>
+              </View>
+              <View className="order-item">
+                <Text className="label">购买历史</Text>
+                <Text className="amount">0</Text>
+              </View>
+            </View>
+          </View>
         </View>
       </View>
     );

src/pages/member/index.less

@@ -248,4 +248,71 @@
             }
         }
     }
+
+    // 今日订单
+    .today-order {
+        margin-top: 20px;
+        .today-order-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 12px;
+            .today-order-header-left{
+                display: flex;
+                align-items: center;
+                .today-order-icon {
+                    width: 36px;
+                    height: 36px;
+                }
+    
+                .today-order-title {
+                    font-size: 28px;
+                    color: #000000;
+                    line-height: 40px;
+                    font-weight: 700;
+                    margin-left: 10px;
+                }
+            }
+            .today-order-header-right{
+                font-size: 22px;
+                color: #A1A1A1;
+                line-height: 40px;
+                margin-right: 10px;
+                display: flex;
+                align-items: center;
+            }
+        }
+        .today-order-content {
+            width: 100%;
+            height: 142px;
+            border-radius: 20px;
+            background-color: #fff;
+            padding: 0 20px;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .order-item {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: space-between;
+
+                .label {
+                    font-size: 24px;
+                    color: #A1A1A1;
+                    line-height: 40px;
+                }
+
+                .amount {
+                    font-size: 28px;
+                    font-weight: 700;
+                    color: #000000;
+                    line-height: 40px;
+                }
+            }
+        }
+    }
 }

src/pages/productClassify/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '商品分类'
+})

src/pages/productClassify/index.jsx

@@ -0,0 +1,46 @@
+import { Component } from "react";
+import { View, Text } from "@tarojs/components";
+import { AtTabs, AtTabsPane } from "taro-ui";
+import "./index.less";
+import Taro from "@tarojs/taro";
+import ProductList from '../../components/index/ProductList'
+
+export default class Index extends Component {
+  state = {
+    current: 0, // 当前选中的标签页索引
+    tabList: [
+      { title: "全部商品" },
+      { title: "选项2" },
+      { title: "选项3" },
+      { title: "选项4" },
+    ], // 标签页列表
+  };
+  handleClick(value) {
+    this.setState({
+      current: value,
+    });
+  }
+  render() {
+    return (
+      <View className="index">
+        <AtTabs
+          current={this.state.current}
+          tabList={this.state.tabList}
+          onClick={this.handleClick.bind(this)}
+        >
+          {this.state.tabList.map((tab, index) => (
+            <AtTabsPane current={this.state.current} index={index} key={index}>
+              <View className="tab-content">
+                <ProductList />
+              </View>
+            </AtTabsPane>
+          ))}
+        </AtTabs>
+        {/* 底部按钮 */}
+        <View onClick={() => Taro.navigateBack()} className="bottom-button">
+          返回店铺首页
+        </View>
+      </View>
+    );
+  }
+}

src/pages/productClassify/index.less

@@ -0,0 +1,37 @@
+.index {
+    min-height: 100vh;
+    background-color: #f9f9f9;
+    padding-bottom: 100px;
+    padding-top: 80px;
+    .at-tabs__header{
+        position: fixed;
+        top: 0;
+        width: 100%;
+        z-index: 1;
+    }
+    .at-tabs__item {
+        color: #787878;
+    }
+
+    .at-tabs__item--active {
+        color: #000000 !important;
+    }
+
+    .at-tabs__item-underline {
+        background-color: #f3e801;
+    }
+
+    .bottom-button {
+        width: 100%;
+        height: 88px;
+        background-color: #F6C71A;
+        font-weight: 700;
+        font-size: 28px;
+        color: #3D3D3D;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        bottom: 0;
+    }
+}

src/pages/productManagement/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '商品管理'
+})

src/pages/productManagement/index.jsx

@@ -0,0 +1,141 @@
+import { Component } from "react";
+import { View, Picker, Image, Text } from "@tarojs/components";
+import { AtTabs, AtTabsPane, AtCheckbox } from "taro-ui";
+import Taro from "@tarojs/taro";
+import "./index.less";
+import ProductList from "../../components/index/ProductList"; //商品列表
+import add from "../../images/productManagement/add.png";
+import back from "../../images/productManagement/back.png";
+import manger from "../../images/productManagement/manger.png";
+import selectIcon from "../../images/productManagement/selectIcon.png";
+import deleteIcon from "../../images/productManagement/delete.png";
+import toTop from "../../images/productManagement/toTop.png";
+export default class Index extends Component {
+  state = {
+    isManagementStatus: false, //是否是管理状态
+    current: 0, //tabs坐标
+    selectedOption: "全部商品", //商品默认名称
+    tabList: [{ title: "在售中 (20)" }], //tabs标题
+    options: ["全部商品", "选项2", "选项3"], //商品下拉选项
+    checkedList: ["all"], //全选
+    checkboxOption: [
+      {
+        value: "allValue",
+        label: "全选",
+      },
+    ], //全选
+  };
+  // tabs切换
+  handleClick(value) {
+    this.setState({
+      current: value,
+    });
+  }
+  // 商品下拉选项
+  handleSelectOption = (e) => {
+    const selectedOption = this.state.options[e.detail.value];
+    this.setState({ selectedOption });
+  };
+  // 切换管理状态
+  changeManagement = (type) => {
+    if(type === 'management'){
+      this.setState({
+        isManagementStatus: true,
+      });
+    }else{
+      this.setState({
+        isManagementStatus: false,
+      });
+    }
+  };
+  // 全选
+  handleChange(value) {
+    this.setState({
+      checkedList: value,
+    });
+  }
+  render() {
+    return (
+      <View className="index">
+        {/* tab分类 */}
+        <View className="tabs-list">
+          <AtTabs
+            tabList={this.state.tabList}
+            current={this.state.current}
+            scroll
+          >
+            <AtTabsPane current={this.state.current} index={0}>
+              {/* 内容 */}
+              <View className="tabs-content">
+                {/* 商品下拉分类 */}
+                <View className="product-category">
+                  <Picker
+                    mode="selector"
+                    range={this.state.options}
+                    onChange={this.handleSelectOption}
+                  >
+                    <View className="product-category-left">
+                      {this.state.selectedOption}
+                      <Image
+                        className="selectIcon"
+                        src={selectIcon}
+                        mode="aspectFit"
+                      />
+                    </View>
+                  </Picker>
+                  <View className="product-category-right">
+                    前6款商品将推荐给直属会员
+                  </View>
+                </View>
+                {/* 商品列表 */}
+                <ProductList isManagement={true} isManagementStatus={this.state.isManagementStatus}/>
+              </View>
+            </AtTabsPane>
+          </AtTabs>
+        </View>
+        {/* 底部购买模块 */}
+        {!this.state.isManagementStatus ? (
+          <View className="bottom-buy">
+            <View onClick={() => Taro.navigateBack()} className="bottom-buy-left">
+              <Image  src={back} mode="aspectFit" />
+              <Text className="bottom-buy-text">返回店铺</Text>
+            </View>
+            <View className="bottom-buy-right">
+              <View onClick={() => this.changeManagement('management')} className="bottom-buy-right-self">
+                <Image src={manger} mode="aspectFit" />
+                <Text className="bottom-buy-text">批量管理</Text>
+              </View>
+              <View onClick={() => Taro.navigateTo({ url: '/pages/productClassify/index' })} className="bottom-buy-right-share">
+                <Image src={add} mode="aspectFit" />
+                <Text className="bottom-buy-text">添加商品</Text>
+              </View>
+            </View>
+          </View>
+        ) : (
+          <View className="operation-product">
+            <View className="operation-product-top">
+              <View className="left">
+                <AtCheckbox
+                  options={this.state.checkboxOption}
+                  selectedList={this.state.checkedList}
+                  onChange={this.handleChange.bind(this)}
+                />
+              </View>
+              <View className="right">
+                <View className="item">
+                  <Image src={toTop} mode="aspectFit" />
+                  <Text>移至顶部</Text>
+                </View>
+                <View className="item">
+                  <Image src={deleteIcon} mode="aspectFit" />
+                  <Text>删除</Text>
+                </View>
+              </View>
+            </View>
+            <View onClick={() => this.changeManagement('finish')} className="operation-product-bottom">完成</View>
+          </View>
+        )}
+      </View>
+    );
+  }
+}

src/pages/productManagement/index.less

@@ -0,0 +1,197 @@
+.index {
+    background-color: #f9f9f9;
+    min-height: 100vh;
+    .tabs-list {
+        box-sizing: border-box;
+        box-sizing: border-box;
+        background-color: #fff;
+        .at-tabs__header {
+            background-color: transparent;
+            height: 57px;
+            text-align: left;
+        padding-left: 22px;
+
+        }
+  
+        .at-tabs__item {
+          color: #000;
+          font-size: 26px;
+          padding: 0;
+          margin-right: 34px;
+          height: 100%;
+          &--active {
+            color: #F6C71A;
+            font-size: 28px;
+          }
+        }
+  
+        .at-tabs__item-underline {
+          background-color: #F6C71A;
+          height: 4px;
+          border-radius: 2px;
+          bottom: 0;
+          width: 80px;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+        .at-tabs__underline {
+            display: none;
+        }
+        .tabs-content{
+            width: 100%;
+            border-radius: 0 0 20px 20px;
+            .product-category{
+                height: 74px;
+                width: 100%;
+                padding: 0 16px 0 37px;
+                box-sizing: border-box;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                background-color: #f9f9f9;
+                .product-category-left{
+                    color: #666666;
+                    font-size: 26px;
+                    line-height: 38px;
+                    display: flex;
+                    align-items: center;
+                    .selectIcon{
+                        height: 16px;
+                        width: 16px;
+                        margin-left: 8px;
+                    }
+                }
+                .product-category-right{
+                    color: #E5A17C;
+                    line-height: 35px;
+                    font-size: 24px;
+                }
+            }
+        }
+      }
+      // 底部购买模块
+      .bottom-buy {
+        width: 100%;
+        background-color: #fff;
+        height: 126px;
+        padding: 19px 22px 19px 32px;
+        box-sizing: border-box;
+        position: fixed;
+        bottom: 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .bottom-buy-left {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            image {
+                width: 38px;
+                height: 36px;
+                margin-right: 8px;
+            }
+
+            .bottom-buy-text {
+                font-size: 26px;
+                line-height: 38px;
+                color: #000000;
+            }
+        }
+        .bottom-buy-right {
+            width: 513px;
+            height: 100%;
+            display: flex;
+            border-radius: 60px;
+            overflow: hidden;
+            .bottom-buy-right-self,.bottom-buy-right-share{
+                line-height: 43px;
+                font-size: 30px;
+                width: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                image{
+                    margin-right: 9px;
+                }
+            }
+            .bottom-buy-right-self{
+                background-color: #fbe00f;
+                color: #000000;
+                image{
+                    width: 28px;
+                    height: 26px;
+                }
+            }
+            .bottom-buy-right-share{
+                background-color: #ff1c14;
+                color: #fff;
+                image{
+                    width: 28px;
+                    height: 28px;
+                }
+            }
+        }
+    }
+    // 操作按钮
+    .operation-product{
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+        height: 176px;
+        background-color: #fff;
+        .operation-product-top{
+            height: 50%;
+            display: flex;
+            align-items: center;
+            padding: 0 63px 0 37px;
+            box-sizing: border-box;
+            justify-content: space-between;
+            .at-checkbox::after,.at-checkbox::before{
+                content: none;
+            }
+            .at-checkbox__option-wrap {
+                padding-top: 0;
+                padding-bottom: 0;
+              }
+            .at-checkbox__option{
+                padding: 0;
+            }
+            .at-checkbox__option--selected .at-checkbox__icon-cnt{
+                background-color: #f6c71a;
+            }
+            .at-checkbox__icon-cnt{
+                margin-right: 10px;
+            }
+            .at-checkbox__title{
+                color: #000000;
+            }
+            .right{
+                display: flex;
+                align-items: center;
+                .item{
+                    display: flex;
+                    align-items: center;
+                    color: #000000;
+                    font-size: 26px;
+                    margin-left: 49px;
+                    Image{
+                        width: 32px;
+                        height: 23px;
+                        margin-right: 4px;
+                    }
+                }
+            }
+        }
+        .operation-product-bottom{
+            height: 50%;
+            background-color: #F6C71A;
+            font-size: 30px;
+            color: #3D3D3D;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+}
+

src/pages/storeManagement/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '店铺管理'
+})

src/pages/storeManagement/index.jsx

@@ -0,0 +1,115 @@
+import { Component } from "react";
+import { View, Text, Image } from "@tarojs/components";
+import { AtIcon } from "taro-ui";
+import "./index.less";
+import storeManagement from "../../images/storeManagement/storeManagement.png";
+import storeManagementIcon from "../../images/storeManagement/storeManagementIcon.png";
+import ProductCard from "../../components/ProductCard"; //卡片模块
+import Taro from "@tarojs/taro";
+
+export default class Index extends Component {
+  state = {
+    isManager: true,
+    productList: [
+      {
+        id: 1,
+        name: "青岛大虾",
+        price: 99.9,
+        originalPrice: 159.9,
+        image: "https://example.com/img1.jpg",
+        sales: 1234,
+        tag: "热销",
+      },
+      {
+        id: 2,
+        name: "三文鱼刺身",
+        price: 158,
+        originalPrice: 198,
+        image: "https://example.com/img2.jpg",
+        sales: 856,
+        tag: "新品",
+      },
+      {
+        id: 3,
+        name: "帝王蟹",
+        price: 299,
+        originalPrice: 399,
+        image: "https://example.com/img3.jpg",
+        sales: 566,
+        tag: "限时",
+      },
+    ],
+  };
+
+  componentWillMount() {}
+
+  componentDidMount() {
+    const { router } = Taro.getCurrentInstance();
+    const params = router.params;
+    this.setState({
+      isManager: params.isManager,
+    });
+  }
+
+  componentWillUnmount() {}
+
+  componentDidShow() {}
+
+  componentDidHide() {}
+
+  render() {
+    return (
+      <View className="index">
+        {/* 头部卡片 */}
+        <View className="header-card">
+          <Image className="bg-image" src={storeManagement} mode="widthFix" />
+          {/* 分享店铺 */}
+          <View className="share-shop">
+            <Text>分享店铺</Text>
+            <AtIcon value="chevron-right" size="10" color="#fff"></AtIcon>
+          </View>
+          {/* 个人信息 */}
+          <View className="user-info">
+            <View className="avatar-wrapper">
+              <Image className="avatar" src="" />
+              <View className="change-avatar-btn">更换头像</View>
+            </View>
+            <View className="info-content">
+              <Text className="name">张三</Text>
+              <Text className="desc">这里是店铺介绍文字内容</Text>
+            </View>
+          </View>
+        </View>
+        {/* 商品列表 */}
+        <View className="product-list">
+          <View className="product-list-title">
+            <Text className="title">店长推荐</Text>
+            <Text className="icon"></Text>
+          </View>
+          <View className="product-card-list">
+            {this.state.productList.map((product) => (
+              <ProductCard key={product.id} product={product} />
+            ))}
+          </View>
+          {/* 底部购买模块 */}
+          {this.state.isManager && (
+            <View className="bottom-buy">
+              <View className="bottom-buy-left">
+                <Image src={storeManagementIcon} mode="aspectFit" />
+                <Text className="bottom-buy-text">浏览店铺</Text>
+              </View>
+              <View className="bottom-buy-right">
+                <View className="bottom-buy-right-self">
+                  <Text className="bottom-buy-text">店铺模版</Text>
+                </View>
+                <View onClick={() => Taro.navigateTo({ url:'/pages/productManagement/index' })} className="bottom-buy-right-share">
+                  <Text  className="bottom-buy-text">商品管理</Text>
+                </View>
+              </View>
+            </View>
+          )}
+        </View>
+      </View>
+    );
+  }
+}

src/pages/storeManagement/index.less

@@ -0,0 +1,184 @@
+.index {
+    padding: 18px 16px 0 16px;
+    box-sizing: border-box;
+    background-color: #f9f9f9;
+    padding-bottom: 150px;
+    .header-card {
+        width: 100%;
+        height: 256px;
+        position: relative;
+        padding: 80px 0 0 17px;
+        box-sizing: border-box;
+
+        .bg-image {
+            width: 100%;
+            height: 256px;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+
+        .user-info {
+            position: relative;
+            z-index: 1;
+            display: flex;
+            align-items: center;
+
+            .avatar-wrapper {
+                position: relative;
+                width: 116px;
+                height: 116px;
+                margin-right: 28px;
+
+                .avatar {
+                    width: 116px;
+                    height: 116px;
+                    border-radius: 50%;
+                    background-color: red;
+                }
+
+                .change-avatar-btn {
+                    position: absolute;
+                    bottom: -6px;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    width: 85px;
+                    height: 26px;
+                    background: #3d3d3d;
+                    border-radius: 13px;
+                    color: #FFFFFF;
+                    font-size: 16px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+            }
+
+            .info-content {
+                display: flex;
+                flex-direction: column;
+                color: #FFFFFF;
+
+                .name {
+                    font-size: 34px;
+                    line-height: 40px;
+                    margin-bottom: 14px;
+                }
+
+                .desc {
+                    font-size: 18px;
+                    line-height: 40px;
+                    opacity: 0.8;
+                }
+            }
+        }
+
+        .share-shop {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            z-index: 1;
+            display: flex;
+            align-items: center;
+            color: #FFFFFF;
+            font-size: 14px;
+            justify-content: center;
+            align-items: center;
+
+            Text {
+                font-size: 22px;
+                line-height: 40px;
+                margin-right: 7px;
+            }
+        }
+    }
+
+    // 产品列表
+    .product-list {
+        background-color: #fff;
+        border-radius: 20px;
+        margin-top: -20px;
+        padding: 30px 0;
+        box-sizing: border-box;
+        position: relative;
+        z-index: 1;
+        .product-list-title {
+            display: flex;
+            flex-direction: column;
+            margin-bottom: 24px;
+            width: 100%;
+            justify-content: center;
+            align-items: center;
+
+            .title {
+                color: #000000;
+                font-size: 28px;
+                font-weight: 700;
+                line-height: 41px;
+                margin-bottom: 15px;
+            }
+
+            .icon {
+                width: 76px;
+                height: 12px;
+                background: linear-gradient(180deg, #FBE00F 0%, #FFCC19 100%);
+                border-radius: 10px 10px 0px 0px;
+            }
+        }
+    }
+        // 底部购买模块
+        .bottom-buy {
+            width: 100%;
+            background-color: #fff;
+            height: 126px;
+            padding: 19px 35px 19px 44px;
+            box-sizing: border-box;
+            position: fixed;
+            bottom: 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .bottom-buy-left {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                image {
+                    width: 36px;
+                    height: 36px;
+                    margin-bottom: 7px;
+                }
+    
+                .bottom-buy-text {
+                    font-size: 22px;
+                    line-height: 32px;
+                    color: #000000;
+                }
+            }
+            .bottom-buy-right {
+                width: 550px;
+                height: 100%;
+                display: flex;
+                border-radius: 60px;
+                overflow: hidden;
+                .bottom-buy-right-self,.bottom-buy-right-share{
+                    line-height: 43px;
+                    font-size: 30px;
+                    width: 50%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    image{
+                        margin-right: 9px;
+                    }
+                }
+                .bottom-buy-right-self{
+                    background-color: #fbe00f;
+                    color: #000000;
+                }
+                .bottom-buy-right-share{
+                    background-color: #ff1c14;
+                    color: #fff;
+                }
+        }
+    }
+}