准备开发新闻图文3通栏

准备开发新闻图文3通栏

components/template/component/list/450x950/1.vue

@@ -0,0 +1,19 @@
+<template>
+    3333
+</template>
+
+<script setup>
+//引入vue
+import {ref} from 'vue';
+//获得新闻数据
+const props = defineProps({
+    titleLink:Object,//板块名称
+    templateData:Array,//新闻数据
+    skinId:String,//皮肤id
+});
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

components/template/component/list/450x950/2.vue

@@ -0,0 +1,19 @@
+<template>
+    3333
+</template>
+
+<script setup>
+//引入vue
+import {ref} from 'vue';
+//获得新闻数据
+const props = defineProps({
+    titleLink:Object,//板块名称
+    templateData:Array,//新闻数据
+    skinId:String,//皮肤id
+});
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

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

@@ -0,0 +1,19 @@
+<template>
+    1111
+</template>
+
+<script setup>
+//引入vue
+import {ref} from 'vue';
+//获得新闻数据
+const props = defineProps({
+    titleLink:Object,//板块名称
+    templateData:Array,//新闻数据
+    skinId:String,//皮肤id
+});
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

components/template/component/list/720x300/2.vue

@@ -0,0 +1,19 @@
+<template>
+    1111
+</template>
+
+<script setup>
+//引入vue
+import {ref} from 'vue';
+//获得新闻数据
+const props = defineProps({
+    titleLink:Object,//板块名称
+    templateData:Array,//新闻数据
+    skinId:String,//皮肤id
+});
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

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

@@ -0,0 +1,19 @@
+<template>
+    2222
+</template>
+
+<script setup>
+//引入vue
+import {ref} from 'vue';
+//获得新闻数据
+const props = defineProps({
+    titleLink:Object,//板块名称
+    templateData:Array,//新闻数据
+    skinId:String,//皮肤id
+});
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

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

@@ -0,0 +1,19 @@
+<template>
+    2222
+</template>
+
+<script setup>
+//引入vue
+import {ref} from 'vue';
+//获得新闻数据
+const props = defineProps({
+    titleLink:Object,//板块名称
+    templateData:Array,//新闻数据
+    skinId:String,//皮肤id
+});
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

components/template/sector/body/list/1200x980/1.vue

