|
|
@@ -1,10 +1,13 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<template v-for="(item, index) in list" :key="index">
|
|
|
- <div class="border-bottom pd-10 c-s-p item-hover" @click="clickItem(item)">
|
|
|
+ <div class="border-bottom pd-10 c-s-p item-hover" :class="{ 'checked': selectTplId === item.id }" @click="clickItem(item)">
|
|
|
<div v-if="+item.homeFlag" class="f-s-14 f-w-6 c-333 mb-10">门户页面</div>
|
|
|
<div class="d-flex">
|
|
|
- <div class="w-140 h-180 bg-#ccc bg-img-item_view" :style="{ backgroundImage: 'url('+ item?.img +')' }"></div>
|
|
|
+ <div class="w-140 h-180 bg-#ccc bg-img-item_view p-rtv" :style="{ backgroundImage: 'url('+ item?.img +')' }">
|
|
|
+ <img v-if="+item?.homeFlag" class="has_page_index_icon" src="@/assets/images/has_page_index_icon.png" />
|
|
|
+ <img @click.stop="clickSetIndex(item)" v-else class="set_index_icon" src="@/assets/images/set_index_icon.png" />
|
|
|
+ </div>
|
|
|
<div class="flex1 ov-hd d-flex flex-cln j-sb">
|
|
|
<div class="pd-10">
|
|
|
<el-icon v-if="item?.events?.some(item => item.eventName)"><Sunny /></el-icon>
|
|
|
@@ -14,8 +17,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div @click.stop="changeLabel(item)" class="c-666 f-s-14 pd2-10-0 u-s-n c-s-p d-flex a-c">
|
|
|
- <span class="c-666 f-s-14 mr-6">{{ item?.label }}</span>
|
|
|
+ <div @click.stop="changeLabel(item)" class="c-666 f-s-14 pd2-10-0 u-s-n c-s-p d-flex a-c c-666 f-s-14 btm-text">
|
|
|
+ <span class="mr-6">{{ item?.label }}</span>
|
|
|
<el-icon><EditPen /></el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -34,7 +37,9 @@ const emit = defineEmits<{
|
|
|
(e: 'selectItem', value: any): void,
|
|
|
(e: 'addMeetingTpls'): void,
|
|
|
(e: 'delete', value: any): void,
|
|
|
- (e: 'changeLabel', value: any): void
|
|
|
+ (e: 'changeLabel', value: any): void,
|
|
|
+ // 设置首页
|
|
|
+ (e: 'setIndex', value: any): void,
|
|
|
}>();
|
|
|
const props = defineProps<{
|
|
|
meetid: string,
|
|
|
@@ -47,13 +52,21 @@ const queryParams = ref<any>({
|
|
|
const addMeetingTpls = async () => {
|
|
|
emit('addMeetingTpls');
|
|
|
};
|
|
|
+const selectTplId = ref<string>('');
|
|
|
const clickItem = (item: any) => {
|
|
|
+ selectTplId.value = item.id;
|
|
|
emit('selectItem', item);
|
|
|
};
|
|
|
// 更换页面名称
|
|
|
const changeLabel = async (item: any) => {
|
|
|
emit('changeLabel', item);
|
|
|
};
|
|
|
+const clickSetIndex = async (item: any) => {
|
|
|
+ if (+item.homeFlag) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ emit('setIndex', item)
|
|
|
+};
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
.item-hover:hover {
|
|
|
@@ -62,5 +75,38 @@ const changeLabel = async (item: any) => {
|
|
|
.bg-img-item_view {
|
|
|
background-size: cover;
|
|
|
background-position: center;
|
|
|
+ border: 1px solid transparent;
|
|
|
+}
|
|
|
+.item-hover {
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ .bg-img-item_view {
|
|
|
+ border-color: var(--el-color-primary);
|
|
|
+ }
|
|
|
+ .btm-text {
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.checked {
|
|
|
+ .bg-img-item_view {
|
|
|
+ border-color: var(--el-color-primary);
|
|
|
+ }
|
|
|
+ .btm-text {
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.has_page_index_icon {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+}
|
|
|
+.set_index_icon {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10px;
|
|
|
+ right: 10px;
|
|
|
}
|
|
|
</style>
|