Min5203
4 years ago
13 changed files with 178 additions and 163 deletions
@ -1 +1,3 @@ |
|||
<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