first

xinxuan/package-lock.json

@@ -3694,6 +3694,21 @@
         "entities": "^2.0.0"
       }
     },
+    "dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "requires": {
+        "ssr-window": "^2.0.0"
+      },
+      "dependencies": {
+        "ssr-window": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
+          "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+        }
+      }
+    },
     "domelementtype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -5922,8 +5937,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
     },
     "object-inspect": {
       "version": "1.12.3",
@@ -7370,6 +7384,11 @@
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
       "dev": true
     },
+    "ssr-window": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
+      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+    },
     "ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
@@ -7504,6 +7523,15 @@
         }
       }
     },
+    "swiper": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-4.5.1.tgz",
+      "integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
+      "requires": {
+        "dom7": "^2.1.3",
+        "ssr-window": "^1.0.1"
+      }
+    },
     "table": {
       "version": "6.8.1",
       "resolved": "https://registry.npmjs.org/table/-/table-6.8.1.tgz",
@@ -7820,6 +7848,15 @@
         "csstype": "^3.1.0"
       }
     },
+    "vue-awesome-swiper": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
+      "integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "swiper": "^4.0.7"
+      }
+    },
     "vue-axios": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-3.5.2.tgz",

xinxuan/package.json

@@ -13,6 +13,7 @@
     "element-ui": "^2.15.13",
     "smooth-scroll": "^16.1.3",
     "vue": "^2.6.14",
+    "vue-awesome-swiper": "^3.1.3",
     "vue-axios": "^3.5.2",
     "vue-router": "^3.6.5"
   },

xinxuan/src/App.vue

@@ -5,7 +5,8 @@
   </div>
 </template>
 <style>
-  .hflex {
+	/* 每个页面公共css */
+    .hflex {
 		display: flex;
 		flex-direction: row;
 		flex-wrap: nowrap;

xinxuan/src/assets/css/index.css

@@ -255,8 +255,8 @@
 }
 .one .title .line {
     width: 1720px;
-    height: 1px;
-    background: #333333;
+    height: 4px;
+    background: #666;
     margin-bottom: 40px;
     position: relative;
 }
@@ -266,7 +266,7 @@
     /* top: 180px; */
     /* left: 100px; */
     width: 1720px;
-    height: 1px;
+    height: 4px;
     transform: scale(0, 1);
     background-color: #fff;
     content: "";
@@ -419,6 +419,12 @@
     object-fit: cover;
     z-index: -999;
 }
+.two .video_bg .img {
+    width: 100%;
+    height: 100vh;
+    object-fit: cover;
+    z-index: -99;
+}
 .two .video_bg .content {
     position: absolute;
     top: 0;
@@ -432,7 +438,7 @@
     font-size: 60px;
     font-weight: 600;
     color: #fff;
-    line-height: 60px;
+    line-height: 80px;
     z-index: 999;
 }
 .two .video_bg .content .name{
@@ -509,6 +515,12 @@
     object-fit: cover;
     z-index: -999;
 }
