mirror of
https://gitee.com/niucloud-team/niucloud.git
synced 2025-12-12 18:02:47 +00:00
82 lines
2.8 KiB
Vue
82 lines
2.8 KiB
Vue
<template>
|
|
<view class="diy-text" @click="redirect(diyComponent.link)" :style="warpCss">
|
|
|
|
<view v-if="diyComponent.style == 'style-1'" class="p-[20rpx]">
|
|
<view class="" :style="{
|
|
fontSize: diyComponent.fontSize * 2 + 'rpx',
|
|
color: diyComponent.textColor,
|
|
fontWeight: diyComponent.fontWeight,
|
|
textAlign : diyComponent.textAlign
|
|
}">
|
|
{{ diyComponent.text }}
|
|
</view>
|
|
</view>
|
|
<view v-if="diyComponent.style == 'style-2'" class="p-[20rpx] flex items-center">
|
|
<view class="max-w-[200rpx] truncate" :style="{
|
|
fontSize: diyComponent.fontSize * 2 + 'rpx',
|
|
color: diyComponent.textColor,
|
|
fontWeight: diyComponent.fontWeight
|
|
}">
|
|
{{ diyComponent.text }}
|
|
</view>
|
|
<text class="ml-[16rpx] max-w-[300rpx] truncate" :style="{ color: diyComponent.subTitle.color,
|
|
fontSize: diyComponent.subTitle.fontSize * 2 + 'rpx', }">{{ diyComponent.subTitle.text }}</text>
|
|
<view class="ml-auto text-right flex items-center" v-if="diyComponent.more.isShow"
|
|
:style="{ color: diyComponent.more.color }" @click.stop="redirect(diyComponent.more.link)">
|
|
<text class="max-w-[200rpx] truncate text-[24rpx] mr-[8rpx]">{{ diyComponent.more.text }}</text>
|
|
<u-icon name="arrow-right" size="12" :style="{ color: diyComponent.more.color }"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// 标题
|
|
import { ref, computed } from 'vue';
|
|
import { redirect, img } from '@/utils/common';
|
|
import useDiyStore from '@/stores/diy';
|
|
|
|
const props = defineProps(['component', 'index']);
|
|
const diyStore = useDiyStore();
|
|
|
|
const diyComponent = computed(() => {
|
|
if (diyStore.mode == 'decorate') {
|
|
return diyStore.value[props.index];
|
|
} else {
|
|
return props.component;
|
|
}
|
|
})
|
|
|
|
const warpCss = computed(() => {
|
|
var style = '';
|
|
if (diyComponent.value.componentBgColor) style += 'background-color:' + diyComponent.value.componentBgColor + ';';
|
|
if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
|
if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
|
if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
|
if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
|
return style;
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/* 单行超出隐藏 */
|
|
.using-hidden {
|
|
word-break: break-all;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
white-space: break-spaces;
|
|
}
|
|
|
|
/* 多行超出隐藏 */
|
|
.multi-hidden {
|
|
word-break: break-all;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
</style> |