baiqiu-cms-decoration-dg 0.1.0 → 0.1.5

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

@@ -1,204 +0,0 @@
-.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

@@ -1,123 +0,0 @@
-<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

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

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

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

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

@@ -1,47 +0,0 @@
-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

@@ -1,23 +0,0 @@
-.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

@@ -1,13 +0,0 @@
-<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

@@ -1,158 +0,0 @@
-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

@@ -1,26 +0,0 @@
-.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

@@ -1,43 +0,0 @@
-<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

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