123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104 |
- <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>
|