hlm_pl_mall_h5/pages/home/special/editable_page_model/Model13.vue

<template>
<view class="model-13">
	<view class="notice-box notice-box-1" :style="{backgroundColor:editablePageConfig.editable_page_config_content.back_color}">
		<view class="notice-con">
		  <view class="notice-con-icon">
			<image mode="aspectFit" class="img" :src="notice_image">
		  </view>
		  <view class="notice-con-split">
		  </view>
		  <view class="notice-slid" :style="{top}">
			<view class="notice-con-font" @click="goAdUrl(v.link)" v-for="(v,index) in editablePageConfig.editable_page_config_content.notice_title" :key="index">{{v.text}}</view>
		  </view>
		</view>
	  </view>
</view>
</template>

<script>
import { env } from '../../../../static/config'
export default {
  name: 'Model13',
  data () {
    return {
      activeIndex: 0
    }
  },
  props: ['editablePageConfig','editablePage'],
  computed: {
    top () {
      return -this.activeIndex * 39 + 'px'
    },
	notice_image(){
		if(this.editablePageConfig.editable_page_config_content['notice_image']){
			return this.editablePageConfig.editable_page_config_content['notice_image']
		}else{
			return env.SITE_URL+'/static/home/images/editable_page/ds-notice.png'
		}
	}
  },
  beforeDestroy: function () {
    clearInterval(this.time_interval)
  },
  mounted () {
    let _this = this
    this.time_interval = setInterval(function () {
      if (_this.activeIndex < _this.editablePageConfig.editable_page_config_content.notice_title.length-1) {
        _this.activeIndex += 1
      } else {
        _this.activeIndex = 0
      }
    }, 2000)
  },
  methods: {
    goAdUrl (url) {
      uni.navigateTo({url:url})
    }
  }
}
</script>

<style lang="scss" scoped>
.model-13 .notice-box-1 {
	padding: 10px;
	border-radius:5px;
}
.model-13 .notice-box-1 .notice-con {
	display: flex;
	align-items: center;
	height: 39px;
	line-height: 39px;
	overflow: hidden;
}
.model-13 .notice-box-1 .notice-con-icon {
	flex-shrink: 0;
	height: 12px;
	text-align: center;
	line-height: 18px;
	width: 3.5rem;
}
.model-13 .notice-box-1 .notice-con-icon .img {
	height: 12px;
	vertical-align: top;
}
.model-13 .notice-box-1 .notice-con-split {
	width: 1px;
	height: 13px;
	background-color: #E4E4E4;
	margin: 0 11px;
}
.model-13 .notice-box-1 .notice-slid{
	position: relative;
	transition: top .5s;
	flex: 1;
	align-self: flex-start;
}
.model-13 .notice-box-1 .notice-con-font {
	font-size: 14px;
	color: #333;
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
</style>