|
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>
|
||||
<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>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
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:{
|
||||
pushRouter(){
|
||||
this.$router.push('/drugArchives')
|
||||
methods: {
|
||||
pushRouter(name) {
|
||||
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>
|
||||
<style lang="scss" scoped>
|
||||
.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>
|
||||
|
||||