|
|
|
@ -1,34 +1,27 @@ |
|
|
|
<template> |
|
|
|
<div class="flex flex-1 py-10"> |
|
|
|
<el-input v-model="keywords" placeholder="请输入内容" /> |
|
|
|
<el-select v-model="industry" filterable placeholder="请选择行业"> |
|
|
|
<el-option v-for="item in industryList" :key="item.value" :label="item.label" :value="item.value"> </el-option> |
|
|
|
</el-select> |
|
|
|
<el-select v-model="sort" filterable placeholder="请选择分类"> |
|
|
|
<el-option v-for="item in sortList" :key="item.value" :label="item.label" :value="item.value"> </el-option> |
|
|
|
</el-select> |
|
|
|
<el-button type="primary" size="small" class="w-60px h-40px">搜索</el-button> |
|
|
|
</div> |
|
|
|
<div class="shop-content flex py-5"> |
|
|
|
<img src="@/assets/u1.jpg" alt="" class="shop-left h-90 border-20 p-1 box-border" /> |
|
|
|
<div class="shop-right ml-6"> |
|
|
|
<searchBar /> |
|
|
|
<div class="shop-content flex py-5" v-for="list in data.lists" :key="list.id"> |
|
|
|
<img :src="list.preview" alt="" class="shop-left" /> |
|
|
|
<div class="shop-right ml-8"> |
|
|
|
<div> |
|
|
|
<span class="text-2xl font-semibold">{{ pluginName }}</span> <span class="ml-5">{{ versionNumber }}</span> |
|
|
|
<span class="text-xl font-semibold">{{ list.name }}</span> <span class="ml-5 text-sm">{{ list.versions }}</span> |
|
|
|
</div> |
|
|
|
<div class="mt-4 desc text-sm"> |
|
|
|
<span> 描述：</span> <span>{{ list.intro }}</span> |
|
|
|
</div> |
|
|
|
<div class="mt-5 text-sm"> |
|
|
|
<el-tag v-for="item in list.tags" :type="item.btnType" class="mr-3" :key="item.name">{{ item.name }}</el-tag> |
|
|
|
</div> |
|
|
|
<div class="mt-5 text-sm"> |
|
|
|
<span>行业:</span> <span>{{ list.industryName }}</span> <span class="ml-8">分类:</span> <span>{{ list.sortName }}</span> |
|
|
|
</div> |
|
|
|
<p class="h-13 mt-7 desc"> |
|
|
|
<span> 描述：</span> <span>{{ describe }}</span> |
|
|
|
</p> |
|
|
|
<div class="mt-7"> |
|
|
|
<el-tag v-for="item in tags" :type="item.btnType" class="mr-3" :key="item.name">{{ item.name }}</el-tag> |
|
|
|
<div class="mt-4 text-sm"> |
|
|
|
<span>更新日期:</span> <span>{{ list.updateTime }}</span> <span class="ml-8">作者:</span> <span>{{ list.authorName }}</span> |
|
|
|
</div> |
|
|
|
<p class="mt-7"> |
|
|
|
<span>行业:</span> <span>{{ industryName }}</span> <span class="ml-8">分类:</span> <span>{{ sortName }}</span> |
|
|
|
</p> |
|
|
|
<p class="mt-7"> |
|
|
|
<span>更新日期:</span> <span>{{ update }}</span> <span class="ml-8">作者:</span> <span>{{ owner }}</span> |
|
|
|
</p> |
|
|
|
<div class="mt-10"> |
|
|
|
<el-button type="primary">下载</el-button> |
|
|
|
<div class="mt-6"> |
|
|
|
<el-button type="primary">下载源代码</el-button> |
|
|
|
<el-button type="primary">下载示例代码</el-button> |
|
|
|
<el-button type="primary">添加到业务</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -37,10 +30,11 @@ |
|
|
|
<el-pagination |
|
|
|
@size-change="handleSizeChange" |
|
|
|
@current-change="handleCurrentChange" |
|
|
|
:page-sizes="[10, 20, 30, 40]" |
|
|
|
:page-size="20" |
|
|
|
layout="total, sizes, prev, pager, next, jumper" |
|
|
|
:total="200" |
|
|
|
:current-page.sync="data.currentPage" |
|
|
|
:page-size="data.pageSize" |
|
|
|
layout="prev, pager, next, sizes, jumper" |
|
|
|
:total="data.total" |
|
|
|
:page-sizes="[10, 20, 30, 40, 50]" |
|
|
|
> |
|
|
|
</el-pagination> |
|
|
|
</el-config-provider> |
|
|
|
@ -48,62 +42,61 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script lang="ts" setup="true"> |
|
|
|
import { ref } from 'vue'; |
|
|
|
import { reactive } from 'vue'; |
|
|
|
import { ElConfigProvider } from 'element-plus'; |
|
|
|
import zhCn from 'element-plus/lib/locale/lang/zh-cn'; |
|
|
|
|
|
|
|
const keywords = ref(''); |
|
|
|
const industry = ref(''); |
|
|
|
const sort = ref(''); |
|
|
|
const pluginName = ref('插件名称'); |
|
|
|
const versionNumber = ref('版本号'); |
|
|
|
const industryName = ref('数字医疗'); |
|
|
|
const sortName = ref('签到'); |
|
|
|
const update = ref('2021年12月20日'); |
|
|
|
const owner = ref('传控电子'); |
|
|
|
const describe = ref( |
|
|
|
'In my dual profession as an educator and health care , I have worked with numerous children infected with the virus that causes AIDS.', |
|
|
|
); |
|
|
|
const tags = ref([ |
|
|
|
{ btnType: '', name: '医疗' }, |
|
|
|
{ btnType: 'success', name: '打卡' }, |
|
|
|
{ btnType: 'warning', name: '签到' }, |
|
|
|
]); |
|
|
|
const industryList = [ |
|
|
|
{ |
|
|
|
value: '行业一', |
|
|
|
label: '行业一', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '行业二', |
|
|
|
label: '行业二', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '行业三', |
|
|
|
label: '行业三', |
|
|
|
}, |
|
|
|
]; |
|
|
|
const sortList = [ |
|
|
|
{ |
|
|
|
value: '分类一', |
|
|
|
label: '分类一', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '分类二', |
|
|
|
label: '分类二', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '分类三', |
|
|
|
label: '分类三', |
|
|
|
}, |
|
|
|
]; |
|
|
|
const data = reactive({ |
|
|
|
lists: [ |
|
|
|
{ |
|
|
|
id: '1', |
|
|
|
name: '插件名称', |
|
|
|
versions: 'V1.0.0', |
|
|
|
intro: 'In my dual profession as an educator and health care', |
|
|
|
updateTime: '2021年12月20日', |
|
|
|
authorName: '张三', |
|
|
|
preview: 'https://s4.ax1x.com/2022/01/17/7abX3d.png', |
|
|
|
mine: true, |
|
|
|
tags: [ |
|
|
|
{ btnType: 'primary', name: '医疗' }, |
|
|
|
{ btnType: 'success', name: '打卡' }, |
|
|
|
{ btnType: 'warning', name: '签到' }, |
|
|
|
], |
|
|
|
industryName: '数字医疗', |
|
|
|
sortName: '医疗', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '2', |
|
|
|
name: '插件名称', |
|
|
|
versions: 'V1.0.0', |
|
|
|
intro: 'In my dual profession as an educator and health care', |
|
|
|
updateTime: '2021年12月20日', |
|
|
|
authorName: '张三', |
|
|
|
preview: 'https://s4.ax1x.com/2022/01/17/7abX3d.png', |
|
|
|
mine: true, |
|
|
|
tags: [ |
|
|
|
{ btnType: 'primary', name: '医疗' }, |
|
|
|
{ btnType: 'success', name: '打卡' }, |
|
|
|
{ btnType: 'warning', name: '签到' }, |
|
|
|
], |
|
|
|
industryName: '数字医疗', |
|
|
|
sortName: '医疗', |
|
|
|
}, |
|
|
|
], |
|
|
|
currentPage: 1, |
|
|
|
pageSize: 10, |
|
|
|
total: 55, |
|
|
|
}); |
|
|
|
|
|
|
|
const handleSizeChange = val => { |
|
|
|
function handleSizeChange(val) { |
|
|
|
console.log(val); |
|
|
|
}; |
|
|
|
const handleCurrentChange = val => { |
|
|
|
data.pageSize = val; |
|
|
|
} |
|
|
|
|
|
|
|
function handleCurrentChange(val) { |
|
|
|
console.log(val); |
|
|
|
}; |
|
|
|
data.currentPage = val; |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
@ -116,9 +109,47 @@ const handleCurrentChange = val => { |
|
|
|
width: 20%; |
|
|
|
} |
|
|
|
.desc { |
|
|
|
height: 30px; |
|
|
|
line-height: 15px; |
|
|
|
text-overflow: -o-ellipsis-lastline; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-line-clamp: 2; |
|
|
|
line-clamp: 2; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
} |
|
|
|
.shop-left { |
|
|
|
width: 35%; |
|
|
|
width: 288px; |
|
|
|
height: 263px; |
|
|
|
} |
|
|
|
|
|
|
|
.pagination >>> .el-pager li, |
|
|
|
.pagination >>> .btn-prev, |
|
|
|
.pagination >>> .btn-next { |
|
|
|
border: 1px solid #ccc; |
|
|
|
width: 2rem; |
|
|
|
height: 2rem; |
|
|
|
line-height: 2rem; |
|
|
|
text-align: center; |
|
|
|
padding: 0; |
|
|
|
margin: 0 8px; |
|
|
|
border-radius: 6px; |
|
|
|
font-weight: normal; |
|
|
|
} |
|
|
|
.pagination >>> .el-pager li.active { |
|
|
|
border: 1px solid #409eff; |
|
|
|
color: #fff; |
|
|
|
background: #409eff; |
|
|
|
} |
|
|
|
.pagination >>> .el-input__inner { |
|
|
|
height: 2rem; |
|
|
|
line-height: 2rem; |
|
|
|
border: 1px solid #ccc; |
|
|
|
border-radius: 6px !important; |
|
|
|
} |
|
|
|
|
|
|
|
.pagination >>> .el-pagination__jump { |
|
|
|
margin-left: 0; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
