12 changed files with 340 additions and 25 deletions
@ -1 +1 @@ |
|||
VITE_API_URL=http://localhost:4001 |
|||
VITE_API_URL=https://test.tall.wiki |
|||
|
@ -1 +1 @@ |
|||
VITE_API_URL=http://139.196.27.233:29001 |
|||
VITE_API_URL=http://www.tall.wiki |
|||
|
@ -1,3 +1,32 @@ |
|||
<template> |
|||
index.vue |
|||
<el-container> |
|||
<el-header> |
|||
<div class="top"> |
|||
<Navbar /> |
|||
</div> |
|||
</el-header> |
|||
<el-main> |
|||
<router-view></router-view> |
|||
</el-main> |
|||
</el-container> |
|||
</template> |
|||
|
|||
<script> |
|||
// import { ref } from 'vue'; |
|||
// import Navbar from '../components/navbar.vue'; |
|||
|
|||
// const activeIndex = ref('1'); |
|||
|
|||
export default {}; |
|||
</script> |
|||
<style> |
|||
.el-main { |
|||
padding: 5rem 12rem; |
|||
/* background-color: #ff6700; */ |
|||
overflow: hidden; |
|||
} |
|||
.top { |
|||
padding: 5rem 10rem; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
@ -0,0 +1 @@ |
|||
<template>开发教程</template> |
@ -0,0 +1 @@ |
|||
<template>下载模板</template> |
@ -0,0 +1,109 @@ |
|||
<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> |
@ -0,0 +1,133 @@ |
|||
<template> |
|||
<div class="box"> |
|||
<h1 class="text-xl mt-10 font-semibold">上传插件</h1> |
|||
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px" class="forms"> |
|||
<div class="flex"> |
|||
<el-form-item class="font-semibold flex-1" prop="name"> |
|||
<template v-slot:label> |
|||
<el-tooltip class="box-item" effect="dark" content="输入帮助" placement="top-end"> |
|||
<div>插件名称 ①:</div> |
|||
</el-tooltip> |
|||
</template> |
|||
<el-input v-model="form.name" placeholder="输入插件名称"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="版本:" class="font-semibold flex-1" prop="edition"> |
|||
<el-input v-model="form.edition" placeholder="请输入"></el-input> |
|||
</el-form-item> |
|||
</div> |
|||
<el-form-item label="描述(可选):" class="font-semibold" prop="desc"> |
|||
<el-input v-model="form.desc" type="textarea" placeholder="请输入备注"></el-input> |
|||
</el-form-item> |
|||
<div class="flex"> |
|||
<el-form-item label="行业:" class="font-semibold flex-1" prop="region"> |
|||
<el-select v-model="form.region" placeholder="请选择"> |
|||
<el-option value="Zone one"></el-option> |
|||
<el-option value="Zone two"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="分类:" class="font-semibold flex-1" prop="sort"> |
|||
<el-select v-model="form.sort" multiple placeholder="请选择,可多选"> |
|||
<el-option value="Zone one"></el-option> |
|||
<el-option value="Zone two"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</div> |
|||
<el-form-item label="标签:" class="font-semibold tags" prop="tags"> |
|||
<el-select v-model="form.tags" multiple filterable allow-create default-first-option placeholder="请选择标签"> |
|||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="HTML:" class="font-semibold" prop="htmlcodes"> |
|||
<el-input v-model="form.htmlcodes" type="textarea" placeholder="请输入HTML代码片段"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="JS:" class="font-semibold" prop="jscodes"> |
|||
<el-input v-model="form.jscodes" type="textarea" placeholder="请输入JS代码片段"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="CSS:" class="font-semibold" prop="csscodes"> |
|||
<el-input v-model="form.csscodes" type="textarea" placeholder="请输入CSS代码片段"></el-input> |
|||
</el-form-item> |
|||
<el-form-item> <el-switch v-model="form.delivery" class="mr-3"></el-switch> 是否压缩代码 </el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="onSubmit()">发布</el-button> |
|||
<el-button @click="resetForm()">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, reactive } from 'vue'; |
|||
|
|||
const formRef = ref(null); |
|||
|
|||
const form = reactive({ |
|||
name: '', |
|||
edition: '', |
|||
desc: '', |
|||
region: '', |
|||
sort: '', |
|||
tags: '', |
|||
htmlcodes: '', |
|||
jscodes: '', |
|||
csscodes: '', |
|||
delivery: '', |
|||
}); |
|||
|
|||
const rules = { |
|||
name: [{ required: true, message: '请输入插件名称', trigger: 'blur' }], |
|||
edition: [{ required: true, message: '请输入版本号', trigger: 'blur' }], |
|||
region: [{ required: true, message: '请选择行业', trigger: 'blur' }], |
|||
sort: [{ required: true, message: '请选择分类', trigger: 'blur' }], |
|||
tags: [{ required: true, message: '请选择标签', trigger: 'blur' }], |
|||
htmlcodes: [{ required: true, message: '请输入HTML代码', trigger: 'blur' }], |
|||
jscodes: [{ required: true, message: '请输入JS代码', trigger: 'blur' }], |
|||
}; |
|||
|
|||
const onSubmit = () => { |
|||
console.log('onSubmit'); |
|||
}; |
|||
const resetForm = () => { |
|||
formRef.value.resetFields(); |
|||
}; |
|||
|
|||
const options = [ |
|||
{ |
|||
value: 'HTML', |
|||
label: 'HTML', |
|||
}, |
|||
{ |
|||
value: 'CSS', |
|||
label: 'CSS', |
|||
}, |
|||
{ |
|||
value: 'JavaScript', |
|||
label: 'JavaScript', |
|||
}, |
|||
]; |
|||
</script> |
|||
|
|||
<style> |
|||
.box { |
|||
padding-left: 5%; |
|||
} |
|||
.el-form-item { |
|||
margin-top: 1rem; |
|||
} |
|||
.tags { |
|||
width: 100%; |
|||
} |
|||
.el-select { |
|||
width: 100%; |
|||
} |
|||
.el-form-item__label { |
|||
display: flex; |
|||
justify-content: end; |
|||
flex: 0 0 auto; |
|||
text-align: right; |
|||
font-size: var(--el-form-label-font-size); |
|||
color: var(--el-text-color-regular); |
|||
line-height: 40px; |
|||
padding: 0 12px 0 0; |
|||
box-sizing: border-box; |
|||
} |
|||
</style> |
Loading…
Reference in new issue