|
|
|
@ -3,38 +3,15 @@ |
|
|
|
<div class="pageTemplete-wrap"> |
|
|
|
<div class=" flex-common" id=""> |
|
|
|
<h3>模板选择</h3> |
|
|
|
<el-tabs v-model="activeName" @tab-click="handleClick"> |
|
|
|
<el-tab-pane label="混合（AI+查重）" name="1"> |
|
|
|
<div class="templeteImgs"> |
|
|
|
<div class="templeteImgs-item" v-for="item in templeteList" :key="item.tpl_id"> |
|
|
|
<img :src="item.img" alt=""> |
|
|
|
<span class="look">预览</span> |
|
|
|
<img src="@/assets/site/tem-active.svg" class="tem-active" alt=""> |
|
|
|
<p>{{ item.list }}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-tab-pane> |
|
|
|
<el-tab-pane label="仅查重" name="2"> |
|
|
|
<div class="templeteImgs"> |
|
|
|
<div class="templeteImgs-item" v-for="item in templeteList.filter(item1=> {item1.type == 1})" :key="item.tpl_id"> |
|
|
|
<img :src="require(item.img)" alt=""> |
|
|
|
<span class="look">预览</span> |
|
|
|
<img src="@/assets/site/tem-active.svg" class="tem-active" alt=""> |
|
|
|
<p>{{ item.list }}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</el-tab-pane> |
|
|
|
<el-tab-pane label="仅AI写作" name="3"></el-tab-pane> |
|
|
|
<div class="templeteImgs"> |
|
|
|
<div class="templeteImgs-item" v-for="item in templeteList.filter(item1=> {item1.type == 0})" :key="item.tpl_id"> |
|
|
|
<img :src="require(item.img)" alt=""> |
|
|
|
<span class="look">预览</span> |
|
|
|
<img src="@/assets/site/tem-active.svg" class="tem-active" alt=""> |
|
|
|
<p>{{ item.list }}</p> |
|
|
|
</div> |
|
|
|
<div class="templeteImgs flex"> |
|
|
|
<div class="templeteImgs-item column" v-for="item in templeteList" :key="item.tpl_id" @click="chooseTemplate(item)"> |
|
|
|
<img :src="item.picture" alt="" class="tem_img"> |
|
|
|
<span class="look">预览</span> |
|
|
|
<!-- v-if="tpl_id== item.tpl_id" --> |
|
|
|
<img src="@/assets/site/tem-active.svg" class="tem-active" v-if="tpl_id== item.tpl_id" alt=""> |
|
|
|
<p>{{ item.name }}</p> |
|
|
|
</div> |
|
|
|
</el-tabs> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -52,61 +29,42 @@ export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
activeName: '1', |
|
|
|
tpl_id:'', |
|
|
|
addImgList: { |
|
|
|
'万方': require('@/assets/register/wanfang.png'), |
|
|
|
'维普': require('@/assets/register/weipu.svg'), |
|
|
|
'学术不端': require('@/assets/register/xueshubuduan.svg'), |
|
|
|
}, |
|
|
|
templeteList:[ |
|
|
|
{ |
|
|
|
name:'清新科技蓝', |
|
|
|
type:1, |
|
|
|
tpl_id:'1', |
|
|
|
img:require('@/assets/site/temImg.png') |
|
|
|
}, |
|
|
|
{ |
|
|
|
name:'清新科技蓝1', |
|
|
|
type:0, |
|
|
|
tpl_id:'11', |
|
|
|
img:require('@/assets/site/temImg.png') |
|
|
|
}, |
|
|
|
{ |
|
|
|
name:'清新科技蓝2', |
|
|
|
tpl_id:'12', |
|
|
|
type:0, |
|
|
|
img:require('@/assets/site/temImg.png') |
|
|
|
}, |
|
|
|
{ |
|
|
|
name:'清新科技蓝3', |
|
|
|
tpl_id:'16', |
|
|
|
type:0, |
|
|
|
img:require('@/assets/site/temImg.png') |
|
|
|
}, |
|
|
|
{ |
|
|
|
name:'清新科技蓝4', |
|
|
|
tpl_id:'13', |
|
|
|
type:1, |
|
|
|
img:require('@/assets/site/temImg.png') |
|
|
|
}, |
|
|
|
{ |
|
|
|
name:'清新科技蓝5', |
|
|
|
tpl_id:'14', |
|
|
|
type:1, |
|
|
|
img:require('@/assets/site/temImg.png') |
|
|
|
}, |
|
|
|
{ |
|
|
|
name:'清新科技蓝6', |
|
|
|
type:1, |
|
|
|
tpl_id:'15', |
|
|
|
img:require('@/assets/site/temImg.png') |
|
|
|
}, |
|
|
|
] |
|
|
|
templeteList:[] |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.get_site_tpl_list(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 初始化 |
|
|
|
get_site_tpl_list(){ |
|
|
|
this.$http('POST', '/agentnew/ajax_get_site_tpl_list',{ |
|
|
|
uid:this.$route.query?.uid, |
|
|
|
}, { |
|
|
|
headers: { |
|
|
|
'Auth': this.$token |
|
|
|
} |
|
|
|
}).then(response => { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.templeteList = [...response.data] |
|
|
|
}) |
|
|
|
}).catch(error => { |
|
|
|
console.error(error, 'error') |
|
|
|
}) |
|
|
|
}, |
|
|
|
handleClick() { |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
chooseTemplate(item){ |
|
|
|
this.tpl_id = item.id; |
|
|
|
}, |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -122,4 +80,59 @@ export default { |
|
|
|
border-style: solid; |
|
|
|
border-color: #DFE2E6; |
|
|
|
} |
|
|
|
.templeteImgs{ |
|
|
|
max-width: 100%; |
|
|
|
justify-content: flex-start; |
|
|
|
white-space: nowrap; |
|
|
|
overflow-x: auto; |
|
|
|
gap: 13px; |
|
|
|
.templeteImgs-item { |
|
|
|
position: relative; |
|
|
|
border-radius: 4px; |
|
|
|
|
|
|
|
.tem_img{ |
|
|
|
width: 176px; |
|
|
|
height: 110px; |
|
|
|
border-radius: 8px; |
|
|
|
border: 2px solid #E8E9EA; |
|
|
|
} |
|
|
|
p{ |
|
|
|
display: inline-block; |
|
|
|
width: 100%; |
|
|
|
text-align: center; |
|
|
|
margin-top: 6px; |
|
|
|
letter-spacing: 0.08em; |
|
|
|
color: #626573; |
|
|
|
} |
|
|
|
.tem-active{ |
|
|
|
position: absolute; |
|
|
|
right: 0; |
|
|
|
top: 0; |
|
|
|
width: 30px; |
|
|
|
height: 30px; |
|
|
|
} |
|
|
|
.look{ |
|
|
|
// display: none; |
|
|
|
transition: all .3s; |
|
|
|
position: absolute; |
|
|
|
right: 0; |
|
|
|
bottom: 26px; |
|
|
|
width: 73px; |
|
|
|
height: 30px; |
|
|
|
background: rgba(0, 0, 0, 0.61); |
|
|
|
backdrop-filter: blur(3px); |
|
|
|
line-height: 18px; |
|
|
|
line-height: 30px; |
|
|
|
color: #fff; |
|
|
|
text-align: center; |
|
|
|
border-radius: 0 0 4px 0; |
|
|
|
} |
|
|
|
&:hover{ |
|
|
|
.look{ |
|
|
|
display: block; |
|
|
|
transition: all .3s; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
zq
1 day ago
