update:更新

src/app-register.ts

@@ -125,6 +125,10 @@ import AppLoginMessage from './components/layout-element/login/app-login-message
 import AppLoginThird from './components/layout-element/login/app-login-third/app-login-third.vue';
 import AppLoginCaptcha from './components/layout-element/login/app-login-captcha/app-login-captcha.vue';
 import AppLoginNoteVerify from './components/layout-element/login/app-login-note-verify/app-login-note-verify.vue';
+import AppRawItemImage from './components/layout-element/media/app-rawitem-image/app-rawitem-image.vue';
+import AppRawItemCarousel from './components/layout-element/media/app-rawitem-carousel/app-rawitem-carousel.vue';
+import AppRawItemVideo from './components/layout-element/media/app-rawitem-video/app-rawitem-video.vue';
+
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
 // 全局挂载实体权限服务注册中心
@@ -264,5 +268,8 @@ export const AppComponents = {
         v.component('app-login-third',AppLoginThird);
         v.component('app-login-captcha',AppLoginCaptcha);
         v.component('app-login-note-verify',AppLoginNoteVerify);
+        v.component('app-rawitem-image', AppRawItemImage);
+        v.component('app-rawitem-carousel', AppRawItemCarousel);
+        v.component('app-rawitem-video', AppRawItemVideo);
     },
 };
\ No newline at end of file

src/components/layout-element/media/app-rawitem-carousel/app-rawitem-carousel.vue

+<template>
+    <div class="app-carouse">
+        <Carousel :autoplay="swipeConfig.isAuto" :autoplay-speed="swipeConfig.timeSpan" radius-dot>
+            <CarouselItem v-for="(item, index) in swipeData" :key="index">
+                <div class="carousel-img-item">
+                    <a v-if="item.linkPath" :href="item.linkPath">
+                        <img class="app-carouse-img" v-if="item.imgPath" :src="item.imgPath" @error="imgError" />
+                        <i v-else :class="item.iconClass"></i>
+                    </a>
+                    <img class="app-carouse-img" v-else-if="item.imgPath" :src="item.imgPath" @error="imgError" />
+                    <i v-else :class="item.iconClass.cssClass" :style="handleIconCss(item.iconClass)"></i>
+                </div>
+            </CarouselItem>
+        </Carousel>
+    </div>
+</template>
+<script lang='ts'>
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
+@Component({})
+export default class AppCarousel extends Vue {
+    /**
+     * @description 轮播图数据
+     * @param {*}
+     * @memberof AppCarousel
+     */
+    @Prop() public data?: any;
+
+    /**
+     * @description 轮播图数据
+     * @param {*}
+     * @memberof AppCarousel
+     */
+     @Prop() public rawstyle?: any;
+
+    /**
+     * @description 轮播图图片所有项数据
+     * @memberof AppCarousel
+     */
+
+    public swipeData: any[] = [];
+
+    /**
+     * @description 轮播图配置
+     * @memberof AppCarousel
+     */
+    public swipeConfig: any = {};
+
+    /**
+     * data值变化
+     *
+     * @param {*} newVal
+     * @param {*} oldVal
+     * @memberof AppCarousel
+     */
+    @Watch('data', { immediate: true })
+    public onDataChange(newVal: any, oldVal: any) {
+        if (!Object.is(newVal, oldVal)) {
+            this.swipeData = newVal.swipeData;
+            this.swipeConfig = newVal.swipeConfig;
+        }
+    }
+
+    /**
+     * @description 构建之前
+     * @memberof AppCarousel
+     */
+    created() {
+        this.swipeData = this.data.swipeData;
+        this.swipeConfig = this.data.swipeConfig;
+    }
+
+    /**
+     * 处理图标大小
+     * @memberof AppMobCarousel
+     */
+    public handleIconCss(data: any) {
+        return {
+            width: data.width || 6 + 'px',
+            height: data.height || 6 + 'px',
+        };
+    }
+
+    /**
+     * img src错误
+     *
+     * @param {*} $event
+     * @memberof AppCarousel
+     */
+    imgError($event: any) {
+        let img = $event.srcElement;
+        if (img && !img.imgSign) {
+            if (img && !img.imgSign) {
+                img.src = 'assets/img/404.png';
+                img.imgSign = true;
+                img.imgSign = true;
+            }
+            img.onerror = null;
+        }
+    }
+}
+</script>
+
+<style lang='less'>
+@import './app-rawitem-carousel.less';
+</style>
\ No newline at end of file

src/components/layout-element/media/app-rawitem-image/app-rawitem-image.less

+.app-rawitem-image{
+  margin: auto;
+  height: 100%;
+  >img{
+    width: auto;
+    height: 100%;
+    object-fit: contain;
+    
+  }
+}
\ No newline at end of file

src/components/layout-element/media/app-rawitem-image/app-rawitem-image.vue

+<template>
+    <div class='app-rawitem-image'>
+        <img :style="cssStyle" v-if="imgUrl" :src="imgUrl" />
+        <i :style="cssStyle" v-else :class="imageClass ? imageClass : ''"></i>
+    </div>
+</template>
+<script lang = 'ts'>
+import { Vue, Component, Prop, Watch, Provide } from 'vue-property-decorator';
+@Component({})
+export default class AppRawItemImage extends Vue {
+    
+    /**
+     * 样式
+     *
+     * @type {string}
+     * @memberof AppRawItemImage
+     */
+    @Prop() public cssStyle: any;
+
+    /**
+     * 图片地址
+     *
+     * @type {string}
+     * @memberof AppRawItemImage
+     */
+    @Prop() public imgUrl?:string;
+
+    /**
+     * 图标
+     *
+     * @type {string}
+     * @memberof AppRawItemImage
+     */
+    @Prop() public imageClass?:string;
+    
+}
+</script>
+<style lang = "less">
+@import './app-rawitem-image.less';
+</style>
\ No newline at end of file

src/components/layout-element/media/app-rawitem-video/app-rawitem-video.vue

+<template>
+    <div :id="uuid" class="render-video"></div>
+</template>
+
+<script lang="ts">
+// import Player from 'xgplayer';
+import { Util } from '@/utils';
+import { Component, Vue, Prop } from 'vue-property-decorator';
+@Component({})
+export default class AppVideo extends Vue {
+    /**
+     * 播放器唯一标识
+     */
+    public uuid: string = Util.createUUID();
+
+    /**
+     * 视频播放数据
+     */
+    @Prop() public videoParmas?: any;
+
+    get Params() {
+        return this.videoParmas ? this.videoParmas : {};
+    }
+
+    /**
+     * 生命周期
+     */
+    public mounted() {
+        let defaultHeight = 337.5;
+        let defaultwidth = 600;
+        if (this.$el) {
+            defaultHeight = this.$el.clientHeight;
+            defaultwidth = this.$el.clientWidth;
+        }
+        // let player = new Player({
+        //     id: this.uuid,
+        //     fluid: true,
+        //     height: defaultHeight,
+        //     width: defaultwidth,
+        // });
+        // if (this.videoParmas) {
+        //     player.trl = this.videoParmas.path;
+        // }
+        // if (this.Params) {
+        //     player.volume = this.Params.mute ? 0 : 0.8;
+        //     player.autoplay = this.Params.autoplay ? true : false;
+        //     player.loop = this.Params.replay ? true : false;
+        //     player.controls = this.Params.showcontrols ? true : false
+        // }
+    }
+}
+</script>
+
+<style lang='less'>
+@import "./app-rawitem-video.less";
+</style>