baiqiu-cms-decoration-dg 0.0.22 → 0.0.24

package/src/components/cms/swiperItem/swiperItem.scss

@@ -0,0 +1,204 @@
+.swiper-wrap {
+  position: absolute;
+  .swiper-con {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+
+    .entrance-con {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    .swiper-container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      transform: translate3d(0, 0, 0);
+      overflow: hidden;
+
+      .swiper-slide {
+        transform: translate3d(0, 0, 0);
+        position: relative;
+        overflow: hidden;
+        &.slide-auto {
+          width: auto;
+        }
+
+        img {
+          object-fit: contain;
+          width: 100%;
+          height: 100%;
+        }
+
+        .swiper-hot {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          top: 0;
+        }
+
+        .video-player-con {
+          position: relative;
+
+          .video-item {
+            object-fit: cover;
+            position: relative;
+            width: 100%;
+            height: 100%;
+          }
+
+          .video-hot-image {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+
+            img {
+              object-fit: fill;
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+
+      // 轮播图左右指示器样式
+      .swiper-button-prev {
+        background-image: none;
+        left: 20px;
+        &:hover {
+          .cms2iconfont {
+            color: var(--hoverColor) !important;
+          }
+        }
+        &::after {
+          display: none;
+        }
+
+        .cms2iconfont {
+          font-size: 28px;
+        }
+      }
+
+      .swiper-button-next {
+        background-image: none;
+        right: 20px;
+
+        &:hover {
+          .cms2iconfont {
+            color: var(--hoverColor) !important;
+          }
+        }
+
+        &::after {
+          display: none;
+        }
+
+        .cms2iconfont {
+          font-size: 28px;
+        }
+      }
+
+      .swiper-scrollbar-own {
+        position: absolute;
+        height: 3px;
+        width: 70%;
+        left: 50%;
+        bottom: 10px;
+        background-color: var(--color);
+        transform: translateX(-50%);
+        z-index: 10;
+        .swiper-scrollbar-drag {
+          position: absolute;
+          background-color: var(--activeColor);
+          transition: all 0.3s;
+        }
+      }
+
+      .arrow {
+        width: 40px;
+        height: 40px;
+        background-color: #edf5fe;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+
+        .cms2iconfont {
+          font-size: 20px;
+        }
+      }
+
+      // 底部指示器
+      .swiper-pagination-custom {
+        position: absolute;
+        text-align: center;
+        transition: opacity .3s;
+        transform: translateZ(0);
+        bottom: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 10;
+
+        .pagination-custom-bullt {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background-color: #000;
+          background-color: var(--color)!important;
+          margin: 0 4px;
+          transition: all 0.3s;
+          &.bullt-active {
+            background-color: #fff;
+            background-color: var(--activeColor)!important;
+          }
+        }
+      }
+    }
+
+    .swiper-container-3 {
+      .swiper-button-prev {
+        top: 84%;
+        left: 36px;
+        .cms2iconfont {
+          font-size: 24px;
+        }
+      }
+
+      .swiper-button-next {
+        top: 84%;
+        right: 0;
+        left: 98px;
+        .cms2iconfont {
+          font-size: 24px;
+        }
+      }
+    }
+  }
+
+  .swiper-con-mobile {
+    .swiper-container {
+      .arrow {
+        width: 32px;
+        height: 32px;
+        background-color: #edf5fe;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+
+        .cms2iconfont {
+          font-size: 12px !important;
+        }
+      }
+    }
+  }
+}

package/src/components/cms/swiperItem/swiperItem.vue

@@ -0,0 +1,123 @@
+<template>
+  <div
+    :style="{
+      width: Math.round(attributeJson.baseStyle.w * ratio) + 'px',
+      height: Math.round(attributeJson.baseStyle.h * ratio) + 'px',
+      left: Math.round(attributeJson.baseStyle.l * ratio) + 'px',
+      top: Math.round(attributeJson.baseStyle.t * ratio) + 'px'
+    }"
+    class="swiper-wrap"
+  >
+
+    <div
+      v-if=" hasSwiperItem || (bgStyle.status === 1 && bgStyle.picList.length != 0)"
+      :style="{backgroundImage: bgStyle.picList.length != 0 ?`url(${bgStyle.picList[0].resourcePath})` : ''}"
+      :class="['swiper-con', `swiper-con-${mode}`]"
+      v-hoverAnimate
+    >
+      <div 
+        class="entrance-con" 
+        :style="{'--hoverColor': paginationStyle.hoverColor || paginationStyle.color, '--activeColor': paginationStyle.activeColor, '--color': paginationStyle.color, width: `${baseStyle.w* ratio}px`,  height: `${baseStyle.h * ratio}px`}">
+        <div
+          :ref="`swiper${attributeJson.sort}`"
+          :class="[`swiper-container swiper-container-${sortId} swiper-container-${indicatorType}`, animationInObj.type ? enterClass : '']"
+          :style="{ animationDuration: `${animationInObj.duration}s` }"
+          :id="`mySwiper-${sortId}`" 
+          :key="indicatorType"
+          v-show="entranceShow">
+          <div class="swiper-wrapper">
+            <div :class="['swiper-slide', {'slide-auto': isSpaceSwiper}]" v-for="(carousel, index) in swiperList" :key="carousel.sort+index">
+            <div :style="{width: `${(baseStyle.w - (styleType == 2 ? 100 : 0)) * ratio}px!important`, height: `${baseStyle.h * ratio}px`}">
+              <!-- 图片 -->
+              <img v-if="carousel.type === 1" :src="carousel.picList[0].resourcePath" :alt="carousel.picList[0].resourceName.split('.')[0]">
+              <!-- 视频 -->
+              <div class="video-player-con" v-if="carousel.type === 2">
+                <myVideoPlayer :sort="new Date().getTime()" :videoInfo="carousel.videoInfo" :autoPlay="carousel.videoInfo.checkedAttr.indexOf('autoPlay') > -1 && activeIndex == index"></myVideoPlayer>
+
+                <!-- 视频热区图片 -->
+                <div class="video-hot-image" v-if="carousel.type == 2 && carousel.isVideoHasHot == 1 && carousel.videoHotInfo.picList.length!=0">
+                  <img :src="carousel.videoHotInfo.picList[0].resourcePath" :alt="carousel.videoHotInfo.picList[0].resourceName.split('.')[0]">
+                  <div class="swiper-hot" v-if="carousel.videoHotInfo.picList.length!=0">
+                    <hotspot 
+                      :ref="`hotspot${sortId}${index}`"
+                      v-on="$listeners"
+                      v-bind="$attrs"
+                      :item="{realWidth: carousel.realWidth, realHeight: carousel.realHeight, popList: carousel.videoHotInfo.popList, width: carousel.videoHotInfo.picList[0].width, height: carousel.videoHotInfo.picList[0].height}"
+                      :componentType="1"
+                      :ratio="ratio" 
+                      :uniqueName="attributeJson.uniqueName" 
+                      :envUrl="envUrl" 
+                      :sortId="sortId"
+                      :laySort="sort"
+                      :path="path"
+                      :brand="brand"
+                      :prePosition="positionTotal[carousel.i]"
+                      :recordId="recordId"></hotspot>
+                  </div>
+                </div>
+              </div>
+            
+              <template v-if="carousel.type == 1 && carousel.picList.length!=0">
+                <hotspot 
+                  :ref="`hotspot${sortId}${index}`"
+                  v-on="$listeners" 
+                  v-bind="$attrs" 
+                  :item="carousel" 
+                  :ratio="ratio" 
+                  :componentType="1"
+                  :uniqueName="attributeJson.uniqueName"
+                  :path="path"
+                  :envUrl="envUrl" 
+                  :sortId="sortId"
+                  :brand="brand"
+                  :prePosition="positionTotal[carousel.i]"
+                  :recordId="recordId"></hotspot>
+              </template>
+            </div>
+   
+            </div>
+          </div>
+
+          <!-- 滑动条 -->
+          <div v-if="hasScrollBar" class="swiper-scrollbar-own">
+            <div class="swiper-scrollbar-drag" :style="{width: `${100 / list.length}%`, left: `${(activeIndex > list.length) ? 0 : (100 / list.length * (activeIndex - 1))}%`}"></div>
+          </div>
+
+          <!-- 如果需要分页器 -->
+          <div v-if="hasSwiperPagination" class="swiper-pagination-custom">
+            <span v-for="(item,index) in list" @click="swiperSlide(index)" :key="index" :class="['pagination-custom-bullt', {'bullt-active': slideIndex == index}]"></span>
+          </div>
+
+          <!-- 如果需要导航按钮 -->
+          <template v-if="hasSwiperButton">
+            <div :class="['swiper-button-prev', `swiper-button-prev-${sortId}`]" >
+              <slot name="swiper-button-prev">
+                <div v-if="indicatorType == 2 || indicatorType == 3"><span :style="pageStyle" class="cms2iconfont iconleft"></span></div>
+                <div class="arrow" v-if="indicatorType == 4"><span :style="pageStyle" class="cms2iconfont iconarrow-left"></span></div>
+              </slot>
+            </div>
+            <div :class="['swiper-button-next', `swiper-button-next-${sortId}`]">
+              <slot name="swiper-button-next">
+                <div v-if="indicatorType == 2 || indicatorType == 3"><span :style="pageStyle" class="cms2iconfont iconright"></span></div>
+                <div class="arrow" v-if="indicatorType == 4"><span :style="pageStyle" class="cms2iconfont iconarrow-right"></span></div>
+              </slot>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <!-- 边框 -->
+      <div class="hover-con" v-if="animationHoverObj.type === 2" :style="[hoverStyle, {opacity: (hoverStyleShow? 1 : 0)}]"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import swiperItemJs from "./swiperItem.js";
+export default swiperItemJs;
+</script>
+
+<style lang="scss" scoped>
+@import "swiperItem";
+@import "../animate.scss";
+</style>

package/src/components/cms/tabLayout/index.js

@@ -0,0 +1,2 @@
+import tabLayout from './tabLayout.vue'
+export default tabLayout

package/src/components/cms/tabLayout/navItem/index.js

@@ -0,0 +1,2 @@
+import navItem from './navItem.vue';
+export default navItem;

package/src/components/cms/tabLayout/navItem/navItem.js

@@ -0,0 +1,47 @@
+export default {
+  name: 'navItem',
+  props: {
+    item: {
+      type: Object,
+      default: () => {}
+    },
+    active: {
+      type: Boolean,
+      default: false
+    },
+    navStyle: {
+      type: Object,
+      default: () => {}
+    },
+    spacing:{
+      type:[String,Number],
+      default:0
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  watch: {
+    // item: {
+    //   handler(val) {
+    //     console.log('item', val);
+    //   },
+    //   immediate: true,
+    //   deep: true
+    // }
+  },
+  computed: {
+    backStyle() {
+      let {item, active} = this
+      return {
+        backgroundColor: item.navStyle.type == 1 ? (active ? item.navStyle.activeColor: item.navStyle.backgroundColor) : '',
+        backgroundImage: item.navStyle.type == 2 ? (active ? `url('${item.navStyle.activeBackImage}')` : `url('${item.navStyle.backImage}')`) : ''
+      }
+    }
+  },
+  methods: {
+
+  }
+}

package/src/components/cms/tabLayout/navItem/navItem.scss

@@ -0,0 +1,23 @@
+.nav-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  background-size: cover;
+  overflow: hidden;
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &:hover {
+    color: var(--hoverColor)!important;
+    border-top: var(--hoverBorderTop)!important;
+    border-right: var(--hoverBorderRight)!important;
+    border-bottom: var(--hoverBorderBottom)!important;
+    border-left: var(--hoverBorderLeft)!important;
+  }
+}

package/src/components/cms/tabLayout/navItem/navItem.vue

@@ -0,0 +1,13 @@
+<template>
+  <div
+    class="nav-item"  
+    :style="[navStyle, backStyle]"><span :style="{marginLeft:spacing+'px'}">{{item.title}}</span></div>
+</template>
+<script>
+import navItemJs from './navItem.js';
+export default navItemJs;
+</script>
+
+<style lang="scss" scoped>
+@import 'navItem';
+</style>

package/src/components/cms/tabLayout/tabLayout.js

@@ -0,0 +1,158 @@
+import navItem from './navItem/'
+import singleLayout from '../singleLayout/'
+export default {
+  name: 'tabLayout',
+  components: {
+    navItem,
+    singleLayout
+  },
+  props: {
+    layOutData: {
+      type: Object,
+      default: () => {}
+    },
+    ratio: {
+      type: Number,
+      default: 1
+    },
+    mode: {
+      type: String,
+      default: 'pc'
+    },
+    recordId: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      tabIndex: 0,
+      activeSort: '',
+      tabHeadTitleH: 0
+    }
+  },
+  computed: {
+    hasTab() {
+      return this.layOutData.list.some(item => {
+        return item.title
+      })
+    },
+    list() {
+      return this.layOutData.list
+    },
+    tabHeadInfo() {
+      return this.layOutData.tabHeadInfo
+    },
+    navStyle() {
+      let {
+        tabHeadInfo: { width, height, space },
+        borderStyle,
+        fontStyle: {
+          fontSize,
+          color,
+          fontWeight,
+          textDecoration,
+          fontItalic,
+          hoverObj: { color: _color }
+        }
+      } = this.layOutData
+      let { borderTop, borderRight, borderBottom, borderLeft, borderColor, hoverObj } = borderStyle
+      return function(index) {
+        return {
+          marginLeft: index == 0 && `${(this.mode=='pc' ? 30 : 60) * this.ratio}px`,
+          width: width * this.ratio + 'px',
+          height: height * this.ratio + 'px',
+          color: color,
+          fontSize,
+          fontWeight: fontWeight ? 'bold' : '',
+          textDecoration: textDecoration ? 'underline' : '',
+          fontStyle: fontItalic ? 'italic' : '',
+          marginRight: (index == this.list.length -1) ? `${(this.mode=='pc' ? 30 : 60) * this.ratio}px` : space * this.ratio + 'px',
+          borderTop: borderStyle.type === 2 && borderTop ? `1px solid ${borderTop}` : borderStyle.type === 1 && borderColor ? `1px solid ${borderColor}` : 'none',
+          borderRight: borderStyle.type === 2 && borderRight ? `1px solid ${borderRight}` : borderStyle.type === 1 && borderColor ? `1px solid ${borderColor}` : 'none',
+          borderBottom: borderStyle.type === 2 && borderBottom ? `1px solid ${borderBottom}` : borderStyle.type === 1 && borderColor ? `1px solid ${borderColor}` : 'none',
+          borderLeft: borderStyle.type === 2 && borderLeft ? `1px solid ${borderLeft}` : borderStyle.type === 1 && borderColor ? `1px solid ${borderColor}` : 'none',
+          '--hoverColor': _color,
+          '--hoverBorderTop': hoverObj.type === 2 && hoverObj.borderTop ? `1px solid ${hoverObj.borderTop}` : hoverObj.type === 1 && hoverObj.borderColor ? `1px solid ${hoverObj.borderColor}` : 'none',
+          '--hoverBorderRight':
+            hoverObj.type === 2 && hoverObj.borderRight ? `1px solid ${hoverObj.borderRight}` : hoverObj.type === 1 && hoverObj.borderColor ? `1px solid ${hoverObj.borderColor}` : 'none',
+          '--hoverBorderBottom':
+            hoverObj.type === 2 && hoverObj.borderBottom ? `1px solid ${hoverObj.borderBottom}` : hoverObj.type === 1 && hoverObj.borderColor ? `1px solid ${hoverObj.borderColor}` : 'none',
+          '--hoverBorderLeft':
+            hoverObj.type === 2 && hoverObj.borderLeft ? `1px solid ${hoverObj.borderLeft}` : hoverObj.type === 1 && hoverObj.borderColor ? `1px solid ${hoverObj.borderColor}` : 'none'
+        }
+      }
+      
+    },
+    titleStyle() {
+      let {
+        tabHeadInfo: {
+          titleStyle: { fontSize, color, fontWeight, textDecoration, fontItalic }
+        }
+      } = this.layOutData
+      return {
+        color: color,
+        fontSize,
+        fontWeight: fontWeight ? 'bold' : '',
+        textDecoration: textDecoration ? 'underline' : '',
+        fontStyle: fontItalic ? 'italic' : '',
+        paddingLeft: `${(this.mode == 'pc' ? 30 : 60) * this.ratio}px`,
+        paddingBottom: `${(this.mode == 'pc' ? 40 : 80) * this.ratio}px`
+      }
+    }
+  },
+  watch: {
+    'layOutData.tabHeadInfo': {
+      handler: function() {
+        this.$nextTick(() => {
+          this.tabHeadTitleH = this.layOutData.tabHeadInfo.showTitle == 2 ? (this.$refs['tabHeadTitleDom'] ? this.$refs['tabHeadTitleDom'].clientHeight  : 0) : 0
+          this.setLayoutH()
+        })
+      },
+      immediate: true,
+      deep: true
+    },
+    'list.length': {
+      handler: function() {
+        //当导航变化时, 判断当前选中的选项及选中的索引
+        let ind = this.list.findIndex((item) => {
+          return item.sort == this.activeSort
+        })
+        if (ind > -1) {
+          this.tabIndex = ind
+        } else {
+          this.tabIndex = this.tabIndex > 0 ? this.tabIndex - 1 : 0
+          this.activeSort = this.list[this.tabIndex].sort
+        }
+      },
+      deep: true
+    },
+    hasTab: {
+      handler: function(val) {
+        if (val) {
+          this.activeSort = this.list[0].sort
+          this.tabIndex = 0
+        }
+      }
+    }
+  },
+  methods: {
+    chooseTab(item, index) {
+      this.activeSort = item.sort
+      this.tabIndex = index
+      this.setLayoutH()
+      this.$emit('updateLayOut', { sort: this.layOutData.sort })
+      setTimeout(()=>{
+        this.reportData(this.h)
+      },0)
+    },
+    setLayoutH: function() {
+      this.$set(this.layOutData.layoutStyle, 'height', this.layOutData.list[this.tabIndex].height * 1 + this.layOutData.tabHeadInfo.height * 1 + (this.tabHeadTitleH * 1) / this.ratio)
+    },
+    reportData(h) {
+      this.h = h
+      let ref = this.$refs.tabSingle
+      ref && ref.reportData(this.h)
+    }
+  }
+}

package/src/components/cms/tabLayout/tabLayout.scss

@@ -0,0 +1,26 @@
+.tab-layout{
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  .tab-con {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+  .tab-detail {
+    overflow: hidden;
+    .tab-list {
+      overflow: auto;
+      position: relative;
+      .tab-line {
+        display: flex;
+        align-items: center;
+        width: max-content
+      }
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+}

package/src/components/cms/tabLayout/tabLayout.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="tab-layout">
+    <div v-if="hasTab" class="tab-detail tab-con">
+      <div>
+        <div v-if="tabHeadInfo.showTitle == 2" :style="titleStyle" ref="tabHeadTitleDom">
+          <span>{{ tabHeadInfo.customTitle == 1 ? tabHeadInfo.title : list[tabIndex].title }}</span>
+        </div>
+        <div class="tab-list">
+          <div class="tab-line">
+            <navItem
+              v-for="(item, index) in list"
+              :key="index"
+              @click.native="chooseTab(item, index)"
+              :item="item"
+              :ratio="ratio"
+              :mode="mode"
+              :spacing="layOutData.fontStyle.spacing * ratio"
+              :active="tabIndex == index"
+              :navStyle="navStyle(index)"
+            ></navItem>
+          </div>
+        </div>
+        <div
+          :style="{
+            height: list[tabIndex].height * ratio + 'px'
+          }"
+          class="tab-content"
+        >
+          <singleLayout ref="tabSingle" v-bind="$attrs" v-on="$listeners" :layOutData="list[tabIndex]" :componentList="list[tabIndex].componentList" :ratio="ratio" :recordId="recordId" :mode="mode"></singleLayout>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import tabLayoutJs from './tabLayout.js'
+export default tabLayoutJs
+</script>
+
+<style lang="scss" scoped>
+@import 'tabLayout';
+</style>

package/src/components/cms/textItem/index.js

@@ -0,0 +1,2 @@
+import textItem from './textItem.vue'
+export default textItem