+.three .video_bg .videos_img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: -99;
+}
 .three .three_text {
     position: absolute;
     top: 0;

xinxuan/src/components/footer.vue

@@ -24,14 +24,14 @@
             </div>
         </div>
         <div class="footer_bottom hflex acenter jbetween">
-            <div class="point">{{ footer.banquan }}</div>
+            <div class="point">{{ footer.company }}</div>
             <div class="hflex acenter point">
                 <img src="@/assets/images/common/tele.png" class="tele_icon" />
-                <div>{{ footer.tele }}</div>
+                <div>{{ footer.phone }}</div>
             </div>
             <div class="hflex acenter point">
                 <img src="@/assets/images/common/addr.png" alt="" class="addr_icon" />
-                <div>{{ footer.addr }}</div>
+                <div>{{ footer.address }}</div>
             </div>
         </div>
     </div>
@@ -39,19 +39,17 @@
 <script>
     var that = ""
     export default {
-        data() {
-            return {
-                footer: {
-                    banquan: '@2023 某某集团所拥有 201314687123',
-                    tele: '18569473721',
-                    addr: 'XX省XX市XX路XX交汇具体地点'
-                }
+        props: {
+            footer: {
+                type: Object,
+                default: {}
             }
-        },
+        },  
         created() {
             that = this
         },
         methods: {
+            // 点击进入菜单详情
             toDetail(index) {
                 console.log(index)
                 var url = ''

xinxuan/src/components/header.vue

@@ -80,6 +80,7 @@
             that = this
         },
         methods: {
+            // 显示/隐藏菜单
             toshow() {
                 if(this.show) {
                     this.$refs.floating_menu.style.display = 'none';
@@ -90,14 +91,15 @@
                 }
             
             },
+            // 鼠标移入
             mouseOver() {
                 this.over = true
-                console.log('ru');
             },
+            // 鼠标移出
             mouseLeave() {
                 this.over = false
-                console.log('chu');
             },
+            // 点击进入菜单详情
             toDetail(index) {
                 if(index == '0') {
                     that.$router.push('./index')
@@ -112,7 +114,7 @@
                 } else if(index == '5') {
                     that.$router.push('/contact')
                 }
-            },
+            }
         }
     }
     

xinxuan/src/main.js

@@ -10,6 +10,12 @@ import router from './route/index'
 Vue.use(ElementUI);
 Vue.config.productionTip = false
 
+// 请求封装
+import http from './utils/api.js'
+Vue.prototype.$http = http
+// 请求地址
+import { baseUrl } from '@/utils/http.js'
+
 new Vue({
   render: h => h(App),
   router

xinxuan/src/route/index.js

@@ -12,37 +12,37 @@ const routes = [
         path: "/index",
         name: 'index',
         component: resolve => require(['@/view/index'],resolve)
-    },
+    },//首页
     {
         path: "/about",
         name: 'About',
         component: resolve => require(['@/view/about'],resolve)
-    },
+    },//关于我们
     {
         path: "/contact",
         name: 'Contact',
         component: resolve => require(['@/view/contact'],resolve)
-    },
+    },//联系我们
     {
         path: "/news",
         name: 'News',
         component: resolve => require(['@/view/news'],resolve)
-    },
+    },//新闻资讯
     {
         path: "/product",
         name: 'Product',
         component: resolve => require(['@/view/product'],resolve)
-    },
+    },//产品服务
     {
         path: "/trade",
         name: 'Trade',
         component: resolve => require(['@/view/trade'],resolve)
-    },
+    },//跨境贸易
     {
         path: "/detail",
         name: 'Detail',
         component: resolve => require(['@/view/detail'],resolve)
-    }
+    }//新闻详情
 ]
 
 const router = new VueRouter({

xinxuan/src/utils/api.js

@@ -1,33 +1,34 @@
-import Vue from 'vue'
-import axios from 'axios'
-import VueAxios from 'vue-axios'
+import { baseUrl } from '@/utils/http.js'
+import axios from '../utils/config'
+const API_BASE = baseUrl
 
-Vue.use(VueAxios,axios)
-
-const baseUrl = 'https://ship-expert.zhousi.hdlkeji.com'
-
-export const request = axios.create({
-    baseURL: baseUrl,
-    timeout: 5000
-});
-
-request.interceptors.request.use(
-    (config) => {
-        if(getToken()) {
-            config.headers['Authorization'] = getToken()
-        }
-        return config;
+export default {
+    // 基本配置接口
+    getConfig() {
+        return axios.get(`${API_BASE}/api/index/home`)
     },
-    (error) => {
-        return Promise.reject(error)
-    }
-)
-
-request.interceptors.response.use(
-    (response) => {
-        return response.data
+    // 首页列表接口
+    getIndexList() {
+        return axios.get(`${API_BASE}/api/index/content_list`)
+    },
+    // 产品服务列表接口
+    getProductList() {
+        return axios.get(`${API_BASE}/api/index/product_list`)
+    },
+    // 新闻详情接口
+    getNewsDetail(data) {
+        return axios.get(`${API_BASE}/api/index/news_detail?id=${data}`)
+    },
+    // 新闻列表接口
+    getNewsList(page,pageSize) {
+        return axios.get(`${API_BASE}/api/index/news_list?page=${page}&page_size=${pageSize}`)
+    },
+    // 跨境列表接口
+    getTradeList() {
+        return axios.get(`${API_BASE}/api/index/trade_list`)
     },
-    (error) => {
-        return Promise.reject(error)
+    // 关于我们列表接口
+    getAboutList() {
+        return axios.get(`${API_BASE}/api/index/about_list`)
     }
-)
+}

xinxuan/src/utils/common.js

@@ -1,9 +0,0 @@
-import { request } from '@/utils/api'
-
-export function getSlider(data) {
-    return request({
-        url: '/data/api.Area/sort',
-        method: 'post',
-        data: data
-    })
-}

xinxuan/src/utils/config.js

@@ -1,6 +1,6 @@
 import axios from 'axios'
 import Vue from 'vue'
-import router from '../router/index'
+import router from '../route/index'
 // axios.defaults.timeout = 5000;                        //响应时间
 /**
  * @description 函数返回唯一的请求key **/
@@ -44,12 +44,12 @@ function removePendingRequest(config) {
         pendingRequest.delete(requestKey);
     }
 }
-axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
+axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
 axios.interceptors.request.use(
   (config) => {
-    if (localStorage.getItem('jx-token')) {
-      config.headers['Authorization'] = localStorage.getItem('jx-token')
-    }
+    // if (localStorage.getItem('token')) {
+    //   config.headers['Authorization'] = localStorage.getItem('token')
+    // }
       // // 检查是否存在重复请求，若存在则取消已发的请求
       // removePendingRequest(config);
       // // 把当前请求信息添加到pendingRequest对象中
@@ -65,11 +65,8 @@ axios.interceptors.request.use(
 axios.interceptors.response.use(
   (data) => {
     if(data.data.is_login==0){
-      Vue.prototype.$message.error("账号已被禁用")
-      localStorage.removeItem('jx-token')
-      localStorage.removeItem('jx-userinfo')
-      localStorage.removeItem('jx-router')
-      router.push('/login')
+      // Vue.prototype.$message.error("账号已被禁用")
+      // localStorage.removeItem('token')
       window.location.reload()
     }
     return data

xinxuan/src/utils/http.js

@@ -1,3 +1,3 @@
-const baseUrl = '' //测试环境
+const baseUrl = 'https://website.hdlkeji.com' //测试环境
 // const baseUrl = '' //正式环境
 export { baseUrl }

xinxuan/src/view/about.vue

@@ -3,28 +3,32 @@
         <Header></Header>
         <div class="top">
             <div class="videoContainer">
-                <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
+                <!-- <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
                     <source :src="pageData.video" type="video/mp4" />
+                </video> -->
+                <video id="back_video" :style="fixStyle" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous" v-if="pageData.type=='video'">
+                    <source :src="pageData.g_pic" type="video/mp4" />
                 </video>
+                <el-image :src="pageData.g_pic" class="video fillWidth" fit="cover" v-if="pageData.type=='image'"></el-image>
             </div>    
             <div class="title">关于我们</div>  
             <div class="title">About us</div>  
-            <div class="subTitle" v-html="pageData.subTitle"></div>  
+            <div class="subTitle" v-html="pageData.g_content"></div>  
             <div class="line"></div> 
         </div>
         <div class="center hflex">
             <div class="list hflex" id="scroll"  :style="'--div_width:' + div_width + ';' ">
-                <div class="item" v-for="(item,index) in pageData.list">
-                    <el-image fit="cover" :src="item.img" alt="" class="item_img" />
-                    <div class="item_text">{{ item.content }}</div>
+                <div class="item" v-for="(item,index) in pageList" :key="index">
+                    <el-image fit="cover" :src="item.url" alt="" class="item_img" />
+                    <div class="item_text" v-html="item.content"></div>
                 </div>
-                <div class="item" v-for="(item,index) in pageData.list" :key="index">
-                    <el-image fit="cover" :src="item.img" alt="" class="item_img" />
-                    <div class="item_text">{{ item.content }}</div>
+                <div class="item" v-for="(itm,inx) in pageList">
+                    <el-image fit="cover" :src="itm.url" alt="" class="item_img" />
+                    <div class="item_text" v-html="itm.content"></div>
                 </div>
             </div>
         </div>
-        <Footer></Footer>
+        <Footer :footer="footer"></Footer>
 
     </div>
 </template>
@@ -40,57 +44,60 @@ export default {
     },
     data() {
         return {
-            pageData: {
-                // title: '构建',
-                subTitle: `<p>我们是一家专门从事体育场地</p><p>工程设计、施工生产和铺装为一体的</p><p>专业公司</p></br><p>仿真草坪</p>`,
-                video: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
-                list: [
-                    {
-                        img: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
-                        content: '鼓励和促进世界语在微电影等可视化节目中的发展',
-                    },
-                    {
-                        img: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
-                        content: '国际世界语教育电影节由国际世界语教师协会主办促进世界语在微电影等可视化',
-                    },
-                    {
-                        img: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
-                        content: '旨在鼓励和促进世界语在微电影等可视化节目中的发展',
-                    },
-                    {
-                        img: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
-                        content: '国际世界语教育电影节由国际世界语教师协会主办节目',
-                    },
-                    {
-                        img: 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
-                        content: '鼓励和促进世界语在微电影等可视化节目中的发展',
-                    },
-                    {
-                        img: 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
-                        content: '鼓励和促进世界语在微电影等可视化节目中的发展',
-                    },
-                    {
-                        img: 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
-                        content: '鼓励和促进世界语在微电影等可视化节目中的发展',
-                    }
-                ]
-            },
-            div_width: 0
+            pageData: {},
+            pageList: [],
+            div_width: 0,
+            footer: {}
         }
     },
     created() {
         that = this
+        that.getConfig()
     },
     mounted() {
-        that.getWidth()
+        that.getList()
     },
     methods: {
+        // 获取移动列表宽度
         getWidth() {
             var data = document.getElementById("scroll").offsetWidth;
             // var clientWidth = document.body.clientWidth
             data = data / 2
             console.log(data);
             that.div_width = '-' +data + 'px'
+        },
+        // 获取基础配置信息
+        getConfig() {
+            that.$http.getConfig().then((res) => {
+                if(res.data.code == 1) {
+                    that.pageData = res.data.data
+                    var temp = that.pageData.g_pic.substr(that.pageData.g_pic.length - 3,3)
+                    var type = ''
+                    if(temp == 'jpg' || temp == 'png' || temp == 'gif') {
+                        type = 'image'
+                    } else if(temp == 'mp4' || temp == 'avi') {
+                        type = 'video'
+                    }
+                    that.$set(that.pageData,'type',type)
+                    that.footer = {
+                        company: that.pageData.company,
+                        phone: that.pageData.phone,
+                        address: that.pageData.address,
+                    }
+                }
+            })
+        },
+        // 获取关于我们
+        getList() {
+            that.$http.getAboutList().then((res) => {
+                console.log('关于我们',res);
+                if(res.data.code == 1) {
+                    that.pageList = res.data.data.list
+                    setTimeout(() => {
+                        that.getWidth()
+                    }, 1000);
+                }
+            }) 
         }
     }
 }
@@ -149,6 +156,7 @@ export default {
     position: absolute;
     top: 200px;
     left: 0;
+    margin-bottom: 159px;
     /* overflow-x: hidden; */
     /* left: 0px; */
     animation: move 60s infinite linear;
@@ -182,5 +190,6 @@ export default {
     font-weight: 500;
     color: #333333;
     line-height: 52px;
+    max-width: 395px;
 }
 </style>

xinxuan/src/view/contact.vue

@@ -3,14 +3,21 @@
         <Header></Header>
         <div class="top">
             <div class="videoContainer">
-                <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
+                <!-- <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
                     <source :src="pageData.video" type="video/mp4" />
+                </video> -->
+                <video id="back_video" :style="fixStyle" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous" v-if="pageData.type=='video'">
+                    <source :src="pageData.l_pic" type="video/mp4" />
                 </video>
+                <el-image :src="pageData.l_pic" class="video fillWidth" fit="cover" v-if="pageData.type=='image'"></el-image>
             </div>    
-            <div class="subTitle" v-html="pageData.subTitle"></div>  
+            <div class="subTitle" v-html="pageData.l_content"></div>  
+            <div class="text">电话：{{ pageData.l_phone }}</div>
+            <div class="text">传真：{{ pageData.l_fax }}</div>
+            <div class="text">地址：{{ pageData.l_address }}</div>
             <div class="line"></div> 
         </div>
-        <Footer></Footer>
+        <Footer :footer="footer"></Footer>
 
     </div>
 </template>
@@ -26,53 +33,39 @@ export default {
     },
     data() {
         return {
-            background: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
-            pageData: {
-                // title: '构建',
-                subTitle: `<p>构建绿色和谐美丽环境</p><p>你我携手共进</p></br><p>绿色前行</p></br><p>电话： 18659373212</p><p>传真： 0269-22519</p><p>地址： XXXXXXXXXXXXXXXXXX地区19号楼306室</p>`,
-                video: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
-            },
+            pageData: { },
+            footer: {}
         }
     },
     created() {
         that = this
+        that.getConfig()
     },
     mounted() {
-      this.getVideoStyle()
     },
     methods: {
-        
-         //监听屏幕大小实时给播放器设置宽高
-         getVideoStyle() {
-            window.onresize = () => {
-            const windowWidth = document.body.clientWidth
-            const windowHeight = document.body.clientHeight
-            const windowAspectRatio = windowHeight / windowWidth
-            console.log(windowWidth, windowHeight, windowAspectRatio, '屏幕实时大小')
-            let videoWidth
-            let videoHeight
-            if (windowAspectRatio < 0.5625) {
-                videoWidth = windowWidth
-                videoHeight = videoWidth * 0.5625
-                this.fixStyle = {
-                    height: windowWidth * 0.5625 + 'px',
-                    width: windowWidth + 'px',
-                    'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
-                    'margin-left': 'initial'
-                }
-            } else {
-                videoHeight = windowHeight
-                videoWidth = videoHeight / 0.5625
-                this.fixStyle = {
-                    height: windowHeight + 'px',
-                    width: windowHeight / 0.5625 + 'px',
-                    'margin-left': (windowWidth - videoWidth) / 2 + 'px',
-                    'margin-bottom': 'initial'
+         // 获取基础配置信息
+         getConfig() {
+            that.$http.getConfig().then((res) => {
+                if(res.data.code == 1) {
+                    that.pageData = res.data.data
+                    var temp = that.pageData.l_pic.substr(that.pageData.l_pic.length - 3,3)
+                    var type = ''
+                    if(temp == 'jpg' || temp == 'png' || temp == 'gif') {
+                        type = 'image'
+                    } else if(temp == 'mp4' || temp == 'avi') {
+                        type = 'video'
+                    }
+                    that.$set(that.pageData,'type',type)
+                    that.footer = {
+                        company: that.pageData.company,
+                        phone: that.pageData.phone,
+                        address: that.pageData.address,
+                    }
                 }
-            }
-            }
-            window.onresize()
-        },
+            })
+        }
+        
     }
 }
 </script>
@@ -99,8 +92,17 @@ export default {
     font-weight: 500;
     color: #fff;
     padding-left: 151px;
+    padding-bottom: 113px;
     line-height: 90px;
 }
+.top .text {
+    max-width: 100% !important;
+    font-size: 36px;
+    font-weight: 500;
+    color: #fff;
+    line-height: 50px;
+    padding-left: 151px;
+}
 .top .line {
     width: 1720px;
     height: 4px;

xinxuan/src/view/detail.vue

@@ -3,16 +3,19 @@
         <Header></Header>
         <div class="content">
             <div class="title">{{ pageData.title }}</div>
-            <div class="date">发布时间：{{ pageData.create_at }}</div>
+            <div class="date">发布时间：{{ pageData.create_time }}</div>
             <div v-html="pageData.content"></div>
-            <div class="list">
+            <div class="list" v-if="newsList.length > 0">
                 <div class="title">返回列表</div>
-                <div class="item" v-for="(item,indexs) in pageData.list" :key="indexs">
-                    <div class="item_text">{{ indexs + index }}.{{ item.name }}</div>
+                <div class="item" v-for="(item,indexs) in newsList" :key="indexs">
+                    <div class="item_text point" @click="toNews(indexs+index+1,item.id)">{{ indexs + index + 1 }}.{{ item.title }}</div>
                 </div>
             </div>
         </div>
-        <Footer></Footer>
+        <div class="topping hflex acenter jcenter point" v-if="scroll_top > 1000" @click="toTop">
+            <img src="@/assets/images/common/topping.png" alt="">
+        </div>
+        <Footer :footer="footer"></Footer>
     </div>
 </template>
 <script>
@@ -29,34 +32,92 @@ export default {
         return {
             id: '',
             index: 1,
-            pageData: {
-                title: '办公室设计中应注意的几个问题，办公室装修中应注意的几个问题',
-                create_at: '2019-12-05',
-                content: `<p>用户在设计办公室时应该注意什么</p>`,
-                list: [
-                    {
-                        name: '第二篇新闻'
-                    },
-                    {
-                        name: '第三篇新闻'
-                    },
-                    {
-                        name: '第四篇新闻'
-                    }
-                ]
-            }
+            pageData: {},
+            newsList: [],
+            footer: {},
+            scroll_top: 0
+        }
+    },
+    watch: {
+        '$route.query' () {
+            Object.assign(this.$data,this.$options.data())
+            this.init()
         }
     },
     created() {
         that = this
-        this.id = this.$route.query.id
-        that.index = Number(that.$route.query.index) + 1
-        console.log('id=',this.id);
-        console.log('index=',this.index);
+        this.init()
+
+    },
+    mounted() {
+        window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
 
     },
     methods: {
-       
+        // 初始化
+        init() {
+            
+            this.id = this.$route.query.id
+            that.index = Number(that.$route.query.index) + 1
+            console.log('id=',this.id);
+            console.log('index=',this.index);
+            that.getDetail()
+            that.getConfig()
+        },
+        // 获取基本配置
+        getConfig() {
+            that.$http.getConfig().then((res) => {
+                if (res.data.code == 1) {
+                    that.footer = {
+                        company: res.data.data.company,
+                        phone: res.data.data.phone,
+                        address: res.data.data.address,
+                    }
+                }
+            })
+        },
+        // 获取新闻详情
+        getDetail() {
+            var data = that.id
+            that.$http.getNewsDetail(data).then((res) => {
+                console.log('新闻详情',res);
+                if(res.data.code == 1) {
+                    that.pageData = res.data.data.detail
+                    that.newsList = res.data.data.list
+                    that.pageData.create_time = that.pageData.create_time * 1000
+                    var year = new Date(that.pageData.create_time).getFullYear()
+                    var month = new Date(that.pageData.create_time).getMonth()
+                    var date = new Date(that.pageData.create_time).getDate()
+                    if(month <10) {
+                        month = '0' + month
+                    }
+                    if(date <10) {
+                        date = '0' + date
+                    }
+                    that.pageData.create_time = year + '-' + month + '-' + date
+                }
+            })
+        },
+       // 点击进入新闻详情
+       toNews(index,id) {
+            that.$router.push({
+                path: '/detail',
+                query: {
+                    index: index,
+                    id: id
+                }
+            })
+        },
+         // 监听页面滚动
+         handleScroll() {
+            this.scroll_top = document.documentElement.scrollTop
+        },
+        // 返回顶部
+        toTop() {
+            document.body.scrollTop = 0
+            document.documentElement.scrollTop = 0
+            this.scroll_top = document.documentElement.scrollTop
+        }
     }
 }
 </script>
@@ -110,6 +171,21 @@ export default {
 .content .list .item:hover {
     color: #4294F7;
 }
+.topping {
+    position: fixed;
+    bottom: 100px;
+    right: 45px;
+    z-index: 999;
+    width: 100px;
+    height: 100px;
+    background: #000000;
+    opacity: 0.3;
+    border-radius: 10px;
+}
+.topping img {
+    width: 53px;
+    height: 57px;
+}
 /deep/ #header .inner .header_home {
     color: #333 !important;
 }

xinxuan/src/view/index.vue

@@ -56,46 +56,47 @@
         
         <section class="one">
             <div class="videoContainer">
-                <video id="back_video" :style="fixStyle" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
-                    <source :src="background" type="video/mp4" />
+                <video id="back_video" :style="fixStyle" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous" v-if="pageData.type1=='video'">
+                    <source :src="pageData.url1" type="video/mp4" />
                 </video>
-                
+                <el-image :src="pageData.url1" class="video fillWidth" fit="cover" v-if="pageData.type1=='image'"></el-image>
             </div>
             <div class="subTitle">
-                <h2 v-html="pageData.subTitle"></h2>
+                <h2 v-html="pageData.subtitle1"></h2>
             </div>
             <div class="title">
                 <div v-show="scroll_top == 0">
                     <h1 :style="show_white?'color: #fff':''">{{pageData.title}}</h1>
                     <div class="line" :style="show_white?'background: rgba(255,255,255,.5)':''"></div>
                     <div class="hflex jbetween" v-show="show_white">
-                        <div class="text point">{{pageData.date}}</div>
+                        <div class="text point">{{pageData.home_time}}</div>
                         <div class="hflex point" @click="scorll_down(800)">
                             <img class="down" src="@/assets/images/common/fv-arrow-down.svg" alt="" />
                             <div class="text">向下滑动</div>
                         </div>
                     </div>
                 </div>
-                <div class="content" v-html="pageData.content"></div>
+                <div class="content" v-html="pageData.subtitle2"></div>
 
             </div>
-            <div class="icon_down vflex acenter jbetween" v-show="scroll_top > 200 && scroll_top < 1500" @click="scorll_down2(-1)">
+            <div class="icon_down vflex acenter jbetween point" v-show="scroll_top > 200 && scroll_top < 1500" @click="scorll_down2(-1)">
                 <img src="@/assets/images/common/icon-down-1.png" alt="" />
                 <img src="@/assets/images/common/icon-down-2.png" alt="" />
             </div>
 
         </section>
-        <div v-for="(item,index) in pageData.list" :key="index" class="two">
+        <div v-for="(item,index) in pageList" :key="index" class="two">
             <div class="video_bg" :id="'video' + index">
-                <video :src="item.background" muted autoplay loop playsinline preload="metadata" crossorigin="anymous"></video>
+                <video :src="item.url" muted autoplay loop playsinline preload="metadata" crossorigin="anymous" v-if="item.type2=='video'"></video>
+                <el-image :src="item.url" fit="cover" class="img" v-if="item.type2=='image'"></el-image>
                 <div class="content hflex jbetween">
                     <div class="content_left">
-                        <div class="name">{{ item.name }}</div>
-                        <div class="wenan" v-html="item.text"></div>
+                        <div class="name">{{ item.title }}</div>
+                        <div class="wenan" v-html="item.content"></div>
                     </div>
                     <div class="content_right vflex acenter jend">
                         <div class="vflex acenter">
-                            <div v-for="(items,indexs) in pageData.list.length" :key="indexs">
+                            <div v-for="(items,indexs) in pageList.length" :key="indexs">
                                 <div class="circle point" :class="index == indexs?'circle_active':''" @click="jump(indexs)"></div>
                             </div>
                             <div class="icon_down2 point vflex acenter jbetween" @click="scorll_down2(index + 1)">
@@ -105,7 +106,7 @@
                         </div>
                         <div class="right_index">
                             <span class="indexs">{{ index < 10 ? '0' + (index + 1) : index + 1 }}</span>
-                            <span>/{{ pageData.list.length < 10 ? '0' + pageData.list.length : pageData.list.length }}</span>
+                            <span>/{{ pageList.length < 10 ? '0' + pageList.length : pageList.length }}</span>
                         </div>
                     </div>
                 </div>
@@ -114,21 +115,32 @@
         </div>
         <div class="three">
             <div class="video_bg">
-                <video id="videos" :src="pageData.background" muted autoplay loop playsinline preload="metadata" crossorigin="anymous"></video>
+                <video id="videos" :src="pageData.url2" muted autoplay loop playsinline preload="metadata" crossorigin="anymous" v-if="pageData.type2 == 'video'"></video>
+                <el-image id="videos" class="videos_img" :src="pageData.url2" fit="cover" v-if="pageData.type2 == 'image'"></el-image>
             </div>
-            <div class="three_text" v-html="pageData.text"></div> 
+            <div class="three_text" v-html="pageData.subtitle3"></div> 
         </div>
-        <Footer></Footer>   
+        <div class="three" style="margin-top: 0;">
+            <div class="video_bg">
+                <video id="videos2" :src="pageData.url3" muted autoplay loop playsinline preload="metadata" crossorigin="anymous" v-if="pageData.type3 == 'video'"></video>
+                <el-image class="videos_img" :src="pageData.url3" fit="cover" v-if="pageData.type3 == 'image'"></el-image>
+            </div>
+        </div>
+        <Footer :footer="footer"></Footer>   
     </div>
 </template>
 <script>
-import { getSlider } from '@/utils/common'
 import Footer from '@/components/footer.vue'
+//页面引入swiper
+import 'swiper/dist/css/swiper.css'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
 var that = ''
 export default {
     name: 'index',
     components: {
-        Footer
+        Footer,
+        swiper,
+        swiperSlide
     },
     data() {
         return {
@@ -136,79 +148,88 @@ export default {
             over: false,
             show_white: false,
             fixStyle: {},
-            pageData: {
-                title: '绿巍仿真植物有限公司',
-                subTitle: '<p>加密仿真草坪	</p><br><p>加密仿真草坪环保易用	</p>',
-                date: '2023.01.01',
-                content: `<p>注塑仿真草坪和编织仿真草坪</p><br><p>注塑仿真草坪采用注塑工艺	</p><p>编织草坪以仿草叶状的合成纤维。</p>`,
-                background: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
-                list: [
-                    {
-                        background: require('@/assets/images/common/snsdyvideodownload.mp4'),
-                        name: '加密仿真草坪	',
-                        text: `<p>防火阻燃，为生活增添一份色彩</p></br><p>注塑仿真草坪和编织仿真草坪 </p><p>注塑仿真草坪采用注塑工艺 </p><p>编织草坪以仿草叶状的合成纤维。</p>`
-                    },
-                    {
-                        background: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
-                        name: '加密仿真草坪	',
-                        text: `<p>防火阻燃，为生活增添一份色彩</p></br><p>注塑仿真草坪和编织仿真草坪 </p><p>注塑仿真草坪采用注塑工艺 </p><p>编织草坪以仿草叶状的合成纤维。</p>`
-                    },
-                    {
-                        background: require('@/assets/images/common/snsdyvideodownload.mp4'),
-                        name: '加密仿真草坪	',
-                        text: `<p>防火阻燃，为生活增添一份色彩</p></br><p>注塑仿真草坪和编织仿真草坪 </p><p>注塑仿真草坪采用注塑工艺 </p><p>编织草坪以仿草叶状的合成纤维。</p>`
-                    },
-                    {
-                        background: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
-                        name: '加密仿真草坪	',
-                        text: `<p>防火阻燃，为生活增添一份色彩</p></br><p>注塑仿真草坪和编织仿真草坪 </p><p>注塑仿真草坪采用注塑工艺 </p><p>编织草坪以仿草叶状的合成纤维。</p>`
-                    },
-                    {
-                        background: require('@/assets/images/common/snsdyvideodownload.mp4'),
-                        name: '加密仿真草坪	',
-                        text: `<p>防火阻燃，为生活增添一份色彩</p></br><p>注塑仿真草坪和编织仿真草坪 </p><p>注塑仿真草坪采用注塑工艺 </p><p>编织草坪以仿草叶状的合成纤维。</p>`
-                    }
-                ],
-                text: `<p>加密仿真草坪</p><p>防火阻燃，为生活增添一份色彩</p><p>注塑仿真草坪和编织仿真草坪</p><p>注塑仿真草坪采用注塑工艺</p><p>编织草坪以仿草叶状的合成纤维</p>`
-            },
-            background: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
+            pageData: {},
+            pageList: [],
             scroll_top: 0,
             windowWidth: 0,
             windowHeight: 0,
-            index: -1
+            index: -1,
+            footer: {}
         }
     },
     created() {
         that = this
-        that.getData()
+        // that.getData()
     },
     mounted() {
       this.getVideoStyle()
+      this.getConfig()
+      this.getList()
       window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
     },
     methods: {
-        getData() {
+        //获取首页接口信息
+        getConfig() {
             that = this
-            console.log(this.show_white);
+            this.$http.getConfig().then((res) => {
+                console.log('基础配置',res)
+                if (res.data.code == 1) {
+                    that.pageData = res.data.data
+                    var temp = that.pageData.url1.substr(that.pageData.url1.length - 3,3)
+                    var type = ''
+                    if(temp == 'jpg' || temp == 'png' || temp == 'gif') {
+                        type = 'image'
+                    } else if(temp == 'mp4' || temp == 'avi') {
+                        type = 'video'
+                    }
+                    that.$set(that.pageData,'type1',type)
+                    var temp2 = that.pageData.url2.substr(that.pageData.url2.length - 3,3)
+                    var type2 = ''
+                    if(temp2 == 'jpg' || temp2 == 'png' || temp2 == 'gif') {
+                        type2 = 'image'
+                    } else if(temp2 == 'mp4' || temp2 == 'avi') {
+                        type2 = 'video'
+                    }
+                    that.$set(that.pageData,'type2',type2)
+                    var temp3 = that.pageData.url3.substr(that.pageData.url3.length - 3,3)
+                    var type3 = ''
+                    if(temp3 == 'jpg' || temp3 == 'png' || temp3 == 'gif') {
+                        type3 = 'image'
+                    } else if(temp3 == 'mp4' || temp3 == 'avi') {
+                        type3 = 'video'
+                    }
+                    that.$set(that.pageData,'type3',type3)
+                    that.footer = {
+                        company: that.pageData.company,
+                        phone: that.pageData.phone,
+                        address: that.pageData.address,
+                    }
+                }
+            })
             that.background = that.pageData.background
             setTimeout(() => {
                 this.show_white = true
             }, 1000);
 
         },
-        async fetchData() {
-            const data = {
-                level: 1,
-                hot: 1,
-                name: ''
-            }
-            try {
-                getSlider(data).then((res) => {
-                    console.log(res)
-                })
-            } catch(error) {
-
-            }
+        // 获取首页列表接口
+        getList() {
+            that.$http.getIndexList().then((res) => {
+                console.log('首页列表',res);
+                if(res.data.code == 1) {
+                    that.pageList = res.data.data.list
+                    for(var i=0;i<that.pageList.length;i++) {
+                        var temp = that.pageList[i].url.substr(that.pageList[i].url.length - 3,3)
+                        var type = ''
+                        if(temp == 'jpg' || temp == 'png' || temp == 'gif') {
+                            type = 'image'
+                        } else if(temp == 'mp4' || temp == 'avi') {
+                            type = 'video'
+                        }
+                        that.$set(that.pageList[i],'type2',type)
+                    }
+                }
+            })
         },
         //监听屏幕大小实时给播放器设置宽高
         getVideoStyle() {
@@ -241,6 +262,7 @@ export default {
             }
             window.onresize()
         },
+        // 显示/隐藏菜单
         toshow() {
             if(this.show) {
                 this.$refs.floating_menu.style.display = 'none';
@@ -251,12 +273,15 @@ export default {
             }
            
         },
+        // 鼠标移入
         mouseOver() {
             this.over = true
         },
+        // 鼠标离开
         mouseLeave() {
             this.over = false
         },
+        // 点击进入菜单详情
         toDetail(index) {
             if(index == '1') {
                 that.$router.push('/product')
@@ -270,6 +295,7 @@ export default {
                 that.$router.push('/contact')
             }
         },
+        // 监听页面滑动
         handleScroll() {
             that = this
             
@@ -277,11 +303,13 @@ export default {
             const clientHeight = document.documentElement.clientHeight;
             
         },
+        // 点击向下滑动
         scorll_down(value) {
             console.log(value)
             document.documentElement.scrollTop = this.scroll_top + value
             this.scroll_top = document.documentElement.scrollTop
         },
+        // 点击向下切换屏幕
         scorll_down2(index) {
             console.log(that.index)
             that.index = index
@@ -300,13 +328,15 @@ export default {
                 behavior: 'smooth'
             })
         },
+        // 点击直接跳转相应屏幕
         jump(index) {
             that.index = index
             document.querySelector('#video' + that.index).scrollIntoView({
                 block: 'start',
                 behavior: 'smooth'
             })
-        }
+        },
+        
     }
 }
 </script>

xinxuan/src/view/news.vue

@@ -3,32 +3,40 @@
         <Header></Header>
         <div class="top">
             <div class="videoContainer">
-                <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
-                    <source :src="pageData.video" type="video/mp4" />
+                <!-- <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
+                    <source :src="pageData.x_url" type="video/mp4" />
+                </video> -->
+                <video id="back_video" :style="fixStyle" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous" v-if="pageData.type=='video'">
+                    <source :src="pageData.x_url" type="video/mp4" />
                 </video>
+                <el-image :src="pageData.x_url" class="video fillWidth" fit="cover" v-if="pageData.type=='image'"></el-image>
             </div>    
-            <div class="title">{{ pageData.title }}</div>  
-            <div class="subTitle" v-html="pageData.subTitle"></div>  
+            <div class="title">{{ pageData.x_title }}</div>  
+            <div class="subTitle" v-html="pageData.x_subtitle"></div>  
             <div class="line"></div> 
         </div>
         <div class="center hflex fwrap">
             <div class="first">
-                <div class="title" v-html="pageData.news"></div>
+                <div class="title" v-html="pageData.x_content"></div>
             </div>
-            <div class="item hflex acenter fwrap" v-for="(item,index) in pageData.list" :key="index" @click="toNews(index)">
-                <div class="hflex acenter jbetween" style="width: 100%">
-                    <div class="title">{{ item.name }}</div>
+            <div class="item" v-for="(item,index) in newsList" :key="index" @click="toNews(index)">
+                <div class="hflex acenter jbetween point" style="width: 100%">
+                    <div class="title">{{ item.title }}</div>
                     <div class="item_left_index">{{ index < 10 ? '0' + (index + 1) : index + 1 }}</div>
                 </div>
-                <div class="hflex aend jbetween" style="padding: 29px 0">
-                    <div class="text2">{{ item.contetn }}</div>
+                <div class="hflex aend jbetween point" style="padding: 29px 0;width: 100%;">
+                    <div class="text2" v-html="item.content"></div>
                     <img src="@/assets/images/common/right2.png" alt="" class="icon_right" />
                 </div>
-                <div class="item_img" :style="{'background-image':'url(' + item.img + ')'}"></div>
+                <div class="item_img" :style="{'background-image':'url(' + item.url + ')'}"></div>
             </div>
         </div>
-        <Footer></Footer>
-        
+        <el-divider class="loading hflex acenter jcenter point" v-if="load" @click="loadlist" v-loading.fullscreen.lock="fullscreenLoading">点击加载更多</el-divider>
+        <el-divider class="loading hflex acenter jcenter point" v-else @click="end">已经到底了</el-divider>
+        <div class="topping hflex acenter jcenter point" v-if="scroll_top > 500" @click="toTop">
+            <img src="@/assets/images/common/topping.png" alt="">
+        </div>
+        <Footer :footer="footer"></Footer>
     </div>
 </template>
 <script>
@@ -43,79 +51,104 @@ export default {
     },
     data() {
         return {
-            pageData: {
-                title: '小区内毁绿占道经营？相关部门出手了！',
-                subTitle: `<p>小区内毁绿占道经营</p><p>相关部门出手了！</p><p>小区内毁绿占道经营？相关部门出手了！</p>`,
-                video: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
-                list: [
-                    {
-                        id: 1,
-                        name: '人造草坪',
-                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园',
-                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-                    },
-                    {
-                        id: 2,
-                        name: '人造草坪',
-                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园',
-                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-
-                    },
-                    {
-                        id: 3,
-                        name: '人造草坪',
-                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园',
-                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-
-                    },
-                    {
-                        name: '人造草坪',
-                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园',
-                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-                    },
-                    {
-                        name: '人造草坪',
-                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园',
-                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-                    },
-                    {
-                        name: '人造草坪',
-                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园',
-                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-                    },
-                    {
-                        name: '人造草坪',
-                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园',
-                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-                    },
-                    {
-                        name: '人造草坪',
-                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园',
-                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-                    },
-                    {
-                        name: '人造草坪',
-                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园',
-                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-                    }
-                ],
-                news: `<p>世界头条！</p><p>营造消费环境。</p></br><p>世界</p><p>最新的消费环境</p><p>消费头条！</p>`,
-            }
+            pageData: {},
+            newsList: [],
+            footer: {},
+            scroll_top: 0,
+            page: 1,
+            pageSize: 10,
+            load: true,
+            fullscreenLoading: false
         }
     },
     created() {
         that = this
+        that.getConfig()
+        that.getList()
+    },
+    mounted() {
+        window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
+
     },
     methods: {
-        
+        // 获取基本配置信息
+        getConfig() {
+            that.$http.getConfig().then((res) => {
+                console.log('基础配置',res)
+                if (res.data.code == 1) {
+                    that.pageData = res.data.data
+                    var temp = that.pageData.x_url.substr(that.pageData.x_url.length - 3,3)
+                    var type = ''
+                    if(temp == 'jpg' || temp == 'png' || temp == 'gif') {
+                        type = 'image'
+                    } else if(temp == 'mp4' || temp == 'avi') {
+                        type = 'video'
+                    }
+                    that.$set(that.pageData,'type',type)
+                    that.footer = {
+                        company: that.pageData.company,
+                        phone: that.pageData.phone,
+                        address: that.pageData.address,
+                    }
+                }
+            })
+            
+        },
+        // 获取新闻列表
+        getList() {
+            that.$http.getNewsList(that.page,that.pageSize).then((res) => {
+                console.log('新闻列表',res);
+                if(res.data.code == 1) {
+                    if(that.page == 1) {
+                        that.newsList = res.data.data.list
+                    } else {
+                        that.newsList = that.newsList.concat(res.data.data.list)
+                    }
+                    if(res.data.data.list.length<that.pageSize) {
+                        that.load = false
+                    }
+                    this.fullscreenLoading = false;
+                    for(var i=0;i<that.newsList.length;i++) {
+                        var temp = that.newsList[i].url.substr(that.newsList[i].url.length - 3,3)
+                        var type = ''
+                        if(temp == 'jpg' || temp == 'png' || temp == 'gif') {
+                            type = 'image'
+                        } else if(temp == 'mp4' || temp == 'avi') {
+                            type = 'video'
+                        }
+                        that.$set(that.newsList[i],'type2',type)
+                    }
+                }
+            })
+        },
+        // 点击进入新闻详情
         toNews(index) {
             that.$router.push({
                 path: '/detail',
                 query: {
                     index: index,
-                    id: that.pageData.list[index].id
+                    id: that.newsList[index].id
                 }
             })
+        },
+        // 监听页面滚动
+        handleScroll() {
+            this.scroll_top = document.documentElement.scrollTop
+        },
+        // 返回顶部
+        toTop() {
+            document.body.scrollTop = 0
+            document.documentElement.scrollTop = 0
+            this.scroll_top = document.documentElement.scrollTop
+        },
+        loadlist() {
+            that.page += 1
+            that.getList()
+            this.fullscreenLoading = true;
+        
+        },
+        end() {
+            this.$message('已经到底了！');
         }
     }
 }
@@ -157,7 +190,7 @@ export default {
     background: #FFFFFF;
     box-sizing: border-box;
     margin: 150px 0 0;
-    padding: 150px 100px;
+    padding: 150px 100px 0;
 }
 .center .first {
     width: 700px;
@@ -206,15 +239,17 @@ export default {
     /* color: #333333; */
 }
 .center .item .text2 {
+    max-width: 340px;
     font-size: 38px;
     font-weight: 500;
     /* color: #333333; */
     overflow:hidden; 
     text-overflow:ellipsis;
-    /* white-space: nowrap; */
     display:-webkit-box; 
     -webkit-box-orient:vertical;
     -webkit-line-clamp:2; 
+    line-clamp:2; 
+    box-orient:vertical;
     width: 100%;
     line-height: 70px;
 }
@@ -236,4 +271,25 @@ export default {
     background-size: cover;
     background-position: center center;
 }
+.loading {
+    width: 100%;
+    height: 100px;
+    background: #fff;
+    margin: 0 !important;
+}
+.topping {
+    position: fixed;
+    bottom: 100px;
+    right: 45px;
+    z-index: 999;
+    width: 100px;
+    height: 100px;
+    background: #000000;
+    opacity: 0.3;
+    border-radius: 10px;
+}
+.topping img {
+    width: 53px;
+    height: 57px;
+}
 </style>

xinxuan/src/view/product.vue

@@ -1,37 +1,45 @@
 <template>
-    <div>
+    <div class="component__scroll">
         <Header></Header>
         <div class="top">
             <div class="videoContainer">
-                <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
+                <!-- <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
                     <source :src="pageData.video" type="video/mp4" />
+                </video> -->
+                <video id="back_video" :style="fixStyle" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous" v-if="pageData.type=='video'">
+                    <source :src="pageData.p_url" type="video/mp4" />
                 </video>
+                <el-image :src="pageData.p_url" class="video fillWidth" fit="cover" v-if="pageData.type=='image'"></el-image>
             </div>    
-            <div class="title">{{ pageData.title }}</div>  
-            <div class="subTitle" v-html="pageData.subTitle"></div>  
+            <div class="title">{{ pageData.p_title }}</div>  
+            <div class="subTitle" v-html="pageData.p_subtitle"></div>  
             <div class="line"></div> 
         </div>
         <div class="center">
             <div class="info">
                 <div class="info-h hflex acenter jbetween">
                     <div class="info-text">
-                        <div v-html="pageData.info.title" style="margin-bottom: 99px;"></div>
-                        <div v-html="pageData.info.subTitle"></div>
+                        <div v-html="pageData.p_content" style="margin-bottom: 99px;"></div>
+                        <!-- <div v-html="pageData.info.subTitle"></div> -->
+                    </div>
+                    <div class="info-img">
+                        <el-image fit="cover" :src="pageData.p_pic" alt="" >
+                        </el-image>
+                        <img src="@/assets/images/common/img_top_bg.png" alt="" class="img_bg">
                     </div>
-                    <el-image fit="cover" :src="pageData.info.img" alt="" class="info-img" />
                 </div>
                 
             </div>
             <div class="list">
-                <div v-for="(item,index) in pageData.list" :key="index" class="hflex acenter jbetween">
-                    <div class="item_left vflex jcenter">
+                <div v-for="(item,index) in pageList" :key="index" class="hflex acenter jbetween">
+                    <div class="item_left vflex jcenter point" @click="jump(item.url)">
                         <div class="item_left_top">Product Services</div>
                         <div class="item_left_index">{{ index < 10 ? '0' + (index + 1) : index + 1 }}</div>
                     </div>
-                    <div class="item_right hflex acenter jbetween">
+                    <div class="item_right hflex acenter jbetween point"  @click="jump(item.url)">
                         <div class=" vflex jbetween">
-                            <div class="item_right_text">{{ item.name }}</div>
-                            <div class="item_right_text2">{{ item.contetn }}</div>
+                            <div class="item_right_text">{{ item.title }}</div>
+                            <div class="item_right_text2" v-html="item.content"></div>
                         </div>
                         <img src="@/assets/images/common/right2.png" alt="" class="icon_right" />
                     </div>
@@ -40,13 +48,16 @@
         </div>
         <div class="bottom">
             <!-- <video muted autoplay loop playsinline preload="metadata" crossorigin="anoymous" :src="pageData.video"></video> -->
-            <el-image fit="cover" :src="pageData.img" alt="" class="img" />
+            <el-image fit="cover" :src="pageData.z_pic" alt="" class="img" />
             <div class="bottom_content">
                 <div class="title">总结：</div>  
-                <div class="subTitle" v-html="pageData.subTitle"></div>  
+                <div class="subTitle" v-html="pageData.zongjie"></div>  
             </div>
         </div>
-        <Footer></Footer>
+        <div class="topping hflex acenter jcenter point" v-if="scroll_top > 500" @click="toTop">
+            <img src="@/assets/images/common/topping.png" alt="">
+        </div>
+        <Footer :footer="footer"></Footer>
 
     </div>
 </template>
@@ -62,39 +73,68 @@ export default {
     },
     data() {
         return {
-            pageData: {
-                title: '仿真草坪按生产工艺',
-                subTitle: `<p>注塑仿真草坪和编织仿真草坪</p><p>注塑仿真草坪和编织仿真草坪</p><p>注塑仿真草坪和编织仿真草坪</p>`,
-                video: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
-                info: {
-                    title: `<p>注塑仿真草坪和编织仿真草坪</p>`,
-                    subTitle: `<p>注塑仿真草坪和编织仿真草坪</p>`,
-                    img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-                },
-                list: [
-                    {
-                        name: '人造草坪',
-                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园'
-                    },
-                    {
-                        name: '人造草坪',
-                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园'
-                    },
-                    {
-                        name: '人造草坪',
-                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园'
-                    }
-                ],
-                img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-            },
-            num: 0
+            pageData: {},
+            pageList: [],
+            num: 0,
+            footer: {},
+            scroll_top: 0
         }
     },
     created() {
         that = this
+        that.getConfig()
+        that.getData()
+    },
+    mounted() {
+        window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
+
     },
     methods: {
-        
+        // 获取基本配置
+        getConfig() {
+            that.$http.getConfig().then((res) => {
+                console.log('基础配置',res)
+                if (res.data.code == 1) {
+                    that.pageData = res.data.data
+                    var temp = that.pageData.p_url.substr(that.pageData.p_url.length - 3,3)
+                    var type = ''
+                    if(temp == 'jpg' || temp == 'png' || temp == 'gif') {
+                        type = 'image'
+                    } else if(temp == 'mp4' || temp == 'avi') {
+                        type = 'video'
+                    }
+                    that.$set(that.pageData,'type',type)
+                    that.footer = {
+                        company: that.pageData.company,
+                        phone: that.pageData.phone,
+                        address: that.pageData.address,
+                    }
+                }
+            })
+        },
+        // 获取产品服务列表
+        getData() {
+            that.$http.getProductList().then((res) => {
+                console.log('产品服务列表',res);
+                if(res.data.code == 1) {
+                    that.pageList = res.data.data.list
+                }
+            })
+        },
+        // 查看产品详情
+        jump(url) {
+            window.location.href = url
+        },
+        // 监听页面滚动
+        handleScroll() {
+            this.scroll_top = document.documentElement.scrollTop
+        },
+        // 返回顶部
+        toTop() {
+            document.body.scrollTop = 0
+            document.documentElement.scrollTop = 0
+            this.scroll_top = document.documentElement.scrollTop
+        }
     }
 }
 </script>
@@ -154,6 +194,18 @@ export default {
 .info-h .info-img {
     width: 1058px;
     height: 722px;
+    position: relative;
+}
+/deep/ .info-h .info-img .el-image {
+    width: 100%;
+    height: 100%;
+}
+.info-h .info-img .img_bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 }
 .list {
     padding: 150px 0 34px;
@@ -195,8 +247,24 @@ export default {
     font-weight: 500;
     color: #333333;
     max-width: 779px;
+    overflow:hidden; 
+    text-overflow:ellipsis;
+    display:-webkit-box; 
+    -webkit-box-orient:vertical;
+    -webkit-line-clamp:2; 
+    line-clamp:2; 
+    box-orient:vertical;
+    padding: 10px 0;
     /* line-height: 48px; */
 }
+.list .item_right:hover .item_right_text {
+    color: #666;
+}
+
+.list .item_right:hover .item_right_text2 {
+    color: #666;
+}
+
 @media (max-width: 750px) {
     .list .item_right .item_right_text2 {
         overflow:hidden; 
@@ -227,14 +295,17 @@ export default {
     }
  }
 .bottom {
-    width: 100vw;
+    width: 100%;
     height: 100vh;
     position: relative;
+    background: #fff;
+    box-sizing: border-box;
+    padding: 82px 200px;
 }
 .bottom .img {
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    /* object-fit: cover; */
 }
 .bottom .bottom_content {
     position: absolute;
@@ -243,7 +314,7 @@ export default {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-    padding: 98px 101px;
+    padding: 180px 301px;
 }
 .bottom .bottom_content .title,.subTitle {
     font-size: 60px;
@@ -254,4 +325,19 @@ export default {
 .bottom .bottom_content .title {
     padding-bottom: 44px;
 }
+.topping {
+    position: fixed;
+    bottom: 100px;
+    right: 45px;
+    z-index: 999;
+    width: 100px;
+    height: 100px;
+    background: #000000;
+    opacity: 0.3;
+    border-radius: 10px;
+}
+.topping img {
+    width: 53px;
+    height: 57px;
+}
 </style>

xinxuan/src/view/trade.vue

@@ -3,23 +3,27 @@
         <Header></Header>
         <div class="top">
             <div class="videoContainer">
-                <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
+                <!-- <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
                     <source :src="pageData.video" type="video/mp4" />
+                </video> -->
+                <video id="back_video" :style="fixStyle" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous" v-if="pageData.type=='video'">
+                    <source :src="pageData.k_url" type="video/mp4" />
                 </video>
+                <el-image :src="pageData.k_url" class="video fillWidth" fit="cover" v-if="pageData.type=='image'"></el-image>
             </div>    
-            <div class="title">{{ pageData.title }}</div>  
-            <div class="subTitle" v-html="pageData.subTitle"></div>  
+            <div class="title">{{ pageData.k_title }}</div>  
+            <div class="subTitle" v-html="pageData.x_subtitle"></div>  
             <div class="line"></div> 
         </div>
         <div class="center">
             <div class="info">
                 <div class="info-h hflex acenter jbetween">
                     <div class="info-text">
-                        <div v-html="pageData.info.title" style="margin-bottom: 99px;"></div>
-                        <div v-html="pageData.info.subTitle"></div>
+                        <div v-html="pageData.k_content" style="margin-bottom: 99px;"></div>
+                        <!-- <div v-html="pageData.info.subTitle"></div> -->
                     </div>
                     <div class="info-img">
-                        <el-image fit="cover" :src="pageData.info.img" alt="" >
+                        <el-image fit="cover" :src="pageData.k_pic" alt="" >
                         </el-image>
                         <img src="@/assets/images/common/img_top_bg.png" alt="" class="img_bg">
                     </div>
@@ -29,15 +33,18 @@
             <div class="list">
                 <div class="line"></div>
                 <div  class="hflex acenter fwrap imgs">
-                    <div v-for="(item,index) in pageData.list" :key="index" class="list_item">
-                        <el-image fit="cover" :src="item.img" alt="" class="img" />
-                        <div class="text">{{ item.name }}</div>
+                    <div v-for="(item,index) in pageList" :key="index" class="list_item">
+                        <el-image fit="cover" :src="item.url" alt="" class="img" />
+                        <div class="text">{{ item.title }}</div>
                     </div> 
                 </div>
                 
             </div> 
         </div>
-        <Footer></Footer>
+        <div class="topping hflex acenter jcenter point" v-if="scroll_top > 1000" @click="toTop">
+            <img src="@/assets/images/common/topping.png" alt="">
+        </div>
+        <Footer :footer="footer"></Footer>
 
     </div>
 </template>
@@ -53,58 +60,62 @@ export default {
     },
     data() {
         return {
-            pageData: {
-                title: '仿真草坪按生产工艺',
-                subTitle: `<p>注塑仿真草坪和编织仿真草坪</p><p>注塑仿真草坪和编织仿真草坪</p><p>注塑仿真草坪和编织仿真草坪</p>`,
-                video: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
-                info: {
-                    title: `<p>注塑仿真草坪和编织仿真草坪</p>`,
-                    subTitle: `<p>注塑仿真草坪和编织仿真草坪</p>`,
-                    img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-                },
-                list: [
-                    {
-                        name: '绿色仿真草坪',
-                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园'
-                    },
-                    {
-                        name: '人造草坪',
-                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-
-                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园'
-                    },
-                    {
-                        name: '人造草坪',
-                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-
-                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园'
-                    },
-                    {
-                        name: '人造草坪',
-                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园'
-                    },
-                    {
-                        name: '人造草坪',
-                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园'
-                    },
-                    {
-                        name: '人造草坪',
-                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园'
-                    }
-                ],
-                img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-            },
+            pageData: {},
+            pageList: [],
+            footer: {},
+            scroll_top: 0
         }
     },
     created() {
         that = this
+        that.getConfig()
+        that.getList()
+    },
+    mounted() {
+        window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
+
     },
     methods: {
-        
+        // 获取基础配置信息
+        getConfig() {
+            that.$http.getConfig().then((res) => {
+                if(res.data.code == 1) {
+                    that.pageData = res.data.data
+                    var temp = that.pageData.k_url.substr(that.pageData.k_url.length - 3,3)
+                    var type = ''
+                    if(temp == 'jpg' || temp == 'png' || temp == 'gif') {
+                        type = 'image'
+                    } else if(temp == 'mp4' || temp == 'avi') {
+                        type = 'video'
+                    }
+                    that.$set(that.pageData,'type',type)
+                    that.footer = {
+                        company: that.pageData.company,
+                        phone: that.pageData.phone,
+                        address: that.pageData.address,
+                    }
+                }
+            })
+        },
+        // 获取跨境贸易信息
+        getList() {
+            that.$http.getTradeList().then((res) => {
+                console.log('跨境贸易',res);
+                if(res.data.code == 1) {
+                    that.pageList = res.data.data.list
+                }
+            })
+        },
+        // 监听页面滚动
+        handleScroll() {
+            this.scroll_top = document.documentElement.scrollTop
+        },
+        // 返回顶部
+        toTop() {
+            document.body.scrollTop = 0
+            document.documentElement.scrollTop = 0
+            this.scroll_top = document.documentElement.scrollTop
+        }
     }
 }
 </script>
@@ -232,5 +243,19 @@ export default {
 .center .list .list_item:hover .text {
     opacity: 1;
 }
-
+.topping {
+    position: fixed;
+    bottom: 100px;
+    right: 45px;
+    z-index: 999;
+    width: 100px;
+    height: 100px;
+    background: #000000;
+    opacity: 0.3;
+    border-radius: 10px;
+}
+.topping img {
+    width: 53px;
+    height: 57px;
+}
 </style>

xinxuan/vue.config.js

@@ -1,5 +1,47 @@
-const { defineConfig } = require('@vue/cli-service')
-module.exports = defineConfig({
+const TerserPlugin = require('terser-webpack-plugin')
+module.exports = {
+  assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录
+  publicPath: './', // 静态资源路径（默认/，如果不改打包后会白屏）
+  devServer: {
+    host: 'localhost',
+    port: 8080,
+    // 跨域
+    proxy: {
+      [process.env.VUE_APP_BASE_API]: {
+        target: 'https://website.hdlkeji.com', //要跨域的地址，接口对接使用
+        changeOrigin: true, // 允许跨域
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_BASE_API]: '',
+        },
+        ws: false,
+      },
+    },
+  },
   transpileDependencies: true,
-  lintOnSave:false
-})
+  lintOnSave: false,
+  //生产环境是不需要sourceMap的，如下配置可以去除
+  //问题： vue项目打包之后js文件夹中，会自动生成一些map文件，占用相当一部分空间
+  //sourceMap资源映射文件，存的是打包前后的代码位置，方便开发使用，这个占用相当一部分空间。
+  //map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
+  productionSourceMap: false, //清除sourceMap（可以减小一半大小如：压缩包7M，使用后3M多）
+
+  //   打包后禁止在控制台输出console.log
+  configureWebpack: (config) => {
+    if (process.env.NODE_ENV === 'production') {
+      config.plugins.push(
+        new TerserPlugin({
+          terserOptions: {
+            ecma: undefined,
+            warnings: false,
+            parse: {},
+            compress: {
+              drop_console: true,
+              drop_debugger: false,
+              pure_funcs: ['console.log'], // 移除console
+            },
+          },
+        })
+      )
+    }
+  },
+}