首页更新

2023-12-01 14:48:58 +08:00 · 2023-12-01 14:48:58 +08:00 · b89ed460b7
parent e704f1f28b
commit b89ed460b7
6 changed files with 202 additions and 39 deletions
--- a/components.d.ts
+++ b/components.d.ts
@ -3,13 +3,12 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-export { }
+export {}

 declare module 'vue' {
  export interface GlobalComponents {
    ElCarousel: typeof import('element-plus/es')['ElCarousel']
    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
-    ElButton: typeof import('element-plus/es')['ElButton']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
--- a/src/App.vue
+++ b/src/App.vue
@ -1,3 +1,8 @@
+<script setup lang="ts">
+import FooterInfo from './compontents/FooterInfo/index.vue'
+</script>
+
+
 <template>
  <div class="shop-header">
    <div class="header-box">
@ -20,12 +25,15 @@
        <div class="erweima">二维码占位</div>
      </div>
    </div>
+
+
  </div>

  <RouterView />
+
+  <FooterInfo />
 </template>
-<script setup lang="ts">
-</script>
+

 <style scoped lang="scss">
 .shop-header {
--- a/src/compontents/FooterInfo/index.vue
+++ b/src/compontents/FooterInfo/index.vue
@ -0,0 +1,129 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <!-- 公共页脚 -->
+    <div class="footer-container">
+        <div class="wapper">
+            <ul class="icon-info">
+                <li>
+                    <span>正</span>
+                    <span>
+                        <i>正品行货</i>
+                        <i>品类齐全</i>
+                    </span>
+                </li>
+                <li>
+                    <span>透</span>
+                    <span>
+                        <i>阳光采购</i>
+                        <i>一站服务</i>
+                    </span>
+                </li>
+                <li>
+                    <span>快</span>
+                    <span>
+                        <i>轻松畅选</i>
+                        <i>租赁快捷</i>
+                    </span>
+                </li>
+                <li>
+                    <span>好</span>
+                    <span>
+                        <i>售后无忧</i>
+                        <i>精致服务</i>
+                    </span>
+                </li>
+            </ul>
+
+            <ul class="mobile-info">
+                <li>商城热线</li>
+                <li>供应商入驻、开店、续费资讯：010-2345-1234</li>
+                <li>供应商咨询：010-2345-1234</li>
+                <li>采购商咨询：010-2345-1234</li>
+                <li>互联网公司投诉意见：010-2345-1234</li>
+                <li>工作时间：周一至周五 8:30-12：00 &nbsp;&nbsp;&nbsp;&nbsp; 14：00-17：30</li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+.footer-container {
+    margin-top: 40px;
+    width: 100%;
+    height: 650px;
+    border-top: 1px solid #979797;
+    background: url('../../assets/img/home/2023_12_01_beijing2/beijing2.png') no-repeat;
+    background-size: cover;
+
+    .icon-info {
+        height: 100px;
+        margin-top: 30px;
+        display: flex;
+        justify-content: space-around;
+
+        li {
+            height: 100px;
+            display: flex;
+            align-items: center;
+
+            span:first-child {
+                display: block;
+                width: 50px;
+                height: 50px;
+                text-align: center;
+                line-height: 50px;
+                border-radius: 50%;
+                border: 3px solid #2283FF;
+                color: #2283FF;
+                font-weight: bold;
+                font-size: 22px;
+            }
+
+            span:last-child {
+                display: block;
+                height: 50px;
+                margin-left: 15px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: space-around;
+
+                i {
+                    color: #8C8C8C;
+
+                }
+
+                i:first-child {
+                    font-weight: bold;
+                    font-size: 18px;
+                    color: #333;
+                }
+            }
+        }
+    }
+
+    .mobile-info {
+        margin-top: 30px;
+        text-align: center;
+
+        li {
+            padding: 20px 0;
+        }
+
+        li:first-child {
+            padding: 30px 0;
+            font-size: 20px;
+            font-weight: bold;
+            letter-spacing: 1px;
+        }
+
+        li:last-child {
+            font-weight: bold;
+        }
+    }
+
+}
+</style>
--- a/src/compontents/uploadImg.vue
+++ b/src/compontents/uploadImg.vue
@ -1,42 +1,40 @@
 <template>
-    <div class="uploadImg" :style="`width:${width}px;height:${width}px`">
-        <el-upload
-                :disabled="disable"
-                class="avatar-uploader"
-                action="#"
-                :show-file-list="false"
-                :on-change="handleAvatarSuccess">
-            <img v-if="imageUrl" :src="imageUrl" @click="clickImg" class="avatar">
-<!--            <el-icon v-else class="avatar-uploader-icon"  :style="`line-height: ${width}px`"><Plus /></el-icon>-->
-            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
-        </el-upload>
-    </div>
+  <div class="uploadImg" :style="`width:${width}px;height:${width}px`">
+    <el-upload :disabled="disable" class="avatar-uploader" action="#" :show-file-list="false"
+      :on-change="handleAvatarSuccess">
+      <img v-if="imageUrl" :src="imageUrl" @click="clickImg" class="avatar">
+      <!--            <el-icon v-else class="avatar-uploader-icon"  :style="`line-height: ${width}px`"><Plus /></el-icon>-->
+      <el-icon v-else class="avatar-uploader-icon">
+        <Plus />
+      </el-icon>
+    </el-upload>
+  </div>
 </template>
 <script lang="ts" setup>
-  import {ref} from "vue";
-  import { Plus } from '@element-plus/icons-vue'
+import { ref } from "vue";
+import { Plus } from '@element-plus/icons-vue'

-  const props = defineProps(['disable','width'])
-  const imageUrl = ref('')
+const props = defineProps(['disable', 'width'])
+const imageUrl = ref('')

-  const handleAvatarSuccess = (res, file) => {
-      imageUrl.value = URL.createObjectURL(res.raw);
-  }
-
-  const emit = defineEmits(['onClick'])
-
-  const clickImg = () => {
-      if(!props.disable){
-          emit('onClick',{
-              ...this.file,
-              baseUrl:this.imageUrl
-          })
-      }
+const handleAvatarSuccess = (res, file) => {
+  imageUrl.value = URL.createObjectURL(res.raw);
+}
+
+const emit = defineEmits(['onClick'])
+
+const clickImg = () => {
+  if (!props.disable) {
+    emit('onClick', {
+      ...this.file,
+      baseUrl: this.imageUrl
+    })
  }
+}
 </script>
 <style lang="scss" scoped>
-.uploadImg{
-  ::v-deep .avatar-uploader{
+.uploadImg {
+  ::v-deep .avatar-uploader {
    width: 100%;
    height: 100%;
    display: flex;
@ -44,18 +42,21 @@
    justify-content: center;
    border: 1px solid #dfdfdf;
    overflow: hidden;
-    .el-upload--text{
+
+    .el-upload--text {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
-      .avatar-uploader-icon{
+
+      .avatar-uploader-icon {
        width: 100%;
        height: 100%;
      }
    }
-    .avatar{
+
+    .avatar {
      width: 100%;
      height: 100%;
      object-fit: cover;
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -34,6 +34,7 @@ const routes: Array<RouteRecordRaw> = [
        },
        children: [...myInfo]
    },
+
    {
        path: '/myuser', // 主路由地址
        name: 'myuser',
@ -117,6 +118,10 @@ const routes: Array<RouteRecordRaw> = [
            }
        ]
    },
+    {
+        path: '/',
+        redirect: '/home'
+    },
    {
        path: '/home',
        name: 'home',
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -1,5 +1,6 @@
 <script setup lang="ts">

+
 </script>

 <template>
@ -29,7 +30,7 @@
                        <li>企业专区</li>
                    </ul>
                    <div class="swpier-img">
-                        <el-carousel :interval="5000" arrow="always">
+                        <el-carousel :interval="5000" arrow="always" height="437px">
                            <el-carousel-item v-for="item in 4" :key="item">
                                <h3 text="2xl" justify="center">{{ item }}</h3>
                            </el-carousel-item>
@ -192,6 +193,26 @@
                margin-top: 10px;
                border-radius: 8px;

+                .el-carousel {
+                    height: 437px;
+                }
+
+                .el-carousel__item h3 {
+                    color: #475669;
+                    opacity: 0.75;
+                    line-height: 300px;
+                    margin: 0;
+                    text-align: center;
+                }
+
+                .el-carousel__item:nth-child(2n) {
+                    background-color: #99a9bf;
+                }
+
+                .el-carousel__item:nth-child(2n + 1) {
+                    background-color: #d3dce6;
+                }
+
            }
        }