广告

src/App.vue

@@ -127,6 +127,7 @@ const sellGetTripTemplate = async () =>{
         let dataObj = dataRes.data.data
         let viewportRatio = 1.414
         if(dataRes.data.data.TempType==1) viewportRatio = 0.7069
+        if(dataRes.data.data.Width&&dataRes.data.data.Height) viewportRatio = dataRes.data.data.Height/dataRes.data.data.Width
         slidesStore.setViewportRatio(viewportRatio)
         let SlidesData = JSON.parse(dataObj.TempData)
         let newSlides = []

src/components/PSD/Index.vue

@@ -72,16 +72,17 @@
     </el-dialog>
 </template>
 <script setup lang="ts">
-import {ref,defineProps,watch} from 'vue'
+import {ref,defineProps,watch,inject} from 'vue'
 import { UploadFilled,Delete } from '@element-plus/icons-vue'
 import type { UploadProps, UploadUserFile,UploadInstance } from 'element-plus'
 import PSD from 'psd.js'
-import {getFonts, toSlider, toThumbnails} from '@/utils/psdParser/index'
+import {getFonts, toSlider,getDrawingBoardSize, toThumbnails} from '@/utils/psdParser/index'
 import { useSlidesStore } from '@/store'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AliyunUpload from '@/utils/upload/aliyun'
 import { useFontStore,useScreenStore } from '@/store'
 import { CustomerFonts } from '@/store/font'
+import { injectKeyDataSource,injectKeyTemplate } from '@/types/injectKey'
 
 const props = defineProps({
     visible:{
@@ -105,6 +106,11 @@ const fonts = ref<any[]>()
 const uploadingIndex = ref(-1)
 const uploadFinishFont = ref<string[]>([])
 
+const queryObj = ref({} as any)
+const searchData = ref({} as any)
+queryObj.value = inject(injectKeyDataSource).queryObj
+searchData.value = inject(injectKeyTemplate)
+
 
 const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
     isResolving.value=true
@@ -114,6 +120,11 @@ const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
             PSD.fromURL(url).then(async (psd:any) => {
                 thumbnails.value= await toThumbnails(psd)
                 sliders.value = await toSlider(psd)
+                if(searchData.value.TemplateType==2) {
+                    let DrawingBoardSize = await getDrawingBoardSize(psd)
+                    queryObj.value.Width = DrawingBoardSize.Width
+                    queryObj.value.Height = DrawingBoardSize.Height
+                }
                 fonts.value = getFonts(psd)
                 if(fonts.value){
                     fonts.value = fonts.value.filter(x=>useFontStore().getFonts.findIndex(y=>y.fontFamily==x)==-1)

src/store/sellTemplate.ts

@@ -8,7 +8,7 @@ export interface SalesState {
 
 export const useSellTemplateStore = defineStore('sales', {
   state: (): SalesState => ({
-    SalesEditor: 0, // 1 新增 2编辑
+    SalesEditor: 0, // 1 新增模版 2编辑模版 3新增广告 4编辑广告
     SalesBack: 0,// 0 销售首页  1 模版首页
     SalesTripId: '', // 销售行程id
   }),

src/types/slides.ts

@@ -703,7 +703,7 @@ export interface Slide {
   animations?: PPTAnimation[]
   turningMode?: TurningMode
   pageType: number,
-  isTripItems?:boolean
+  isTripItems?:boolean,
 }
 
 /**

src/utils/psdParser/index.ts

-import { ResolvePsdToSliderHandler, ResolveThumbHandler,ResolveSliderFonts } from "./resolve"
+import { ResolvePsdToSliderHandler,ResolvePsdDrawingBoardSize, ResolveThumbHandler,ResolveSliderFonts } from "./resolve"
 
 export const toSlider = async (psd:any)=>{
     const sliders = await ResolvePsdToSliderHandler(psd);
     return sliders
 }
+export const getDrawingBoardSize= (psd:any) => {
+    return ResolvePsdDrawingBoardSize(psd)
+}
 export const getFonts = (psd:any) => {
     return ResolveSliderFonts(psd)
 }

src/utils/psdParser/resolve.ts

@@ -63,6 +63,25 @@ export const ResolvePsdToSliderHandler = async (psd:any) => {
     }
 }
 
+export const ResolvePsdDrawingBoardSize= async (psd:any) => {
+    let items:Array<any> = psd.tree().children().filter((x:any)=>x.layer.visible)
+    if(items && items.length>0){
+        for (let i = 0; i < items.length; i++) {
+            const x = items[i];
+            const {_children} = x
+            if(_children && _children.length>0){
+                let DrawingBoardSize = {
+                    Width: x.layer.artboard().export().coords.right-x.layer.artboard().export().coords.left,
+                    Height: x.layer.artboard().export().coords.bottom-x.layer.artboard().export().coords.top
+                }
+                return DrawingBoardSize
+            }
+
+        }
+
+    }
+}
+
 export const ResolveSliderFonts = (psd:any) => {
 
     let items:Array<any> = psd.tree().children().filter((x:any)=>x.layer.visible)

src/views/Editor/Canvas/index.vue

@@ -220,7 +220,7 @@ onMounted(() => {
 
 // 点击画布的空白区域：清空焦点元素、设置画布焦点、清除文字选区、清空格式刷状态
 const handleClickBlankArea = (e: MouseEvent) => {
-  console.log(e)
+  console.log(e,slides.value[6])
   if (activeElementIdList.value.length) mainStore.setActiveElementIdList([])
   if (!spaceKeyState.value && e.button==0) updateMouseSelection(e)
   else if(e.button==1) dragViewport(e)
@@ -368,7 +368,7 @@ provide(injectKeySlideScale, canvasScale)
 .canvas {
   height: 100%;
   user-select: none;
-  /* overflow: hidden; */
+  overflow: hidden;
   background-color: $lightGray;
   position: relative;
 }

src/views/Editor/EditorHeader/index.vue

@@ -78,38 +78,37 @@
       size="small" :loading="datas.loading"
       @click="setTemplate" style="color: #ffff;margin-left: 10px;">
         <template v-if="userInfo.IsEditTripTemplate==1&&model==1">
-         保存模板
+         {{searchData.TemplateType!=2?'保存模板':'保存广告'}}
         </template>
-        <template v-if="(ConfigId>0&&model!=2)">
+        <template v-if="ConfigId>0&&model!=2">
           保存行程
         </template>
     </el-button>
     <template v-if="model==2">
-         <Popover trigger="click" placement="bottom-start" v-model:value="sellSaveVisible">
-          <template #content>
-            <div>
+      <el-dropdown v-if="searchData.sellId>0" split-button 
+        size="small" type="primary">
+        保存
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item>
               <el-button type="primary" 
                 size="small" :loading="datas.loading"
-                style="color: #ffff;margin-left: 10px;"
+                style="color: #ffff;"
                 @click="setTemplate(0)">
               保存模板  
               </el-button>
-            </div>
-            <div class="q-mt-md">
+            </el-dropdown-item>
+            <el-dropdown-item>
               <el-button type="primary" 
                 size="small" :loading="datas.loading"
-                style="color: #ffff;margin-left: 10px;"
+                style="color: #ffff;"
                 @click="setTemplate(1)">
                 另存模板  
               </el-button>
-            </div>
+            </el-dropdown-item>
+          </el-dropdown-menu>
         </template>
-          <el-button v-if="searchData.sellId>0" type="primary" 
-            size="small" :loading="datas.loading"
-            style="color: #ffff;margin-left: 10px;">
-            保存 
-          </el-button>
-        </Popover>
+      </el-dropdown>
       <el-button v-if="!searchData.sellId" type="primary" 
         size="small" :loading="datas.loading"
         style="color: #ffff;margin-left: 10px;"
@@ -135,6 +134,7 @@
 </template>
 
 <script lang="ts" setup>
+import { ArrowDown } from '@element-plus/icons-vue'
 import { nextTick, ref, reactive, inject, computed, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { toPng, toJpeg } from 'html-to-image'
@@ -187,7 +187,6 @@ const hotkeyDrawerVisible = ref(false)
 const editingTitle = ref(false)
 const titleInputRef = ref<InstanceType<typeof Input>>()
 const titleValue = ref('')
-const sellSaveVisible = ref(false)
 const { setNewDatasList } = useEditor()
 
 
@@ -278,12 +277,21 @@ const UploadPsdHandler = () => {
 // 销售新增修改模版
 const SetSellTemplate = async (type) => {
   try {
+    let TempId = 0
+    if(queryObj.value.TempId) TempId = queryObj.value.TempId
+    if(!TempId){
+      return ElMessage({
+        showClose: true,
+        message: '模版不存在, 请重选',
+        type: 'warning',
+      })
+    }
       let Id = 0
-      if(searchData.value.sellId&&!type) Id = searchData.value.sellId
+      if(searchData.value.sellId&&type==0) Id = searchData.value.sellId
       if(type==1) Id = 0
       let queryMsg = {
         Id: Id,
-        TempId: queryObj.value.TempId,
+        TempId: TempId,
         TempData: queryObj.value.TempData,
         Title: queryObj.value.Title
       }
@@ -294,7 +302,6 @@ const SetSellTemplate = async (type) => {
           message: '操作成功',
           type: 'success',
         })
-        sellSaveVisible.value = false
         setTimeout(()=>{
           SalesEditorStore.setSalesEditor(0)
         },100)
@@ -313,6 +320,8 @@ const SetSellTemplate = async (type) => {
 // 新增修改模版
 const SetTripTemplateSlide = async () => {
   try {
+    console.log(queryObj.value,'======')
+    return
     let TemplateRes = await ConfigService.SetTripTemplateSlide(queryObj.value);
     if (TemplateRes.data.resultCode == 1) {
       if(!queryObj.value.TempId){
@@ -326,6 +335,7 @@ const SetTripTemplateSlide = async () => {
       })
       datas.DataSource.DataSourceOverlay = false
       dataLoadingStore.setDataLoading(1)
+      useSlidesStore().setThumbnails([])
     }else{
       ElMessage({
         showClose: true,
@@ -387,7 +397,7 @@ const uploadImageHandler = async ()=>{
         queryObj.value.PageImage.push(url)
       }
     }
-    useSlidesStore().setThumbnails([])
+    
   }
 
   loadingInstance.value.close()
@@ -440,12 +450,12 @@ const SetTripTemplateConfig = async () => {
 }
 // 保存
 const setTemplate = async (type) =>{
+  if(searchData.value.TemplateType) queryObj.value.TemplateType = searchData.value.TemplateType
   queryObj.value.Title = title.value
   datas.loading = true
   if(SourceLoading.value) setNewDatasList(datas.DataSource)
 
   await uploadImageHandler()
-  console.log(JSON.stringify(queryObj.value))
   let arr = JSON.parse(JSON.stringify(slides.value))
   if(dataLoading.value){
     dataLoadingStore.setDataLoading(0)
@@ -483,6 +493,7 @@ const setTemplate = async (type) =>{
       }
   } else {
     arr.forEach(x=>{
+      if(searchData.value.TemplateType==2) x.pageType = 0
       x.elements.forEach(y=>{
         delete y.TemplateList
         delete y.TemplateDataSource
@@ -503,12 +514,12 @@ const setTemplate = async (type) =>{
   // console.log(arr,'-------tttt')
   
   queryObj.value.TempData = JSON.stringify(arr)
-  console.log(JSON.stringify(queryObj.value))
+  // console.log(JSON.stringify(queryObj.value))
   if(model.value==1&&userInfo.value.IsEditTripTemplate==1){
     await SetTripTemplateSlide()
   }else if(ConfigId.value&&model.value!=2){
     await SetTripTemplateConfig()
-  }else if(model.value==2){
+  }else if(model.value==2&&SalesEditor.value>0&&(SalesEditor.value==1||SalesEditor.value==2)){
     await SetSellTemplate(type)
   }
 }

src/views/Editor/Thumbnails/index.vue

@@ -374,7 +374,7 @@ const GetTripTemplate = async () =>{
         },
       }
     ]
-    slidesStore.setTitle('模版名称')
+    slidesStore.setTitle(searchData.value.TemplateType!=2?'模版名称':'广告名称')
     return slidesStore.setSlides(list)
   }
   try {
@@ -390,6 +390,7 @@ const GetTripTemplate = async () =>{
         if(SalesBack.value==0||(SalesBack.value==1&&searchData.value.TempId)){
           let viewportRatio = 1.414
           if(dataRes.data.data.TempType==1) viewportRatio = 0.7069
+          if(dataRes.data.data.Width&&dataRes.data.data.Height) viewportRatio = dataRes.data.data.Height/dataRes.data.data.Width
           slidesStore.setViewportRatio(viewportRatio)
 
           let SlidesData = JSON.parse(dataRes.data.data.TempData)
@@ -457,18 +458,26 @@ const sellGetTripTemplate = async () =>{
       }
       let dataRes = await ConfigService.sellGetTemplateDetails(queryMsg);
       if (dataRes.data.resultCode == 1) {
+        if(searchData.value.TempId) queryObj.value.TempId = searchData.value.TempId
+        else if(searchData.value.TempId2&&!searchData.value.TempId) queryObj.value.TempId = searchData.value.TempId2
+        else if(searchData.value.sellTempId) queryObj.value.TempId = searchData.value.sellTempId
+        else if(TempId.value) queryObj.value.TempId = TempId.value
+
         let dataObj = dataRes.data.data
         let viewportRatio = 1.414
         if(dataRes.data.data.TempType==1) viewportRatio = 0.7069
+        if(dataRes.data.data.Width&&dataRes.data.data.Height) viewportRatio = dataRes.data.data.Height/dataRes.data.data.Width
         slidesStore.setViewportRatio(viewportRatio)
         if(SalesBack.value==0) slidesStore.setTitle(dataRes.data.data.Title)
-        if(SalesBack.value==0&&searchData.value.sellTempId){
+        if(SalesBack.value==0&&searchData.value.sellId){
+          console.log(JSON.parse(dataObj.TempData))
           let SlidesData = JSON.parse(dataObj.TempData)
           let newSlides = []
           await SlidesData.forEach((x,i)=>{
             newSlides.push(x)
           })
           slidesStore.setSlides(newSlides)
+          
         }
       }
   } catch (error) {

src/views/Editor/Toolbar/ElementTemplateData.vue

@@ -16,6 +16,7 @@
                     </Button>
                 </div>
             </div>
+            <template v-if="searchData.TemplateType!=2">
             <div class="row q-mt-md">
                 <Button style="flex: 1;" @click="AllDataSource()">
                     <!-- <span class="Required">*</span> -->
@@ -34,11 +35,12 @@
                         />
                 </el-select>
             </div>
+            </template>
 
-            <p class="q-mt-md"><span class="Required q-mr-md">*</span>模版名称：</p>
+            <p class="q-mt-md"><span class="Required q-mr-md">*</span>{{searchData.TemplateType!=2?'模版名称':'广告名称'}}：</p>
             <div class="row wrap q-mt-md">
                 <el-input v-model="titleValue" @blur="handleUpdateTitle()"
-                placeholder="输入模板名称" class="input-with-select"></el-input>
+                :placeholder="searchData.TemplateType!=2?'输入模板名称':'输入广告名称'" class="input-with-select"></el-input>
             </div>
             <p class="q-mt-md"><span class="Required q-mr-md">*</span>国家：</p>
             <div class="row wrap q-mt-md">
@@ -202,7 +204,7 @@
   import { useMainStore, useSlidesStore, useScreenStore } from '@/store'
   import LineService from '@/services/LineService'
   import ConfigService from '@/services/ConfigService'
-  import { injectKeyDataSource } from '@/types/injectKey'
+  import { injectKeyDataSource, injectKeyTemplate } from '@/types/injectKey'
   import { getHtmlPlainText } from '@/utils/common'
   import useExport from '@/hooks/useExport'
   import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
@@ -222,8 +224,10 @@
     })
     const dispositionObj = ref({} as any)
     const queryObj = ref({} as any)
+    const searchData = ref({} as any)
     datas.DataSource = inject(injectKeyDataSource)
     queryObj.value = inject(injectKeyDataSource).queryObj
+    searchData.value = inject(injectKeyTemplate)
     const lines = ref([] as Array < any > ) //线路
     const Series = ref([] as Array < any > ) //系列
 

src/views/Editor/index.vue

@@ -113,6 +113,9 @@ const datas = reactive({
           ColorStr: null,//颜色值	是	[string]
           TempType: 1,//	版面类型(1-横版，2-竖版)
           TagJsonStr: '',// 标签
+          TemplateType: 0,
+          Width: 0,
+          Height: 0,
         }
     },
 

src/views/Market/Index.vue

@@ -13,10 +13,28 @@
                     </el-input>
                 </el-col>
                 <el-col :span="6" style="text-align: right;">
-                    <el-button v-if="userInfo.IsEditTripTemplate==1&&model==1" 
-                    v-tooltip="'添加模版'" type="primary" 
-                    size="small" icon="Plus"
-                    @click="addTemplate()" style="color: #ffff;"></el-button>
+                    <el-dropdown split-button 
+                    size="small" type="primary"
+                    v-if="userInfo.IsEditTripTemplate==1&&model==1">
+                    <span style="font-size: 23px;"> + </span>
+                    <template #dropdown>
+                        <el-dropdown-menu>
+                          <el-dropdown-item>
+                            <el-button type="primary" size="small"
+                                @click="addTemplate(1)" style="color: #ffff;">
+                                添加模版
+                            </el-button>
+                          </el-dropdown-item>
+                          <el-dropdown-item v-if="false">
+                            <el-button type="primary" size="small"
+                            @click="addTemplate(2)" style="color: #ffff;">
+                                添加广告
+                            </el-button>
+                          </el-dropdown-item>
+                        </el-dropdown-menu>
+                      </template>
+                    </el-dropdown>
+                    
                     <el-button v-if="SalesEditor>0" 
                     v-tooltip="SalesBack==1?'返回到上页':'返回到首页'" type="primary" 
                     size="small"
@@ -25,9 +43,9 @@
                     </el-button>
                 </el-col>
             </el-row>
-            <div class="q-mt-lg bg-white rounded text-nowrap" style="padding: 20px 20px 0 20px;">
+            <div class="q-mt-lg bg-white rounded text-nowrap marketTag" style="padding: 20px 20px 0 20px;">
                 <div class="row text-small items-center nowrap">
-                    <span style="margin-right: 50px;">适用线路：</span>
+                    <span style="margin-right: 30px;">适用线路：</span>
                     <div class="row wrap">
                         <el-check-tag :checked="queryObj.LineId == 0" @change="onLineChangeHandler(0)"
                         class="text-small q-mr-md">全部</el-check-tag>
@@ -39,7 +57,7 @@
                 <div class="row wrap items-center q-pb-md">
                     <div class="q-pb-md">
                         <div class="row text-small items-center wrap">
-                            <span style="margin-right: 50px;">适用国家：</span>
+                            <span style="margin-right: 30px;">适用国家：</span>
                             <el-check-tag :checked="queryObj.CountryName == ''" @change="onCountryNameChangeHandler('')"
                                 class="text-small q-mr-md">通用</el-check-tag>
                             <el-check-tag :checked="queryObj.CountryName == x.CountryName"
@@ -52,12 +70,11 @@
                                             v-for="(x,i) in countriesOther" :key="i">{{x.CountryName}}</el-check-tag>
                                     </template>
                                     <div class="row items-center">
-                                        <div v-if="CountryOtherName">
-                                            <el-check-tag :checked="queryObj.CountryName"
-                                             class="text-small q-mr-md">{{queryObj.CountryName}}</el-check-tag>
-                                        </div>
                                         <el-check-tag :checked="CountryOtherName"
-                                        class="text-small q-mr-md q-ml-sm">
+                                        class="text-small q-mr-md">
+                                            <span class="q-mr-md" v-if="CountryOtherName">
+                                                {{queryObj.CountryName}}
+                                            </span>
                                             <el-icon class="pointer" v-if="!MenuCountryVisible">
                                                 <ArrowDownBold @click="MenuCountryVisible = false"/> 
                                             </el-icon>
@@ -75,7 +92,7 @@
                     </div>
                     <div class="q-pb-md">
                         <div class="row text-small items-center wrap">
-                            <span style="margin-right: 50px;">季节：</span>
+                            <span style="margin-right: 30px;">季节：</span>
                             <el-check-tag :checked="queryObj.SeasonName == ''" @change="onSeasonNameChangeHandler('')"
                                 class="text-small q-mr-md">通用</el-check-tag>
                             <el-check-tag :checked="queryObj.SeasonName == x.SeasonName" @change="onSeasonNameChangeHandler(x.SeasonName)"
@@ -87,7 +104,7 @@
                     </div>
                     <div class="q-pb-md">
                         <div class="row text-small items-center nowrap">
-                            <span style="margin-right: 50px;">颜色：</span>
+                            <span style="margin-right: 30px;">颜色：</span>
                             <el-check-tag :checked="queryObj.ColorName == ''" @change="onColorNameChangeHandler('')"
                                 class="text-small q-mr-md">通用</el-check-tag>
                             <div class="row items-center nowrap">
@@ -148,6 +165,18 @@
                             </Popover>
                         </div>
                     </div>
+                    <div class="q-pb-md">
+                        <div class="MarketVerticalLine">&nbsp;</div>
+                    </div>
+                    <div class="q-pb-md" v-if="false">
+                        <div class="row text-small items-center wrap">
+                            <span style="margin-right: 30px;">类型：</span>
+                            <el-check-tag :checked="queryObj.TemplateType == 0" @change="onTypeChangeHandler('')"
+                                class="text-small q-mr-md">不限</el-check-tag>
+                            <el-check-tag :checked="queryObj.TemplateType == x.type" @change="onTypeChangeHandler(x.type)"
+                                class="text-small q-mr-md" v-for="(x,i) in typeArr" :key="i">{{x.typeName}}</el-check-tag>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div style="margin-top: 20px;">
@@ -221,6 +250,7 @@
     const colorArrOther = ref([] as Array < any > ); //颜色
     const colorArr = ref([] as Array < any > ); //颜色
     const seasonArr = ref([] as Array < any > ); //季节
+    const typeArr = ref([] as Array < any > ); //类型
     const dataList = ref([] as Array < any > ); //模板数据列表
     const marketRef = ref<any>()
     const MenuColorVisible = ref(false)
@@ -246,6 +276,8 @@
         ColorName: '', //颜色名称
         pageCount: 0, //总页数
         TempType: 0,
+        TemplateType: 0,//1模版 2广告
+        type: 0,
     })
 
     const loading = ref(false as any)
@@ -260,7 +292,8 @@
     const SalesEditorStore = useSellTemplateStore()
     const { SalesEditor, SalesBack } = storeToRefs(useSellTemplateStore())
 
-    const addTemplate = () =>{
+    const addTemplate = (type:number) =>{
+        searchData.value.TemplateType = type
         marketStore.setMarket(!market)
         searchData.value.TempId = 0
     }
@@ -335,6 +368,7 @@
         if(!ConfigId.value&&!model.value) return
         datas.DetailsVisible = false
         searchData.value.TempId = item.TempId
+        searchData.value.TemplateType = item.TemplateType
         marketStore.setMarket(false)
         datas.TemplateRow = {}
         // console.log("item", item.TempId);
@@ -381,6 +415,13 @@
         queryTemplateBySearchHandler();
     }
 
+    //类型切换
+    const onTypeChangeHandler = (Type: string) => {
+        queryObj.TemplateType = Type;
+        queryObj.pageIndex = 1
+        queryTemplateBySearchHandler();
+    }
+
     //颜色切换
     const onColorNameChangeHandler = (ColorName: string,ColorValue: String) => {
         MenuColorVisible.value = false
@@ -427,6 +468,17 @@
                 if (tempData && tempData.SeasonList) {
                     seasonArr.value = tempData.SeasonList;
                 }
+                //类型
+                for(let i=1;i<3;i++){
+                    typeArr.value.push({
+                        type:i,
+                        typeName:i==1?'模版':'广告'
+                    })
+                }
+                
+                // if (tempData && tempData.SeasonList) {
+                //     seasonArr.value = tempData.SeasonList;
+                // }
             }
         } catch (error) {
             console.log("getTemplateQuery", error);
@@ -463,6 +515,9 @@
             url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pz3etdXOpfWP.woff") format("woff");
         font-display: swap;
     }
+    .marketTag .el-check-tag.is-checked,.marketTag .el-check-tag{
+        padding: 5px 8px;
+    }
     .colorMark:hover .ColorNameBox {
         display: block;
     }

src/views/SellTemplate/SellTemplate.vue

 <template>
     <div ref="SellTemplateRef">
-        <el-row justify="space-between">
-            <el-col :span="4"></el-col>
-            <el-col :span="10">
+        <el-row justify="space-between" class="items-center">
+            <el-col :span="6" class="row items-center">
+                <!-- <el-button-group class="ml-4">
+                    <el-button type="primary" size="small" @click="querySearchHandler">模版</el-button>
+                    <el-button type="primary" size="small" @click="querySearchHandler">广告</el-button>
+                </el-button-group> -->
+            </el-col>
+            <el-col :span="8">
                 <el-input v-model="queryObj.Title" placeholder="输入关键字快速查找" class="input-with-select">
                     <template #append>
                         <el-button type="primary" @click="querySearchHandler">搜索</el-button>
                     </template>
                 </el-input>
             </el-col>
-            <el-col :span="4"></el-col>
+            <el-col :span="4" class="row flex-end">
+                <sellNavs />
+            </el-col>
         </el-row>
         <div style="margin-top: 20px;">
-            <div v-if="dataList.length>0" class="column">
+            <div v-if="dataList.length>0" class="bg-white column q-mt-lg  rounded q-px-lg">
                 <div class="row flex-between nowrap sellHeader">
                     <div>名称</div>
                     <div>创建人</div>
@@ -68,12 +75,12 @@
                     </div>
                 </div>
             </div>
-            <div v-if="dataList.length == 0 && !loading" class="q-mt-lg bg-white rounded" 
+            <div v-else-if="dataList.length == 0 && !loading" class="q-mt-lg bg-white rounded" 
             style="padding: 30px 10px 30px 10px;">
                 <el-empty description="暂无数据" />
             </div>
             <el-divider class="no-bg q-mt-lg" v-if='queryObj.pageCount == queryObj.pageIndex && !loading'>
-                <span class="text-samll bg-white" style="padding: 0 10px;color:#a3a3a3">已加载完成所有数据</span>
+                <span class="text-samll bg-white" style="background: #f3f6fb;padding: 0 10px;color:#a3a3a3">已加载完成所有数据</span>
             </el-divider>
             <div style="height:40px;" class="q-mt-md no-bg" background="transparent" v-loading="loading" element-loading-text="正在加载中"></div>
         </div>
@@ -91,6 +98,7 @@
 
     
     import QRCode from '@/components/QRCode/QRCode.vue'
+    import sellNavs from '@/views/components/sellNavs/index.vue'
     
 
     import navItem from '@/views/components/navs/index.vue'

src/views/SellTemplate/index.vue

 <template>
     <div class="common-layout" style="background: #f3f6fb;height:100vh;overflow: auto;">
         <div style="padding: 30px; max-width:1440px; margin:0 auto;height: 100%;">
-            <el-container class="SellTemplate-form bg-white">
-                <el-aside width="200px">
-                  <sellNavs />
-                </el-aside>
-                <el-container>
-                  <el-main class="bg-white rounded-bottom rounded-top">
+            <div class="rounded-bottom rounded-top">
                 <SellTemplate />
-                  </el-main>
-                </el-container>
-            </el-container>
+            </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
     import { ref, reactive, provide, watch, inject } from 'vue'
-    import sellNavs from '@/views/components/sellNavs/index.vue'
     import SellTemplate from './SellTemplate.vue'
+
     const datas = reactive({
         SellDatas:{
             activeId: 1,
@@ -30,7 +23,6 @@
 <style lang="scss" scoped>
     .SellTemplate-form{
         height: 100%;
-        background: none;
     }
     
 </style>
\ No newline at end of file

src/views/components/sellNavs/index.vue

 <template>
-    <div class="navs-form">
-        <el-button class="navs-Button" type="primary" @click="sellAdd(1)">
+    <div class="navs-form row items-center">
+        <el-dropdown split-button 
+            size="small" type="primary">
             <span style="font-size: 23px;margin-right: 10px;"> + </span> <span>新建</span>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>
+                  <el-button type="primary" 
+                    size="small" :loading="datas.loading"
+                    style="color: #ffff;"
+                    @click="sellAdd(1)">
+                  新建模版  
                   </el-button>
+                </el-dropdown-item>
+                <!-- <el-dropdown-item>
+                  <el-button type="primary" 
+                    size="small" :loading="datas.loading"
+                    style="color: #ffff;"
+                    @click="setTemplate(3)">
+                    新建广告  
+                  </el-button>
+                </el-dropdown-item> -->
+              </el-dropdown-menu>
+            </template>
+        </el-dropdown>
+        <!-- <el-button class="navs-Button" type="primary" @click="sellAdd(1)">
+            <span style="font-size: 23px;margin-right: 10px;"> + </span> <span>新建</span>
+        </el-button> -->
         <div class="q-mt-lg">
             <div v-for="(item,index) in datas.navs" class="q-mb-md">
                 <el-button class="navs-Button" 
@@ -17,6 +41,7 @@
 </template>
 
 <script setup lang="ts">
+    import { ArrowDown } from '@element-plus/icons-vue'
     import { reactive, ref, inject, watch, onMounted} from "vue";
     import { storeToRefs } from 'pinia'
     import { useSellTemplateStore,useScreenStore } from '@/store'
@@ -37,17 +62,17 @@
         ]
     })
     datas.SellDatas = inject('SellDatas')
-    const sellAdd = () =>{
+    const sellAdd = (type:number) =>{
         searchData.value.sellId = 0
         searchData.value.sellTempId = 0
-        SalesEditorStore.setSalesEditor(1)
+        SalesEditorStore.setSalesEditor(type)
         marketStore.setMarket(true)
     }
 </script>
 
 <style lang="scss" scoped>
     .navs-form{
-        padding: 15px;
+        /* padding: 15px; */
     }
     .navs-Button{
         width: 100%;