udxcms 1.0.1

package/dist/components/businessComponents/NoticePanel.vue

@@ -0,0 +1,239 @@
+<!--
+ * @Author:
+ * @Date: 2020-12-30 17:16:37
+ * @LastEditTime: 2021-08-19 17:25:56
+ * @LastEditors: Lewis
+ * @Description: notice panel
+-->
+<template>
+    <div class='notice-panel'>
+        <div class='notice-head'>
+            <div class='notice-title'>
+                <span class='num notice-act-color'>{{unreadCount || 0}}</span>
+                 {{$t('notification_notifications_pending')}}
+            </div>
+            <div class='notice-viewall'>
+                <span class='notice-act-color fontHover' @click='goNotice'>{{$t('notification_notifications_view_all')}}</span>
+                <svg-icon className='notice-arrow' icon-class="arrow-right"></svg-icon>
+            </div>
+        </div>
+        <div class='no-mess' v-if='!list.length'>
+            <img class='no-mess-svg' :src="require('../../assets/img/notice-nodata.svg')" />
+            <div class='no-mess-text'>
+                {{$t('notification_details_no_record_found')}}
+            </div>
+        </div>
+        <div class='notice-mess' v-else>
+            <div class='notice-mess-item' v-for="(item, index) in list" :key='index' @click='setRead(item, index)'>
+                <div :class="['notice-mess-title', {'unread': item.unread}]">
+                    {{item.title}}
+                </div>
+                <div class='notice-mess-content' v-html='item.content'>
+                </div>
+                <div class='notice-mess-time'>
+                    {{item.createTime}}
+                </div>
+            </div>
+        </div>
+        <div class='notice-mess-readAll' @click="readAll('')">
+            <img :src="require('../../assets/img/readAll.svg')" class='readAll'>
+            <img :src="require('../../assets/img/readAlled.svg')" class='readAlled'>
+            <div class='text' >{{$t('notification_details_make_all_read')}}</div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'NoticePanel',
+        props: {
+            list: {
+                type: Array,
+                default: function() {
+                    return []
+                }
+            },
+            unreadCount: {
+                type: Number | String,
+                default: 0
+            }
+        },
+        data() {
+            return {
+                noticeDetail: true
+            }
+        },
+        methods: {
+            // goNotice
+            goNotice() {
+                this.$router.push({
+                    path: '/notice'
+                })
+            },
+            setRead(item, index) {
+                this.$emit('setRead', item)
+            },
+            readAll() {
+                let isReadAll = false
+                this.list.map(v => {
+                    if (v.unread) isReadAll = true
+                })
+                if (isReadAll) this.$emit('readAll')
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .notice-panel {
+        width: 380px;
+        background: #ffffff;
+        border: 1px solid var(--border-color-base);
+        min-height: 250px;
+        border-radius: 6px;
+        box-shadow: 0 4px 12px 0 rgba(17,51,83, 0.02);
+    }
+    .notice-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding:0 20px;
+        height: 60px;
+        line-height: 60px;
+        font-size: 16px;
+        font-family: FontMedium;
+
+        color: var(--text-color);
+        border-bottom: 1px solid #F5F6FA;
+    }
+    .notice-title {
+
+    }
+    .notice-title .num {
+        margin-right: .2em;
+    }
+    .notice-viewall {
+        display: flex;
+        align-items: center;
+        .notice-arrow {
+            width: 16px;
+            height: 16px;
+            margin-left: 4px;
+            color: var(--primary-color);
+        }
+    }
+    .notice-act-color {
+        color: var(--primary-color);
+    }
+
+    .no-mess {
+        text-align: center;
+        padding: 30px 0;
+        .no-mess-svg {
+            width: 100px;
+            height: 100px;
+        }
+        .no-mess-text {
+            font-size: 16px;
+            font-family: Font;
+
+            color: var(--text-color-placeholder);
+            line-height: 16px;
+        }
+    }
+
+    .notice-mess {
+        padding:0 20px;
+        .notice-mess-item {
+            padding: 12px 0;
+            .notice-mess-title {
+                position: relative;
+                height: 16px;
+                line-height: 16px;
+                font-size: 16px;
+                font-family: Font;
+
+                width: 100%;
+                padding-right: 40px;
+                text-align: left;
+                color: var(--text-color);
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+            .notice-mess-title.unread::before{
+                position: absolute;
+                content: '';
+                height: 8px;
+                width: 8px;
+                border-radius: 50%;
+                background: #EA5455;
+                left: -12px;
+                top: 2px;
+            }
+            .notice-mess-content {
+                margin-top: 8px;
+                height: 14px;
+                line-height: 14px;
+                font-size: 14px;
+                font-family: Font;
+
+                color: #708599;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+            .notice-mess-time {
+                margin-top: 12px;
+                font-size: 12px;
+                height: 12px;
+                line-height: 12px;
+                font-family: Font;
+
+                color: #708599;
+            }
+        }
+        .notice-mess-item:hover {
+            .notice-mess-title {
+                color: var(--primary-color);
+            }
+        }
+        .notice-mess-item:not(:last-child) {
+            border-bottom: 1px solid #F5F6FA;
+        }
+    }
+
+    .notice-mess-readAll {
+        border-top: 1px solid #F5F6FA;
+        padding: 20px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        font-size: 16px;
+        font-family: Font;
+
+        color: var(--text-color-placeholder);
+        .readAll {
+            width: 22px;
+            height: 22px;
+            margin-right: 8px;
+        }
+        .readAlled {
+            display: none;
+            width: 22px;
+            height: 22px;
+            margin-right: 8px;
+        }
+
+    }
+    .notice-mess-readAll:hover {
+        color: var(--primary-color);
+        .readAll {
+            display:none;
+        }
+        .readAlled {
+            display: block;
+        }
+    }
+
+</style>

package/dist/components/businessComponents/Partnermedias.vue

@@ -0,0 +1,151 @@
+<template>
+    <div class='partner-media-box'>
+        <div class='partner-box partner-box-left' :style="{animation: leftTransactionWidth / 80 + `s linear 0s infinite alternate none running cbiRyo_${direction}`}">
+            <div class="partner-list" v-for='(item, index) in partnerList' :key='index'>
+                <div class='partner-item' @click='checkDetail(item)'>
+                    <a :href="item ? item.site : ''" target="_blank">
+                        <img class="img1" :src="item ? item.logo : ''" alt=""/>
+                    </a>
+                    <!-- {{item}} -->
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
+    export default {
+        name: 'partern-media',
+        components: {
+            Swiper,
+            SwiperSlide
+        },
+        props: {
+            partnerList: {
+                type: Array,
+                default: () => {
+                    return []
+                }
+            },
+            direction: {
+                type: String,
+                default: 'left'
+            }
+        },
+        watch: {
+            // partnerList() {
+            //     this.setPointer()
+            // }
+        },
+        data() {
+            return {
+                swiperOptions: {
+                    slidesPerView: 5,
+                    // slidesPerView: "auto",
+                    spaceBetween: 0,
+                    // loop: true,
+                    freeMode: true,
+                    autoplay: {
+                        delay: 0,
+                        // disableOnInteraction: false,
+                        // waitForTransition: false
+                    }
+                },
+                // partnerList: [1,2,3,4,5,6,7,8,9,10],
+                leftTransactionWidth: 0
+            }
+        },
+        mounted() {
+            this.setPointer()
+        },
+        methods: {
+            // 查看详情
+            checkDetail() {
+
+            },
+            setPointer() {
+                let width = document.documentElement.clientWidth
+                if (282 * (this.partnerList.length - 1)< width) {
+                    // 不满足一屏幕大小则不开启,至少满足一个item大小
+                    return
+                }
+                let styleObj = document.getElementById('partner_media_' + this.direction)
+                if (styleObj) {
+                    document.head.removeChild(styleObj)
+                }
+                let style = document.createElement('style');
+                style.setAttribute('type', 'text/css')
+                style.setAttribute('id', 'partner_media_' + this.direction)
+                document.head.appendChild(style)
+                let sheet = style.sheet
+                let leftTransactionWidth = (282 * this.partnerList.length - width) * (this.direction == 'left' ? -1 : 1)  // 计算左边偏移量
+                this.leftTransactionWidth = Number(Math.abs(leftTransactionWidth))
+                let initPosition = this.direction == 'right' ? -this.leftTransactionWidth : 0
+                sheet.insertRule(
+                    `@keyframes cbiRyo_${this.direction} {
+                            0% {
+                                transform: translate3d(${initPosition}px, 0px, 0px);
+                            }
+                            50% {
+                                transform: translate3d(${this.direction == 'right' ? 0 : leftTransactionWidth}px, 0px, 0px);
+                            }
+                            100% {
+                                transform: translate3d(${initPosition}px, 0px, 0px);
+                            }
+                        }
+                    `
+                )
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .partner-media-box {
+        .partner-box {
+            display: flex;
+            &.partner-box-left {
+                // animation: 10s linear 0s infinite alternate none running cbiRyo;
+            }
+        }
+        .partner-list {
+            .partner-item  {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                max-width: 250px;
+                min-width: 250px;
+                height: 88px;
+                padding: 0 16px;
+                margin: 0 16px;
+                border-radius: 24px;
+                background: rgb(26, 26, 26);
+                font-size: 20px;
+                a {
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+                img {
+                    max-width: 100%;
+                    height: auto;
+                    max-height: 70px;
+                }
+            }
+        }
+    }
+
+    // @keyframes cbiRyo {
+    //     0% {
+    //         transform: translate3d(0px, 0px, 0px);
+    //     }
+    //     50% {
+    //         transform: translate3d(-1500px, 0px, 0px);
+    //     }
+    //     100% {
+    //         transform: translate3d(0px, 0px, 0px);
+    //     }
+    // }
+</style>