From 522fd07b8001a1b06938f78e96e321f15c5256c6 Mon Sep 17 00:00:00 2001
From: pjhmizn49 <zhangjiadi2008@126.com>
Date: Fri, 13 Dec 2024 09:23:59 +0800
Subject: [PATCH] ADD file via upload

---
 flower_user_front/src/views/HomeView.vue | 643 +++++++++++++++++++++++
 1 file changed, 643 insertions(+)
 create mode 100644 flower_user_front/src/views/HomeView.vue

diff --git a/flower_user_front/src/views/HomeView.vue b/flower_user_front/src/views/HomeView.vue
new file mode 100644
index 0000000..fd0dd11
--- /dev/null
+++ b/flower_user_front/src/views/HomeView.vue
@@ -0,0 +1,643 @@
+<template>
+  <div class="home" style="height: 100vh;">
+<!--  头部导航    -->
+      <div class="headNav" style="display: flex;margin-left: 13px;border-bottom:2px solid #ff3134">
+          <div style="height:60px;width:300px;background-color:#ff3134;color:white;line-height:60px;">
+              <el-link @click="navTo('/search?key=' + '')" style="font-size:20px;font-weight:bold;" :underline="false" type="text">全部商品导航</el-link>
+          </div>
+          <div style="height:60px;width:180px;line-height:60px">
+              <el-link @click="navTo('/search?key=' + '鲜花')" class="navButton" :underline="false" type="text">鲜花</el-link>
+          </div>
+          <div style="height:60px;width:180px;line-height:60px">
+              <el-link @click="navTo('/search?key=' + '爱情鲜花')" class="navButton" :underline="false" type="text">爱情鲜花</el-link>
+          </div>
+          <div style="height:60px;width:180px;line-height:60px">
+              <el-link @click="navTo('/search?key=' + '开业鲜花')" class="navButton" :underline="false" type="text">开业鲜花</el-link>
+          </div>
+          <div style="height:60px;width:180px;line-height:60px">
+              <el-link @click="navTo('/search?key=' + '节日鲜花')" class="navButton" :underline="false" type="text">节日鲜花</el-link>
+          </div>
+          <div style="height:60px;width:180px;line-height:60px">
+              <el-link @click="navTo('/search?key=' + '商务鲜花')" class="navButton" :underline="false" type="text">商务鲜花</el-link>
+          </div>
+          <div style="height:60px;width:180px;line-height:60px">
+              <el-link @click="navTo('/search?key=' + '长辈鲜花')" class="navButton" :underline="false" type="text">长辈鲜花</el-link>
+          </div>
+      </div>
+<!--  分类、轮播图、用户中心    -->
+      <div style="display: flex">
+          <!--分类-->
+          <div class="menu" style="flex: 2;">
+              <div class="menu-item">
+                  <div class="item-title">鲜花用途</div>
+                  <div class="item">
+                      <el-link @click="navTo('/search?key=' + '爱情')" :underline="false" class="menu-button" type="text">爱情鲜花</el-link>
+                      <el-link @click="navTo('/search?key=' + '生日')" :underline="false" class="menu-button" type="text">生日鲜花</el-link>
+                      <el-link @click="navTo('/search?key=' + '婚庆')" :underline="false" class="menu-button" type="text">婚庆鲜花</el-link>
+                      <el-link @click="navTo('/search?key=' + '长辈')" :underline="false" class="menu-button" type="text">问候长辈</el-link>
+                      <el-link @click="navTo('/search?key=' + '慰问')" :underline="false" class="menu-button" type="text">探病慰问</el-link>
+                      <el-link @click="navTo('/search?key=' + '商务')" :underline="false" class="menu-button" type="text">商务鲜花</el-link>
+                  </div>
+              </div>
+              <div class="menu-item">
+                  <div class="item-title">鲜花花材</div>
+                  <div class="item">
+                      <el-link @click="navTo('/search?key=' + '玫瑰')" :underline="false" class="menu-button" type="text">玫瑰花</el-link>
+                      <el-link @click="navTo('/search?key=' + '康乃馨')" :underline="false" class="menu-button" type="text">康乃馨</el-link>
+                      <el-link @click="navTo('/search?key=' + '百合')" :underline="false" class="menu-button" type="text">百合花</el-link>
+                      <el-link @click="navTo('/search?key=' + '向日葵')" :underline="false" class="menu-button" type="text">向日葵</el-link>
+                      <el-link @click="navTo('/search?key=' + '满天星')" :underline="false" class="menu-button" type="text">满天星</el-link>
+                      <el-link @click="navTo('/search?key=' + '紫罗兰')" :underline="false" class="menu-button" type="text">紫罗兰</el-link>
+                  </div>
+              </div>
+              <div class="menu-item">
+                  <div class="item-title">鲜花类别</div>
+                  <div class="item">
+                      <el-link @click="navTo('/search?key=' + '花束')" :underline="false" class="menu-button" type="text">日常花束</el-link>
+                      <el-link @click="navTo('/search?key=' + '花盒')" :underline="false" class="menu-button" type="text">创意花盒</el-link>
+                      <el-link @click="navTo('/search?key=' + '永生花')" :underline="false" class="menu-button" type="text">永生瓶花</el-link>
+                      <el-link @click="navTo('/search?key=' + '手提花篮')" :underline="false" class="menu-button" type="text">手提花篮</el-link>
+                      <el-link @click="navTo('/search?key=' + '开业花篮')" :underline="false" class="menu-button" type="text">开业花篮</el-link>
+                      <el-link @click="navTo('/search?key=' + '会议桌花')" :underline="false" class="menu-button" type="text">会议桌花</el-link>
+                  </div>
+              </div>
+          </div>
+          <!--轮播图-->
+          <div style="flex: 6">
+              <el-carousel height="500px">
+                  <el-carousel-item v-for="item in carousel_pic" :key="item">
+                      <img :src="item" style="width: 100%;height:500px" alt="">
+                  </el-carousel-item>
+              </el-carousel>
+          </div>
+          <!--用户中心-->
+          <div class="user-center" style="flex: 2">
+              <el-card shadow="hover" style="margin-top: 10px;margin-left:10px;border-radius: 10px;height: 490px">
+                  <!--用户信息-->
+                  <div @click="navTo('/user')" >
+                      <el-avatar :src="require('/Users/zhangjiadi/IdeaProjects/毕业设计/picFiles'+user.user_pic)" style="width: 80px;height: 80px;margin-top: 20px;"></el-avatar>
+                      <div>
+                          <el-link :underline="false" class="hello" type="text">你好！{{ user.user_name }}</el-link>
+                      </div>
+                      <div style="font-size: 15px;color: #7f7f7f;margin-top: 10px">
+                          <el-link v-if="user.user_role === 1" :underline="false" type="text">会员</el-link>
+                          <el-link v-if="user.user_role === 0" :underline="false" type="text">普通用户</el-link>
+                      </div>
+                  </div>
+                  <!--业务入口-->
+                  <div class="order_info" style="display: flex">
+                      <div class="order_item" style="flex: 1">
+                          <el-link @click="navTo('/cart')" :underline="false" class="item-button" type="text">
+                              {{ this.cartNum }}<div>购物车</div>
+                          </el-link>
+                      </div>
+                      <div class="order_item" style="flex: 1">
+                          <el-link @click="navTo('/order')" :underline="false" class="item-button" type="text">
+                              {{ this.orderSend }}<div>待发货</div>
+                          </el-link>
+                      </div>
+                      <div class="order_item" style="flex: 1">
+                          <el-link @click="navTo('/order')" :underline="false" class="item-button" type="text">
+                              {{ this.orderReceive }}<div>待收货</div>
+                          </el-link>
+                      </div>
+                      <div class="order_item" style="flex: 1">
+                          <el-link @click="navTo('/order')" :underline="false" class="item-button" type="text">
+                              {{ this.orderPay }}<div>待付款</div>
+                          </el-link>
+                      </div>
+                  </div>
+                  <el-divider></el-divider>
+                  <div class="order_info" style="display: flex">
+                      <div class="order_item" style="flex: 1">
+                          <el-link @click="navTo('/cart')" :underline="false" class="item-button" type="text">
+                              <i class="icon el-icon-shopping-cart-2"></i>
+                              <div>购物车</div>
+                          </el-link>
+                      </div>
+                      <div class="order_item" style="flex: 1">
+                          <el-link @click="navTo('/order')" :underline="false" class="item-button" type="text">
+                              <i class="icon el-icon-shopping-bag-1"></i>
+                              <div>我的订单</div>
+                          </el-link>
+                      </div>
+                      <div class="order_item" style="flex: 1">
+                          <el-link @click="navTo('/address')" :underline="false" class="item-button" type="text">
+                              <i class="icon el-icon-house"></i>
+                              <div>我的地址</div>
+                          </el-link>
+                      </div>
+                  </div>
+              </el-card>
+          </div>
+      </div>
+<!--  公告    -->
+      <div style="margin:50px 10px 20px 10px;text-align: left;height: 20px">
+          <i class="el-icon-bell" style="font-size: 18px;font-weight: bold"></i>
+          <span style="font-weight: bolder;margin-left: 5px">公告： </span>
+          <span>{{topNotice}}</span>
+      </div>
+<!--  商品专区    -->
+      <div>
+          <div class="product-zone">
+              <div class="zone-top">
+                  <span class="zone-title">爱情鲜花</span>
+                  <span class="zone-detail">送·让你怦然心动的人</span>
+              </div>
+              <div class="zone-bottom" style="display: flex">
+                  <div class="zone-left" style="flex:2;height: 830px;background-color: #f7f7f7">
+                    <img src="@/assets/product_zone1.jpg" style="width: 100%" alt="">
+                      <div class="zone-title2">爱情鲜花专区</div>
+                      <div class="zone-detail2">结婚鲜花订制花店爱情鲜花，精选适合送给爱人</div>
+                      <button @click="navTo('/search?key=' + '爱情鲜花')" class="zone-button">进入专区</button>
+                  </div>
+                  <div class="zone-main" style="flex:7;height: 830px">
+                    <el-row :gutter="30">
+                        <el-col class="product-col" :span="8" v-for="item in this.flowers_m">
+                            <el-card style="margin: 5px auto" shadow="always">
+                                <el-link @click="navTo('/detail?id=' + item.flower_id)" :underline="false" style="color:#333">
+                                    <img :src="require('/Users/zhangjiadi/IdeaProjects/毕业设计/picFiles'+item.flower_pic)" style="height: 280px;width: 280px" alt="">
+                                    <div class="product-name">{{ item.flower_name }}</div>
+                                    <div style="color: red" class="product-price">
+                                        ￥{{ item.flower_price.toFixed(2) }}
+                                        <span style="margin-left: 150px;font-size: 14px;color: #8c8c8c">已售：{{ item.flower_sale }}</span>
+                                    </div>
+                                </el-link>
+                            </el-card>
+                        </el-col>
+                    </el-row>
+                  </div>
+              </div>
+          </div>
+          <div class="product-zone">
+              <div class="zone-top">
+                  <span class="zone-title">送长辈鲜花</span>
+                  <span class="zone-detail">赠·父母/恩师/长辈</span>
+              </div>
+              <div class="zone-bottom" style="display: flex">
+                  <div class="zone-left" style="flex:2;height: 830px;background-color: #f7f7f7">
+                      <img src="@/assets/product_zone2.jpg" style="width: 100%" alt="">
+                      <div class="zone-title2">长辈鲜花专区</div>
+                      <div class="zone-detail2">网上订制鲜花，送父母，送亲人，送恩师</div>
+                      <button @click="navTo('/search?key=' + '长辈鲜花')" class="zone-button">进入专区</button>
+                  </div>
+                  <div class="zone-main" style="flex:7;height: 830px">
+                      <el-row :gutter="30">
+                          <el-col class="product-col" :span="8" v-for="item in this.flowers_k">
+                              <el-card style="margin: 5px auto" shadow="always">
+                                  <el-link @click="navTo('/detail?id=' + item.flower_id)" :underline="false" style="color:#333">
+                                    <img :src="require('/Users/zhangjiadi/IdeaProjects/毕业设计/picFiles'+item.flower_pic)" style="height: 280px;width: 280px" alt="">
+                                    <div class="product-name">{{ item.flower_name }}</div>
+                                    <div class="product-price" style="color: red">
+                                        ￥{{ item.flower_price.toFixed(2) }}
+                                        <span style="margin-left: 150px;font-size: 14px;color: #8c8c8c">已售：{{ item.flower_sale }}</span>
+                                    </div>
+                                </el-link>
+                              </el-card>
+                          </el-col>
+                      </el-row>
+                  </div>
+              </div>
+          </div>
+          <img src="../assets/break.jpg" alt="">
+          <div class="product-zone">
+              <div class="zone-top">
+                  <span class="zone-title">商务鲜花</span>
+                  <span class="zone-detail">贺·生意兴隆/财源滚滚</span>
+              </div>
+              <div class="zone-bottom" style="display: flex">
+                  <div class="zone-left" style="flex:2;height: 830px;background-color: #f7f7f7">
+                      <img src="@/assets/product_zone3.jpg" style="width: 100%" alt="">
+                      <div class="zone-title2">商务鲜花专区</div>
+                      <div class="zone-detail2">鲜花订制开业花篮、会议鲜花，鲜花批发量大从优</div>
+                      <button @click="navTo('/search?key=' + '商务鲜花')" class="zone-button">进入专区</button>
+                  </div>
+                  <div class="zone-main" style="flex:7;height: 830px">
+                      <el-row :gutter="30">
+                          <el-col class="product-col" :span="8" v-for="item in this.flowers_s">
+                              <el-card style="margin: 5px auto" shadow="always">
+                                  <el-link @click="navTo('/detail?id=' + item.flower_id)" :underline="false" style="color:#333">
+                                      <img :src="require('/Users/zhangjiadi/IdeaProjects/毕业设计/picFiles'+item.flower_pic)" style="height: 280px;width: 280px" alt="">
+                                      <div class="product-name">{{ item.flower_name }}</div>
+                                      <div class="product-price" style="color: red">
+                                          ￥{{ item.flower_price.toFixed(2) }}
+                                          <span style="margin-left: 150px;font-size: 14px;color: #8c8c8c">已售：{{ item.flower_sale }}</span>
+                                      </div>
+                                  </el-link>
+                              </el-card>
+                          </el-col>
+                      </el-row>
+                  </div>
+              </div>
+          </div>
+          <div class="product-zone">
+              <div class="zone-top">
+                  <span class="zone-title">永生花</span>
+                  <span class="zone-detail">许·一生承诺</span>
+              </div>
+              <div class="zone-bottom" style="display: flex">
+                  <div class="zone-left" style="flex:2;height: 830px;background-color: #f7f7f7">
+                      <img src="@/assets/product_zone4.jpg" style="width: 100%" alt="">
+                      <div class="zone-title2">永生花专区</div>
+                      <div class="zone-detail2">订制鲜花店永生花进口花材精心雕琢，情谊永不凋谢</div>
+                      <button @click="navTo('/search?key=' + '永生花')" class="zone-button">进入专区</button>
+                  </div>
+                  <div class="zone-main" style="flex:7;height: 830px">
+                      <el-row :gutter="30">
+                          <el-col class="product-col" :span="8" v-for="item in this.flowers_y">
+                              <el-card style="margin: 5px auto" shadow="always">
+                                  <el-link @click="navTo('/detail?id=' + item.flower_id)" :underline="false" style="color:#333">
+                                      <img :src="require('/Users/zhangjiadi/IdeaProjects/毕业设计/picFiles'+item.flower_pic)" style="height: 280px;width: 280px" alt="">
+                                      <div class="product-name">{{ item.flower_name }}</div>
+                                      <div class="product-price" style="color: red">
+                                          ￥{{ item.flower_price.toFixed(2) }}
+                                          <span style="margin-left: 150px;font-size: 14px;color: #8c8c8c">已售：{{ item.flower_sale }}</span>
+                                      </div>
+                                  </el-link>
+                              </el-card>
+                          </el-col>
+                      </el-row>
+                  </div>
+              </div>
+          </div>
+      </div>
+<!--   页脚   -->
+      <div style="margin-top: 150px;background-color: #f7f7f7;height: 150px">
+          <common-footer />
+      </div>
+  </div>
+</template>
+
+<script>
+import Cookie from "js-cookie";
+import CommonFooter from "@/components/CommonFooter.vue";
+
+export default {
+    components:{
+        CommonFooter
+    },
+    data(){
+      return{
+          carousel_pic:[
+              require('@/assets/home1.jpg'),
+              require('@/assets/home2.jpg'),
+              require('@/assets/home3.jpg'),
+              require('@/assets/home4.jpg')
+          ],
+          notices:[{
+              notice_id:1,
+              notice_title:'',
+              notice_content:'',
+              notice_time:''
+          }],
+          topNotice:'好花网自成立以来，销量连年增长，规模和影响力也在逐年增大，在鲜花礼品网站中占有一席之地。',
+          user: {
+              user_id:1,
+              user_name:'',
+              user_role:1,
+              user_pic:''
+          },
+          flowers_m:[{
+              flower_id:1,
+              flower_name:'',
+              flower_pic:'',
+              flower_price:1.00,
+              flower_sale:1
+          }],
+          flowers_k:[{
+              flower_id:1,
+              flower_name:'',
+              flower_pic:'',
+              flower_price:1.00,
+              flower_sale:1
+          }],
+          flowers_s:[{
+              flower_id:1,
+              flower_name:'',
+              flower_pic:'',
+              flower_price:1.00,
+              flower_sale:1
+          }],
+          flowers_y:[{
+              flower_id:1,
+              flower_name:'',
+              flower_pic:'',
+              flower_price:1.00,
+              flower_sale:1
+          }],
+          //统计
+          cartNum:1,
+          orderPay:1,
+          orderSend:1,
+          orderReceive:1
+      }
+  },
+    mounted() {
+        this.getFlowerRecommend(100001);
+        this.getFlowerRecommend(100002);
+        this.getFlowerRecommend(100016);
+        this.getFlowerRecommend(100018);
+        this.getByToken();
+        this.getNotice();
+        this.getCartNum();
+        this.getOrderCount();
+    },
+    methods:{
+        getCartNum(){
+            const _this=this;
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/cart/count',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    }
+                }).then(function (response){
+                    if (response.data.code===200){
+                        //查询所有信息成功
+                        _this.cartNum=response.data.cartNum;
+                    }
+                    if (response.data.code===401){
+                        _this.$message.warning('身份验证失败,请重新登录!')
+                    }
+                    if (response.data.code===403){
+                        const message = response.data.msg;
+                        this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
+                            confirmButtonText: '确定'
+                        })
+                    }
+                });
+            }catch (error){
+                this.$message.warning('页面加载出错,请重试!')
+            }
+        },
+        getOrderCount(){
+            const _this=this;
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/order/userOrderCount',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    }
+                }).then(function (response){
+                    if (response.data.code===200){
+                        _this.orderPay=response.data.data.order_pay;
+                        _this.orderSend=response.data.data.order_send;
+                        _this.orderReceive=response.data.data.order_receive;
+                    }
+                    if (response.data.code===401){
+                        _this.$message.warning('身份验证失败,请重新登录!')
+                    }
+                    if (response.data.code===403){
+                        const message = response.data.msg;
+                        this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
+                            confirmButtonText: '确定'
+                        })
+                    }
+                });
+            }catch (error){
+                this.$message.warning('页面加载出错,请重试!')
+            }
+        },
+        getByToken(){
+          const _this=this;
+          axios({
+              method: 'post',
+              url: 'http://localhost:8181/user/getByToken',
+              headers: {
+                  Authorization: Cookie.get('token'),
+                  'Content-Type': 'application/json'
+              }
+          }).then(function (response){
+              if (response.data.code===200) {
+                  _this.user = response.data.data;
+              }
+          });
+      },
+        getNotice(){
+          const _this=this;
+          try {
+              axios({
+                  method: 'post',
+                  url: 'http://localhost:8181/notice/list',
+                  headers: {
+                      Authorization: Cookie.get('token'),
+                      'Content-Type': 'application/json'
+                  },
+                  data:{
+                      page:1,
+                      page_size:10
+                  }
+              }).then(function (response){
+                  if (response.data.code===200){
+                      //查询所有信息成功
+                      _this.notices=response.data.data.notices;
+
+                      //实现公告的轮播
+                      let i = 0;
+                      if(_this.notices && _this.notices.length){
+                          _this.topNotice = _this.notices[0].notice_content
+                          setInterval(() => {
+                              _this.topNotice = _this.notices[i].notice_content
+                              i++
+                              if(i === _this.notices.length){
+                                  i = 0
+                              }
+                          },5000)
+                      }
+
+                  }
+                  if (response.data.code===401){
+                      _this.$message.warning('身份验证失败,请重新登录!')
+                  }
+                  if (response.data.code===403){
+                      const message = response.data.msg;
+                      this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
+                          confirmButtonText: '确定'
+                      })
+                  }
+              });
+          }catch (error){
+              this.$message.warning('页面加载出错,请重试!')
+          }
+      },
+        navTo(url){
+          location.href = url
+        },
+        getFlowerRecommend(class_id){
+            const _this=this;
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/flower/recommend',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    data:{
+                        class_id: class_id
+                    }
+                }).then(function (response){
+                    if (response.data.code===200){
+                        //查询信息成功
+                        if(class_id === 100001){ //玫瑰系列
+                            _this.flowers_m = response.data.data.flowers;
+                        }
+                        else if(class_id === 100002){ //康乃馨系列
+                            _this.flowers_k = response.data.data.flowers;
+                        }
+                        else if(class_id === 100016){ //永生花系列
+                            _this.flowers_y = response.data.data.flowers;
+                        }
+                        else if(class_id === 100018){ //商务花篮系列
+                            _this.flowers_s = response.data.data.flowers;
+                        }
+                    }
+                    if (response.data.code===401){
+                        _this.$message.warning('身份验证失败,请重新登录!')
+                    }
+                    if (response.data.code===403){
+                        const message = response.data.msg;
+                        this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
+                            confirmButtonText: '确定'
+                        })
+                    }
+                });
+            }catch (error){
+                this.$message.warning('页面加载出错,请重试!')
+            }
+        }
+    }
+}
+</script>
+<style>
+.headNav .navButton{
+    font-size: 18px;
+    font-weight:bold;
+    color: #333;
+}
+.headNav .navButton:hover{
+    color: red;
+}
+.menu-item{
+    margin: 30px 0 40px 20px;
+    text-align: left;
+    font-weight: bolder;
+    font-size: 18px;
+}
+.menu-item:hover{
+    color: red;
+    box-shadow: 0 0 50px #f9f9f9;
+}
+.item .menu-button{
+    margin:15px 10px 10px 15px;
+    font-size: 16px;
+    color: #8c8c8c;
+}
+.item .menu-button:hover{
+    color: red;
+}
+.el-carousel__item h3 {
+    color: #475669;
+    font-size: 18px;
+    opacity: 0.75;
+    line-height: 300px;
+    margin: 0;
+}
+.hello:hover{
+    color: red;
+}
+.order_info{
+    margin-top: 60px;
+    font-weight: bold;
+}
+.order_item:hover{
+    color: red;
+}
+.order_item .icon{
+    font-weight: bold;
+    font-size: 20px;
+}
+.order_item .item-button{
+    font-weight: bold;
+    font-size: 16px;
+    color: #333;
+}
+.order_item .item-button:hover{
+    color: red;
+}
+.user-center .hello{
+    font-weight: bolder;
+    font-size:18px;
+    margin-top: 5px;
+}
+.product-zone{
+    margin-bottom: 60px;
+}
+.zone-top{
+    text-align: left;
+    margin-left: 70px;
+    margin-top: 80px;
+    margin-bottom: 20px;
+}
+.zone-title{
+    font-weight: bolder;
+    font-size: 30px;
+    margin-right: 20px;
+    margin-left: 10px;
+    color: #ac0b2a;
+}
+.zone-detail{
+    color: #848484;
+    font-weight: bold;
+}
+.zone-left{
+    margin-left: 80px;
+}
+.zone-main{
+    margin-left: 50px;
+    margin-right: 80px;
+}
+.zone-title2{
+    font-size: 25px;
+    margin-top: 30px;
+    color: #ac0b2a;
+}
+.zone-detail2{
+    color: #848484;
+    margin: 20px 20px 40px 20px;
+}
+.zone-button{
+    font-size: 18px;
+    font-weight: bold;
+    height: 40px;
+    width: 120px;
+    color: #ac0b2a;
+    border: 2px solid #ac0b2a;
+    background-color: #f7f7f7;
+}
+.zone-button:hover{
+    color: #f7f7f7;
+    background-color: #ac0b2a;
+}
+.product-col{
+    padding-bottom: 20px;
+    text-align: left;
+}
+.product-name:hover{
+    color: red;
+}
+.product-name , .product-price{
+    font-weight: bold;
+    font-size: 16px;
+    padding: 5px 0;
+    width: 300px;
+    /*  超出字数省略  */
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+</style>
\ No newline at end of file