@@ -0,0 +1,157 @@
+<template>
+    <div class="commentSectorBox">
+        <!-- 
+            注意 ，该组件可以在首页与频道页中通用
+         -->
+        <div class="commentSector">
+            <div class="commentSectorLeft">
+                <div class="commentSectorLeftTop">
+                    <div v-if="templateData.componentList[0].component_style.toString()=='1'">
+                        <leftTop1Style 
+                            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="300" />
+                    </div>
+                    <div v-if="templateData.componentList[0].component_style.toString()=='2'">
+                        <leftTop2Style 
+                            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="300" />
+                    </div>
+                </div>
+                <div class="commentSectorLeftBottom">
+                    <div v-if="templateData.componentList[1].component_style.toString()=='1'">
+                        <leftBottom1Style 
+                            v-if="templateData.componentList[1].data.text.length > 0" 
+                            :titleLink="componentTitle2" 
+                            :templateData="templateData.componentList[1].data"
+                            :skinId="skinId"
+                        />
+                        <nodata v-else :dataStyle="2" :dataWidth="720" :dataHeight="620" />
+                    </div>
+                    <div v-if="templateData.componentList[1].component_style.toString()=='2'">
+                        <leftBottom2Style 
+                            v-if="templateData.componentList[1].data.text.length > 0" 
+                            :titleLink="componentTitle2" 
+                            :templateData="templateData.componentList[1].data"
+                            :skinId="skinId"
+                        />
+                        <nodata v-else :dataStyle="2" :dataWidth="720" :dataHeight="620" />
+                    </div>
+                </div>
+            </div>
+            <div class="commentSectorRight">
+                <div v-if="templateData.componentList[2].component_style.toString()=='1'">
+                    <right1Style 
+                        v-if="templateData.componentList[2].data.text.length > 0" 
+                        :titleLink="componentTitle3" 
+                        :templateData="templateData.componentList[2].data"
+                        :skinId="skinId"
+                    />
+                    <nodata v-else :dataStyle="2" :dataWidth="450" :dataHeight="950" />
+                </div>
+                <div v-if="templateData.componentList[2].component_style.toString()=='2'">
+                    <right2Style 
+                        v-if="templateData.componentList[2].data.text.length > 0" 
+                        :titleLink="componentTitle3" 
+                        :templateData="templateData.componentList[2].data"
+                        :skinId="skinId"
+                    />
+                    <nodata v-else :dataStyle="2" :dataWidth="450" :dataHeight="950" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+//左侧顶部样式1
+import leftTop1Style from '@/components/template/component/list/720x300/1.vue'
+//左侧顶部样式2
+import leftTop2Style from '@/components/template/component/list/720x300/2.vue'
+//左侧底部样式1
+import leftBottom1Style from '@/components/template/component/list/720x620/1.vue'
+//左侧底部样式2
+import leftBottom2Style from '@/components/template/component/list/720x620/2.vue'
+//右侧样式1
+import right1Style from '@/components/template/component/list/450x950/1.vue'
+//右侧样式2
+import right2Style from '@/components/template/component/list/450x950/2.vue'
+//暂无数据
+import nodata from '@/components/template/component/public/nodata.vue'
+
+const props = defineProps({
+    skinId: Number,//皮肤id
+    templateData:Object,//新闻数据
+});
+
+//该栏目下有三个组件 此时需要提供children_count来判断是否跳转到频道页
+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
+}
+const componentTitle2 = {
+    alias:props.templateData.componentList[1].data.alias,
+    aLIas_pinyin:props.templateData.componentList[1].data.pinyin,
+    is_url: props.templateData.componentList[1].data.is_url,
+    children_count: props.templateData.componentList[1].data.children_count,
+    cid:props.templateData.componentList[1].data.category_id
+}
+const componentTitle3 = {
+    alias:props.templateData.componentList[2].data.alias,
+    aLIas_pinyin:props.templateData.componentList[2].data.pinyin,
+    is_url: props.templateData.componentList[2].data.is_url,
+    children_count: props.templateData.componentList[2].data.children_count,
+    cid:props.templateData.componentList[2].data.category_id
+}
+</script>
+
+<style scoped lang="less">
+.commentSectorBox {
+    width:100%;
+    height: 950px;
+    display: flex;
+    margin-bottom: 30px;
+    .commentSector {
+        width: 1200px;
+        height: 950px;
+        margin: 0 auto;
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        box-sizing: content-box;
+        .commentSectorLeft {
+            width: 720px;
+            height: 950px;
+            .commentSectorLeftTop {
+                width: 720px;
+                height: 300px;
+                margin-bottom: 28px;
+                position: relative;
+                box-sizing: content-box;
+            }
+            .commentSectorLeftBottom {
+                width: 720px;
+                height: 620px;
+                position: relative;
+            }
+        }
+        .commentSectorRight {
+            width: 450px;
+            height: 950px;
+            box-sizing: content-box;
+            position: relative;
+        }
+    }
+}
+</style>
+

pages/index.vue

@@ -17,6 +17,8 @@
         <templateNewSector1 :skinId="skinId" :templateData="testTemplateData"></templateNewSector1>
         <!--图文组合2-->
         <templateNewSector2 :skinId="skinId" :templateData="testTemplateData"></templateNewSector2>
+        <!--图文组合3-->
+        <templateNewSector3 :skinId="skinId" :templateData="testTemplateData"></templateNewSector3>
     </div>
     <!-- 底部 -->
     <templateFoot></templateFoot>
@@ -41,7 +43,8 @@ import templateStaticLink from '@/components/template/sector/body/index/link/120
 import templateNewSector1 from '@/components/template/sector/body/list/1200x470/1.vue'
 //0.2.6 图文组合2
 import templateNewSector2 from '@/components/template/sector/body/list/1200x470/2.vue'
-
+//0.2.7 图文组合3
+import templateNewSector3 from '@/components/template/sector/body/list/1200x980/1.vue'
 //0.加载全局模板组件 end---------------------------------------->
 
 //1.获得基本信息单元 start---------------------------------------->