|
After Width: | Height: | Size: 626 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 36 KiB |
@ -1,23 +1,192 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="portal-L">
|
<div class="portal-L">
|
||||||
|
<div class="portal_content">
|
||||||
|
<div class="portal_content_top">
|
||||||
|
<el-tabs v-model="tabPosition">
|
||||||
|
<el-tab-pane label="药品" name="drugArchives"></el-tab-pane>
|
||||||
|
<el-tab-pane label="医疗器械" name="health"></el-tab-pane>
|
||||||
|
<el-tab-pane label="化妆品" name="cosmeticsArchives"></el-tab-pane>
|
||||||
|
<el-tab-pane label="传统中药制剂" name="zyzj"></el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
<div class="portal_input">
|
||||||
|
<el-input placeholder="请输入产品名称、备案编号/注册证号" v-model="inputvalue" class="input-with-select">
|
||||||
|
<el-button slot="append" icon="el-icon-search" @click="goyemian"></el-button>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div class="portal_box">
|
||||||
|
<div class="portal_box_item" v-for="(item, index) in data "
|
||||||
|
:style="'background: url(' + item.bg + ');backgroundSize:100% 100%;backgroundPosition: center center; backgroundRepeat: no - repeat'"
|
||||||
|
@click="pushRouter(item.name)">
|
||||||
|
<img :src="item.image" alt="">
|
||||||
|
<span>{{ item.value }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
tabPosition: "drugArchives",
|
||||||
|
inputvalue: "",
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: "药品档案",
|
||||||
|
image: require('@/assets/images/home/dangan1.png'),
|
||||||
|
bg: require('@/assets/images/home/danganbg1.png'),
|
||||||
|
name: "drugArchives"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "医疗器械档案"
|
||||||
|
,
|
||||||
|
image: require('@/assets/images/home/dangan2.png'),
|
||||||
|
bg: require('@/assets/images/home/danganbg2.png'),
|
||||||
|
name: "health"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "化妆品档案"
|
||||||
|
,
|
||||||
|
image: require('@/assets/images/home/dangan3.png'),
|
||||||
|
bg: require('@/assets/images/home/danganbg3.png'),
|
||||||
|
name: "cosmeticsArchives"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "传统中药制剂档案"
|
||||||
|
,
|
||||||
|
image: require('@/assets/images/home/dangan4.png'),
|
||||||
|
bg: require('@/assets/images/home/danganbg4.png'),
|
||||||
|
name: "zyzj"
|
||||||
|
},
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods:{
|
methods: {
|
||||||
pushRouter(){
|
pushRouter(name) {
|
||||||
this.$router.push('/drugArchives')
|
this.$router.push({ name: name })
|
||||||
|
},
|
||||||
|
goyemian() {
|
||||||
|
console.log(this.tabPosition);
|
||||||
|
if (this.inputvalue) {
|
||||||
|
this.$router.push({ name: this.tabPosition, query: { value: this.inputvalue } })
|
||||||
|
} else {
|
||||||
|
this.$message({
|
||||||
|
message: '请输入搜索内容',
|
||||||
|
type: 'warning'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.portal-L {
|
.portal-L {
|
||||||
|
width: 100vw;
|
||||||
|
height: 92.7vh;
|
||||||
|
background-image: url('../../assets/images/home/bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.portal_content {
|
||||||
|
height: 80vh;
|
||||||
|
width: 60vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//搜索
|
||||||
|
::v-deep .portal_input {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.el-input-group--append .el-input__inner {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding-right: 65px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input-group__append {
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
top: 5px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: linear-gradient(-90deg, #057DFF 0%, #31ACFE 100%);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
button.el-button {
|
||||||
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.el-icon-search {
|
||||||
|
align-items: center;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 四个方块
|
||||||
|
.portal_box {
|
||||||
|
width: 100%;
|
||||||
|
height: 60vh;
|
||||||
|
padding: 40px 0;
|
||||||
|
background-image: url('../../assets/images/home/danganbg.png');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.portal_box_item {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 400px;
|
||||||
|
height: 150px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #39404D;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// tab
|
||||||
|
::v-deep .el-tabs__item {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tabs__nav-wrap::after {
|
||||||
|
display: none;
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||