Merge branch 'router' of http://gitlab.oytour.com/viitto/pptist into router

src/assets/styles/common.css

@@ -294,6 +294,9 @@ page {
 .q-pb-md{
 	padding-bottom: 10px;
 }
+.q-pb-lg{
+	padding-bottom: 20px;
+}
 .q-relative{
 	position: relative;
 }

src/components/User/UserCard.vue

@@ -34,7 +34,7 @@
               <div class="row items-center MarketfigureName">
                 <span>{{ userInfo.nickname }}</span>
                 <img
-                  src="../../assets/img/homeVip1.png"
+                  src="../../assets/img/homeVip.png"
                   width="65"
                   height="16"
                 />

src/views/Editor/Toolbar/ElementTemplateData.vue

@@ -331,7 +331,7 @@
         {Name:'蓝',Id:6},
         {Name:'紫',Id:7},
         {Name:'玫红',Id:8},
-        {Name:'咖啡色',Id:9},
+        {Name:'棕色',Id:9},
         {Name:'白',Id:10},
         {Name:'黑',Id:11},
         {Name:'灰',Id:12},

src/views/Market/Index.vue

@@ -152,16 +152,20 @@
                                     <div>
                                         <div class="MarketOpa2"></div>
                                         <el-icon v-if="userInfo.isTemplate==1 && model==1"
-                                        size="21px" class="cusor-pointer" @click="deleteTemplate(item)">
+                                        size="21px" class="MarketIconAbsolute cusor-pointer" @click="deleteTemplate(item)">
                                             <Delete/>
                                         </el-icon>
                                         <el-icon v-if="model!=1"
-                                        size="28px" class="cusor-pointer iconfont"
+                                        size="28px" class="MarketIconAbsolute cusor-pointer iconfont"
                                         :class="[item.checked?'icon-xihuan':'icon-xihuan1']" @click="BeFondOf(item)"></el-icon>
                                     </div>
                                     <div>
                                         <div class="MarketOpa2"></div>
-                                        <el-icon size="16px" class="cusor-pointer iconfont icon-chakan1" @click="getTemplate(item)"></el-icon>
+                                        <!-- <el-icon size="16px" class="MarketIconAbsolute cusor-pointer iconfont icon-chakan1" @click="getTemplate(item)">
+                                        </el-icon> -->
+                                        <el-icon size="23px" class="MarketIconAbsolute cusor-pointer" @click="getTemplate(item)">
+                                            <View></View>
+                                        </el-icon>
                                     </div>
                                 </div>
                                 <div class="MarketIndexButtomBox">
@@ -195,16 +199,60 @@
         </div>
     </div>
     <el-dialog v-model="datas.DetailsVisible" :align-center="true" :show-close="true" :close-on-press-escape="false" 
-    :close-on-click-modal="true" style="width: 600px;" class="small-padding ">
+    :close-on-click-modal="false" style="width: 1097px;height: 915px;" class="small-padding ">
         <template #header>
-            <div class="text-title">{{showCurrentTemplate.TemplateType!=2?'模板':'广告'}}预览</div>
+            <div class="text-title text-center fz16 PingFangSC">{{showCurrentTemplate&&showCurrentTemplate.TemplateType!=2?'行程':'广告'}}预览</div>
         </template>
-        <div v-if="showCurrentTemplate && showCurrentTemplate.PageImageList" style="max-height: 80vh; overflow-y: auto;">
+        <!-- <div v-if="showCurrentTemplate && showCurrentTemplate.PageImageList" style="max-height: 80vh; overflow-y: auto;">
             <img v-for="(x,i) in showCurrentTemplate.PageImageList" :src="x" :key="i" style="width:100%;height:auto;margin-bottom: 10px;">
+        </div> -->
+        <div class="Details-container row" v-if="showCurrentTemplate && showCurrentTemplate.PageImageList">
+            <div class="Details-left" ref="scrollContainer">
+                <div class="Details-leftBox row">
+                    <div class="column" style="width: 770px;">
+                        <img ref="scrollToElement" v-for="(x,i) in showCurrentTemplate.PageImageList" :src="x" :key="i"
+                        class="rounded">
+                    </div>
+                    <div style="width: 20px;height: 100%;"></div>
+                </div>
+            </div>
+            <div class="Details-right column flex-between">
+                <div>
+                    <div>类型</div>
+                    <div class="q-pt-lg q-pb-lg marketTagDown">
+                        <el-check-tag :checked="true" class="text-small el-check-tagW76">{{showCurrentTemplate&&showCurrentTemplate.TemplateType!=2?'行程':'广告'}}</el-check-tag>
+                    </div>
+                    <div>目的地</div>
+                    <div class="q-pt-lg q-pb-lg marketTagDown">
+                        <el-check-tag :checked="true" class="text-small el-check-tagW76">{{showCurrentTemplate.CountryName?showCurrentTemplate.CountryName:'-'}}</el-check-tag>
+                    </div>
+                    <div>季节</div>
+                    <div class="q-pt-lg q-pb-lg marketTagDown">
+                        <el-check-tag :checked="true" class="text-small el-check-tagW76">{{showCurrentTemplate.SeasonName?showCurrentTemplate.SeasonName:'-'}}</el-check-tag>
+                    </div>
+                    <div>尺寸</div>
+                    <div class="q-pt-lg">
+                        <div class="addTemplateBoxRec addTemplateBoxRecw136 rounded6 color0 text-center">
+                            {{showCurrentTemplate.width?showCurrentTemplate.width:0}} * {{showCurrentTemplate.height?showCurrentTemplate.height:0}} px
+                        </div>
+                    </div>
+                </div>
+                <div class="row flex-center">
+                    <div class="MarketAdd MarketAddw140 pointer" @click="goToTemplate(showCurrentTemplate)">立即使用</div>
+                </div>
+            </div>
+            <template v-if="showCurrentTemplate.PageImageList.length>1">
+                <div class="MarketDetaSw MarketDetaSwL" v-if="datas.currentImg!=0">
+                    <div class="cursor-pointer" @click="ToggleImg('left')"></div>
+                </div>
+                <div class="MarketDetaSw MarketDetaSwR" v-if="datas.currentImg<showCurrentTemplate.PageImageList.length-1">
+                    <div class="cursor-pointer" @click="ToggleImg('right')"></div>
+                </div>
+            </template>
         </div>
     </el-dialog>
     <el-dialog v-model="datas.addVisible" :align-center="true" :show-close="true" :close-on-press-escape="false" 
-    :close-on-click-modal="true" style="width: 373px;" class="small-padding">
+    :close-on-click-modal="false" style="width: 373px;" class="small-padding">
         <template #header>
             <div class="text-title text-center fz16 PingFangSC">创建设计</div>
         </template>
@@ -256,7 +304,7 @@ import { createOpEditorLink, createSaleCreateLink, managerTemplateLink } from '@
 import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
 import { useRouter } from "vue-router";
 import UserCard from "@/components/User/UserCard.vue";
-import { Delete } from '@element-plus/icons-vue';
+import { Delete,View } from '@element-plus/icons-vue';
 import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
 
 const {
@@ -272,6 +320,7 @@ const seasonArr = ref([] as Array < any > ); //季节
 const typeArr = ref([] as Array < any > ); //类型
 const sortArr = ref([] as Array < any > ); //排序
 const dataList = ref([] as Array < any > ); //模板数据列表
+
 const layouts = ref([
     {Name: '不限',Id:0},
     {Name: '横版',Id:1},
@@ -284,6 +333,9 @@ const RecommendedSizes = ref([
     {Name: 'PPT(16:9)',width:1920,height:1080,Id:3,checked:false},
     {Name: '公众号首图',width:900,height:383,Id:4,checked:false},
 ])
+const scrollContainer = ref<any>()
+const scrollToElement = ref<any>()
+
 
 const loading = ref(false as any)
 const searchData = ref({} as any)
@@ -315,7 +367,14 @@ const datas = reactive({
     CustomSize:{
         width: null,
         height: null,
-    }
+    },
+    SwitchingDiagram: [
+        require("@/assets/img/left.png"),
+        require("@/assets/img/leftActive.png"),
+        require("@/assets/img/right.png"),
+        require("@/assets/img/rightActive.png"),
+    ],
+    currentImg: 0,
 })
 let TemplateType = 0
 if(router.currentRoute.value.path=='/market') model.value=1
@@ -345,7 +404,22 @@ const queryObj = reactive({
     sort: 0,//排序方式
 })
 
-// 
+const ToggleImg = (text: String) => {
+    if(text=='left'){
+        if(datas.currentImg>0) {
+            datas.currentImg--
+            scrollContainer.value.scrollTop = scrollContainer.value.scrollTop-(scrollToElement.value[0].offsetHeight+30)
+        }
+    }
+    if(text=='right'){
+        if(datas.currentImg<(showCurrentTemplate.value.PageImageList.length-1)) {
+            datas.currentImg++
+            scrollContainer.value.scrollTop = datas.currentImg*(scrollToElement.value[0].offsetHeight+30)
+        }
+    }
+    
+}
+// 版型 横版 竖版
 const SwitchingVersion = (row: Object) =>{
     queryObj.TempType = row.Id
     search()
@@ -748,6 +822,58 @@ onMounted(()=>{
             url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pz3etdXOpfWP.woff") format("woff");
         font-display: swap;
     }
+    .MarketDetaSwR div:hover{
+        background: url('../../assets//img/rightActive.png') no-repeat;
+        background-size: 100% 100%;
+    }
+    .MarketDetaSwR div{
+        background: url('../../assets//img/right.png') no-repeat;
+        background-size: 100% 100%;
+    }
+    .MarketDetaSwR{
+        right: -177px;
+    }
+    .MarketDetaSwL div:hover{
+        background: url('../../assets//img/leftActive.png') no-repeat;
+        background-size: 100% 100%;
+    }
+    .MarketDetaSwL div{
+        background: url('../../assets//img/left.png') no-repeat;
+        background-size: 100% 100%;
+    }
+    .MarketDetaSwL{
+        left: -177px;
+    }
+    .MarketDetaSw div{
+        width: 104px;
+        height: 104px;
+    }
+    .MarketDetaSw{
+        position: absolute;
+        top: 393px;
+    }
+    .Details-right{
+        width: 256px;
+        padding: 0 33px;
+    }
+    .Details-leftBox img{
+        width:100%;
+        height:auto;
+        margin-bottom: 30px;
+    }
+    .Details-leftBox{
+        width: 100%;
+        height: 806px;
+    }
+    .Details-left{
+        overflow: auto;
+    }
+    .Details-container{
+        height: 806px;
+        width: 1097px;
+        padding: 0 19px 0 19px;
+        position: relative;
+    }
     .addTemplateInput {
         ::v-deep(.el-input__wrapper){
             background-color: #EFEFEF;
@@ -1084,7 +1210,7 @@ onMounted(()=>{
     .MarketIndexButtomIcon>div .el-icon.icon-xihuan{
         color: #FF674D !important;
     }
-    .MarketIndexButtomIcon>div .el-icon{
+    .MarketIconAbsolute{
         width: 36px;
         height: 36px;
         position: absolute;
@@ -1094,6 +1220,7 @@ onMounted(()=>{
         text-align: center;
         line-height: 36px;
         color: #B9B9B9;
+        z-index: 2;
     }
     .MarketIndexButtomIcon>div:hover .el-icon{
         color: #fff;
@@ -1130,4 +1257,16 @@ onMounted(()=>{
     .layout-item{
         width: 180px;
     }
+    .el-check-tag.el-check-tagW76{
+        width: 76px;
+        margin-left: 0;
+    }
+    .addTemplateBoxRec.addTemplateBoxRecw136{
+        width: 136px;
+    }
+    .MarketAdd.MarketAddw140{
+        width: 140px;
+        height: 42px;
+        line-height: 42px;
+    }
 </style>
\ No newline at end of file