放入template接口进行初步调试

放入template接口进行初步调试

components/template/component/banner/swiper/720x450/1.vue

@@ -2,7 +2,11 @@
     <div class="swiperStyle1">
         <el-carousel :interval="3000" height="405px" indicator-position="none" arrow="always" @change="change_fun">
             <el-carousel-item v-for="(item, index) in imagelist" :key="item">
-                <NuxtLink :to="`/${item.pinyin}/${item.id}.html`" :target="item.islink == 1 ? '_blank' : '_self'">
+                <NuxtLink 
+                    :to="`/${item.pinyin}/${item.id}.html`" 
+                    class="swiper_link"
+                    :target="item.islink == 1 ? '_blank' : '_self'"
+                >
                     <img :src="item.imgurl">
                     <span class="swiper_dot1 dot1">
                         {{ item.title }}
@@ -35,7 +39,7 @@ const change_fun = (the_1) => {
 }
 const imagelist = ref("")
 imagelist.value = props.templateData;
-roll_num_lang.value = props.templateData.length;
+roll_num_lang.value = props.templateData.length - 1;
 //焦点图效果 end---------------------------------------->
 </script>
 

components/template/component/list/1200x410/1.vue

@@ -0,0 +1,309 @@
+<template>
+    <div class="scrollTextSectorBox">
+        <div class="scrollTextSectorLeft">
+            <el-carousel :interval="3333" height="405px" indicator-position="none" arrow="always" @change="change_fun">
+                <el-carousel-item v-for="item in component_style1_News1Array" :key="item.id">
+                    <NuxtLink 
+                        :href="getLinkPathDetail(item)" 
+                        :title="item.title"
+                        :target="item.islink == 1 ? '_blank' : '_self'"
+                    >
+                        <img :src="item.imgurl" />
+                        <span class="swiper_dot1 dot1">
+                            {{ item.title }}
+                        </span>
+                    </NuxtLink>
+                </el-carousel-item>
+                <div class="roll_num_box">
+                    <span class="roll_num_box_new">{{ roll_num_this + 1 }}</span>/{{ roll_num_lang }}
+                </div>
+            </el-carousel>
+        </div>
+        <div class="scrollTextSectorRight">
+            <div class="listNewsTitle" v-if="skinId==1">
+                <NuxtLink
+                    v-if="titleLink.cid"
+                    :href="getLinkPath(titleLink)"
+                    :title="titleLink.alias"
+                >
+                    {{titleLink.alias}}
+                </NuxtLink>
+            </div>
+            <div class="listNewsTitle_skin2" v-if="skinId==2">
+                <span>
+                    <NuxtLink
+                        v-if="titleLink.cid"
+                        :href="getLinkPath(titleLink)"
+                        :title="titleLink.alias"
+                    >
+                        {{titleLink.alias}}
+                    </NuxtLink>
+                </span>
+            </div>
+            <div class="scrollTextSectorList" v-if="skinId==1">
+                <div v-for="(item,index) in component_style1_News2Array">
+                    <NuxtLink 
+                        :href="getLinkPathDetail(item)" 
+                        :title="item.title"
+                        :target="item.islink == 1 ? '_blank' : '_self'"
+                    >
+                        <span>[国际贸易]</span>
+                        {{ item.title }}
+                    </NuxtLink>
+                </div>
+            </div>
+            <div class="scrollTextSectorList_skin2" v-if="skinId==2">
+                <div v-for="item in component_style1_News2Array">
+                    <NuxtLink 
+                        :href="getLinkPathDetail(item)" 
+                        :title="item.title"
+                        :target="item.islink == 1 ? '_blank' : '_self'"
+                    >
+                        <span>[国际贸易]</span>
+                        {{ item.title }}
+                    </NuxtLink>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+//引入vue
+import {ref} from 'vue';
+import { ElCarousel, ElCarouselItem } from 'element-plus'
+
+//获得新闻数据
+const props = defineProps({
+    titleLink:Object,//板块名称
+    templateData:Array,//新闻数据
+    skinId:String,//皮肤id
+    templateAdData:Object,//广告
+});
+
+//轮播图
+const roll_num_this = ref(0)
+const roll_num_lang = ref(props.templateData.img.length - 1);
+
+const change_fun = (the_1) => {
+    roll_num_this.value = the_1
+}
+//样式1与样式2共用 start ---------------------------------------->
+const component_style1_News1Array = ref([]);
+component_style1_News1Array.value = props.templateData.img.slice(0,5);
+const component_style1_News2Array = ref([]);
+component_style1_News2Array.value = props.templateData.text.slice(0,9);
+//样式1与样式2共用 end ---------------------------------------->
+</script>
+
+<style lang="less" scoped>
+.scrollTextSectorBox {
+    width: 1200px;
+    height: 410px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    img{
+        width: 720px;
+        height: 405px;
+        display: block;
+    }
+    .scrollTextSectorLeft {
+        width: 720px;
+        height: 405px;
+    }
+    .scrollTextSectorRight {
+        width: 450px;
+        height: 405px;
+        .listNewsTitle {
+            font-size:22px;
+            font-weight:bold;
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 2px solid #004564;
+            color:#004564;
+            margin-bottom: 20px;
+            box-sizing: border-box;
+            a {
+                color:#004564;
+                display: block;
+                height: 25px;
+                line-height: 25px;
+            }
+        }
+        .listNewsTitle_skin2 {
+            font-size:22px;
+            font-weight:bold;
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 2px solid #A91B33;
+            color:#A91B33;
+            margin-bottom: 20px;
+            box-sizing: border-box;
+            a {
+                color:#A91B33;
+                display: block;
+                height: 25px;
+                line-height: 25px;
+            }
+            span {
+                color:#A91B33;
+                height: 25px;
+                line-height: 25px;
+                border-left: 3px solid #A91B33;
+                padding-left: 12px;
+                display: block;
+            }
+        }
+        .scrollTextSectorList {
+            div{
+                font-size: 18px;
+                height: 24px;
+                line-height: 24px;
+                margin-bottom: 16px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                span {
+                    margin-right: 5px;
+                    color:#004564;
+                }
+                a {
+                    color:#333333;
+                }
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+        .scrollTextSectorList_skin2 {
+            div{
+                font-size: 18px;
+                height: 24px;
+                line-height: 24px;
+                margin-bottom: 16px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                span {
+                    margin-right: 5px;
+                    color:#A91B33;
+                }
+                a {
+                    color:#333333;
+                }
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+}
+
+.roll_num_box {
+    position: absolute;
+    z-index: 2;
+    left: 60px;
+    bottom: 5px;
+    height: 60px;
+    line-height: 60px;
+    color: #fff;
+    font-size: 16px;
+    .roll_num_box_new {
+        font-size: 20px;
+    }
+}
+.dot1 {
+    display: block;
+    word-break: keep-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.swiper_dot1 {
+    display: block;
+    width: 100%;
+    line-height: 60px;
+    height: 60px;
+    color: #fff;
+    font-size: 18px;
+    text-indent: 20px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 10;
+    box-sizing: border-box;
+    padding: 0 144px;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+}
+.el-carousel {
+    /deep/.el-carousel__arrow i {
+        font-size: 33px !important;
+    }
+    .roll_1_box {
+        position: relative;
+    }
+    /deep/.el-carousel__arrow--left {
+        position: absolute;
+        width: 35px;
+        height: 57px;
+        color: #fff;
+        background: rgba(0, 0, 0, 0);
+        left: 9px;
+        border: none;
+        border-radius: 0;
+        top: 100%;
+        margin-top: -36px;
+    }
+    /deep/.el-carousel__arrow--right {
+        width: 35px;
+        height: 57px;
+        color: #fff;
+        background: rgba(0, 0, 0, 0);
+        position: absolute;
+        right: 9;
+        border: none;
+        border-radius: 0;
+        top: 100%;
+        margin-top: -36px;
+    }
+    /deep/ .el-carousel__indicators {
+        // 指示器
+        left: unset;
+        transform: unset;
+        right: 10px;
+        bottom: 11px;
+    }
+    /deep/ .el-carousel__button {
+        // 指示器按钮
+        width: 10px;
+        height: 10px;
+        border: none;
+        border-radius: 5px;
+        background: #fff;
+        opacity: 1;
+    }
+    /deep/ .is-active .el-carousel__button {
+        // 指示器激活按钮
+        background: #255590;
+        width: 25px;
+        opacity: 1;
+
+    }
+    /deep/ .el-carousel__container {
+        height: 100%;
+    }
+}
+.custom-indicator button {
+    background-color: #fff;
+    opacity: 1;
+    width: 8px;
+    height: 8px;
+}
+.custom-indicator button.is-active {
+    background-color: #DD7D18;
+    width: 58px;
+    opacity: 1;
+}
+</style>

components/template/component/list/1200x410/2.vue

@@ -0,0 +1,27 @@
+<template>
+    2222
+</template>
+
+<script setup>
+//引入vue
+import {ref} from 'vue';
+//获得新闻数据
+const props = defineProps({
+    titleLink:Object,//板块名称
+    templateData:Array,//新闻数据
+    skinId:String,//皮肤id
+    templateAdData:Object,//广告
+});
+//样式1与样式2共用 start ---------------------------------------->
+// const component_style1_News1Array = ref({});
+// component_style1_News1Array.value = props.templateData.img.slice(0,2);
+// const component_style1_News1Array_2 = ref({});
+// component_style1_News1Array_2.value = props.templateData.img.slice(2,3);
+// const component_style1_News3 = ref({});
+// component_style1_News3.value = props.templateData.text.slice(0,4);
+//样式1与样式2共用 end ---------------------------------------->
+</script>
+
+<style lang="less" scoped>
+
+</style>

components/template/component/list/720x620/1.vue

@@ -58,7 +58,7 @@ const props = defineProps({
     skinId:String,//皮肤id
 });
 //样式1与样式2共用 start ---------------------------------------->
-const component_style1_News1Array = ref({});
+const component_style1_News1Array = ref([]);
 const component_style1_News2Array = ref([]);
 component_style1_News1Array.value = props.templateData.img.slice(0,2);
 component_style1_News2Array.value = props.templateData.text;

components/template/sector/body/class/banner/1200x410/1.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="imgNewsBigBox">
+        <div v-if="templateData.componentList[0].component_style == 1">
+            <!-- <news1Style :name="this.$store.state.template.pageData.class[dataSort].content.componentList[0].componentData.name"/> -->
+            <news1Style 
+                v-if="templateData.componentList[0].data.text.length > 0" 
+                :titleLink="componentTitle1" 
+                :templateData="templateData.componentList[0].data"
+                :skinId="skinId"
+            />
+            <nodata v-else :dataStyle="2" :dataWidth="720" :dataHeight="440" />
+        </div>
+        <div v-if="templateData.componentList[0].component_style == 2">
+            <news2Style :name="this.$store.state.template.pageData.class[dataSort].content.componentList[0].componentData.name"/>
+        </div>
+    </div>
+</template>
+
+<script setup>
+//样式1
+import news1Style from '@/components/template/component/list/1200x410/1.vue'
+//样式2
+import news2Style from '@/components/template/component/list/1200x410/2.vue'
+//暂无数据
+import nodata from '@/components/template/component/public/nodata.vue'
+//引入vue
+import {ref} from 'vue';
+
+const props = defineProps({
+    skinId: Number,//皮肤id
+    templateData:Object,//新闻数据
+});
+//该通栏下只有一个组件
+const componentTitle1 = {
+    alias:props.templateData.componentList[0].data.alias,
+    aLIas_pinyin:props.templateData.componentList[0].data.pinyin,
+    is_url: props.templateData.componentList[0].data.is_url,
+    children_count: props.templateData.componentList[0].data.children_count,
+    cid:props.templateData.componentList[0].data.category_id
+}
+</script>
+
+<style lang="less" scoped>
+.imgNewsBigBox{
+    width: 1200px;
+    height: 410px;
+    position: relative;
+    margin: 0 auto;
+    margin-bottom: 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: content-box;
+    
+}
+</style>

components/template/sector/head/1200x200/1.vue

@@ -331,7 +331,6 @@ if(templateBaseStore.webSiteInfo.website_head){
 //adImg.value
 //获得广告
 if(templateBaseStore.webAdList){
-    //console.log(templateBaseStore.webAdList)
     adImg.value = requestAd(templateBaseStore.webAdList,templateBaseStore.webSiteInfo.website_head.ad_key + "_" + "top")
 }
 //6.获得网站基本信息与广告池 end ---------------------------------------->

pages/[dir]/index.html.vue

@@ -7,6 +7,8 @@
     <div>
         <!--频道菜单-->
         <templateChannelMenu :skinId="skinId" :navigateData="navigateData.data" :templateData="testTemplateData2" :routeId="routeId"></templateChannelMenu>
+        <!--滚动图文组合-->
+        <templateScrollList :skinId="skinId" :templateData="testTemplateData"></templateScrollList>
         <!--广告组件-->
         <templateAd :adTag="'nmw_category_0001'" :skinId="skinId" :adData="adData"></templateAd>
     </div>
@@ -25,6 +27,8 @@ import templateFoot from '@/components/template/sector/foot/1200x580/1.vue'
 import templateAd from '@/components/template/sector/body/ad/1200x90/1.vue'
 //0.2.2 频道菜单
 import templateChannelMenu from '@/components/template/sector/body/class/menu/1200x100/1.vue'
+//0.2.3 滚动图文组合
+import templateScrollList from '@/components/template/sector/body/class/banner/1200x410/1.vue'
 //0.加载全局模板组件 end---------------------------------------->
 
 //1.获得基本信息单元 start---------------------------------------->

pages/index.vue

@@ -9,7 +9,9 @@
         <templateHeadline :skinId="skinId" :templateData="testTemplateData"></templateHeadline>
         <!--轮播图-->
         <templateBanner :skinId="skinId" :templateData="testTemplateData"></templateBanner>
-        <!--广告组件-->
+        <!--广告组件 丙丙网-->
+        <!-- <templateAd :adTag="'bbzxw_index_1'" :skinId="skinId" :adData="adData"></templateAd> -->
+        <!--广告组件 农民工-->
         <templateAd :adTag="'nmw_index_0001'" :skinId="skinId" :adData="adData"></templateAd>
         <!--静态外链通栏-->
         <templateStaticLink :skinId="skinId" :templateData="testTemplateData2"></templateStaticLink>
@@ -19,7 +21,9 @@
         <templateNewSector2 :skinId="skinId" :templateData="testTemplateData"></templateNewSector2>
         <!--图文组合3-->
         <templateNewSector3 :skinId="skinId" :templateData="testTemplateData"></templateNewSector3>
-        <!--图文与广告组合-->
+        <!--图文与广告组合 丙丙网-->
+        <!-- <templateNewAndAd :skinId="skinId" :templateData="testTemplateData" :adData="adData" :adTag="'bbzxw_index_9'"></templateNewAndAd> -->
+        <!--图文与广告组合 农民工-->
         <templateNewAndAd :skinId="skinId" :templateData="testTemplateData" :adData="adData" :adTag="'nmw_index_0003'"></templateNewAndAd>
     </div>
     <!-- 底部 -->
@@ -60,6 +64,7 @@ import { useTemplateBaseStore } from '@/stores/templateBase'
 const templateBaseStore = useTemplateBaseStore()
 //1.3获得该页的皮肤id - 在每个组件中也是同样的获得方法
 const skinId = ref("")
+const websiteId = ref("")
 //1.4获得站点基本信息
 const responseStatus = await requestDataPromise('/web/getWebsiteAllinfo', {
     method: 'GET',
@@ -72,6 +77,7 @@ const responseStatus = await requestDataPromise('/web/getWebsiteAllinfo', {
 if (responseStatus.code == 200) {
     //0.3.1设置站点基本信息
     templateBaseStore.setWebSiteInfo(responseStatus.data)
+    websiteId.value = responseStatus.data.website_head.id;//获得网站id
     //0.3.2设置皮肤id
     skinId.value = templateBaseStore.webSiteInfo.website_foot.foot_info.template_id;
     //0.3.3设置seo信息
@@ -95,12 +101,21 @@ const adResponseStatus = await requestDataPromise('/web/getWebsiteAdvertisement'
     query: {},
 });
 if (adResponseStatus.code == 200) {
-    templateBaseStore.setAdList(adResponseStatus.data)
     adData.value = adResponseStatus.data;
+    templateBaseStore.setAdList(adResponseStatus.data)
 }
 //1.获得基本信息单元 end---------------------------------------->
 
 //2.页面数据 start---------------------------------------->
+//2.1获得页面数据
+// const responsePageData = await requestDataPromise('/client/indexData', {
+//     method: 'POST',
+//     body: {
+//         'website_id':websiteId.value,
+//         'getpage':'index'//获得首页数据
+//     },
+// });
+
 //2.0 测试数据 后期移除
 const testTemplateData = {
     "sectorName": "text",