Min5203
4 years ago
13 changed files with 178 additions and 163 deletions
@ -1 +1,3 @@ |
|||||
<template>下载模板</template> |
<template>下载模板</template> |
||||
|
|
||||
|
<style></style> |
||||
@ -0,0 +1,124 @@ |
|||||
|
<template> |
||||
|
<div class="flex flex-1 py-10"> |
||||
|
<el-input v-model="keyword" 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"> |
||||
|
<div> |
||||
|
<span class="text-2xl font-semibold">{{ pluginName }}</span> <span class="ml-5">{{ versionNumber }}</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> |
||||
|
<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> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="pagination mt-15 flex flex-row-reverse"> |
||||
|
<el-config-provider :locale="zhCn"> |
||||
|
<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" |
||||
|
> |
||||
|
</el-pagination> |
||||
|
</el-config-provider> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup="true"> |
||||
|
import { ref } from 'vue'; |
||||
|
import { ElConfigProvider } from 'element-plus'; |
||||
|
import zhCn from 'element-plus/lib/locale/lang/zh-cn'; |
||||
|
|
||||
|
const keyword = 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 handleSizeChange = val => { |
||||
|
console.log(val); |
||||
|
}; |
||||
|
const handleCurrentChange = val => { |
||||
|
console.log(val); |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.el-input { |
||||
|
width: 20%; |
||||
|
margin-right: 2rem; |
||||
|
} |
||||
|
.el-select { |
||||
|
margin-right: 2rem; |
||||
|
width: 20%; |
||||
|
} |
||||
|
.desc { |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.shop-left { |
||||
|
width: 35%; |
||||
|
} |
||||
|
</style> |
||||
@ -1,109 +0,0 @@ |
|||||
<template> |
|
||||
<div class="serch flex flex-1 py-10"> |
|
||||
<el-select |
|
||||
v-model="value" |
|
||||
multiple |
|
||||
filterable |
|
||||
remote |
|
||||
reserve-keyword |
|
||||
placeholder="请输入内容" |
|
||||
:remote-method="remoteMethod" |
|
||||
:loading="loading" |
|
||||
> |
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> |
|
||||
</el-select> |
|
||||
<el-select v-model="value" filterable placeholder="请选择行业"> |
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> |
|
||||
</el-select> |
|
||||
<el-select |
|
||||
v-model="value" |
|
||||
multiple |
|
||||
filterable |
|
||||
remote |
|
||||
reserve-keyword |
|
||||
placeholder="请选择分类" |
|
||||
:remote-method="remoteMethod" |
|
||||
:loading="loading" |
|
||||
> |
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> |
|
||||
</el-select> |
|
||||
<el-button type="primary" size="small" class="serch-btn w-60px h-40px">搜索</el-button> |
|
||||
</div> |
|
||||
<div class="shop-content flex py-5"> |
|
||||
<img src="@/assets/u1.jpg" alt="" class="shop-left w-100 h-90 border-20 p-1 box-border" /> |
|
||||
<div class="shop-right ml-5"> |
|
||||
<div><span class="text-2xl font-semibold">插件名称</span> <span class="ml-5">版本号</span></div> |
|
||||
<p class="h-13 mt-7 desc"> |
|
||||
<span> 描述：</span> In my dual profession as an educator and health care provider, I have worked with numerous children infected |
|
||||
with the virus that causes AIDS. |
|
||||
</p> |
|
||||
<div class="mt-7"> |
|
||||
<el-tag>医疗</el-tag> |
|
||||
<el-tag class="ml-2" type="success">打卡</el-tag> |
|
||||
<el-tag class="ml-2" type="warning">签到</el-tag> |
|
||||
</div> |
|
||||
<p class="mt-7"><span>行业:</span> <span>数字医疗</span> <span class="ml-8">分类:</span> <span>签到</span></p> |
|
||||
<p class="mt-7"><span>更新日期:</span> <span>2021年12月20日</span> <span class="ml-8">作者:</span> <span>传控电子</span></p> |
|
||||
<div class="mt-10"> |
|
||||
<el-button type="primary">下载</el-button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="pagination mt-15 flex flex-row-reverse"> |
|
||||
<!-- <el-pagination |
|
||||
v-model:currentPage="currentPage4" |
|
||||
:page-sizes="[10, 20, 30, 40]" |
|
||||
:page-size="20" |
|
||||
layout="total, sizes, prev, pager, next, jumper" |
|
||||
:total="200" |
|
||||
@size-change="handleSizeChange" |
|
||||
@current-change="handleCurrentChange" |
|
||||
> |
|
||||
</el-pagination> --> |
|
||||
<el-config-provider :locale="locale"> |
|
||||
<el-pagination |
|
||||
@size-change="handleSizeChange" |
|
||||
@current-change="handleCurrentChange" |
|
||||
:current-page="currentPage4" |
|
||||
:page-sizes="[10, 20, 30, 40]" |
|
||||
:page-size="20" |
|
||||
layout="total, sizes, prev, pager, next, jumper" |
|
||||
:total="200" |
|
||||
> |
|
||||
</el-pagination> |
|
||||
</el-config-provider> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
// import { reactive, ref, toRefs } from 'vue'; |
|
||||
// 引入vue方法 |
|
||||
import { ElConfigProvider } from 'element-plus'; |
|
||||
// 中文包 |
|
||||
import zhCn from 'element-plus/lib/locale/lang/zh-cn'; |
|
||||
|
|
||||
export default { |
|
||||
props: { pagReviewLength: Number }, |
|
||||
components: { [ElConfigProvider.name]: ElConfigProvider }, |
|
||||
setup() { |
|
||||
const locale = zhCn; |
|
||||
// const state = reactive({ |
|
||||
// pageSize: 10, |
|
||||
// total: '', |
|
||||
// currentPage1: 1, |
|
||||
// }); |
|
||||
|
|
||||
return { locale }; |
|
||||
}, |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.el-select { |
|
||||
margin-right: 2rem; |
|
||||
width: 20%; |
|
||||
} |
|
||||
.desc { |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue