<template>
|
<view>
|
<view class="NavTop flex">
|
<view class=""><img src="../../static/中医人物知识库0201/三条杠.png" alt="" /></view>
|
<view class="">中医医事制度</view>
|
<view class="NavTopr">
|
<img src="../../static/中医人物知识库0201/三条杠.png" alt="" />
|
<img src="../../static/中医人物知识库0201/三条杠.png" alt="" />
|
<img src="../../static/中医人物知识库0201/三条杠.png" alt="" />
|
</view>
|
</view>
|
<view class="mImage">
|
<img src="https://img0.baidu.com/it/u=3838093562,4126749835&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710522000&t=a986064700deada5ec74d05e02abd8b5"
|
alt="" />
|
</view>
|
<view class="flex flex-center" style="flex-direction: column;">
|
<view class="search">
|
<next-search-more :selectValue="selectValue">
|
</next-search-more>
|
</view>
|
<view class="flex">
|
热门搜索：
|
<ul class="flex" style="margin-right: 10rpx;">
|
<li v-for="item in hot" :key="item.id" @tap="HotClick(item.id)" style="margin: 0 10rpx;"
|
:style="{color:item.bgColor==true?'#5879a4':'#000'}">
|
{{item.name}}
|
</li>
|
</ul>
|
</view>
|
</view>
|
<view class="centre flex">
|
<view class="CLeft flex">
|
<ul class="institution">
|
<view class="" style="font-weight: 700;padding-bottom: 6rpx;">机构统计10</view>
|
<li v-for="ietm1 in 7" :key="item1" class="flex">
|
<view class="">item</view>
|
<view class="">112</view>
|
</li>
|
</ul>
|
<ul class="institution institution2">
|
<view class="" style="font-weight: 700;padding-bottom: 6rpx;">机构统计10</view>
|
<li v-for="ietm1 in 4" :key="item1" class="flex">
|
<view class="">item</view>
|
<view class="">112</view>
|
</li>
|
</ul>
|
<ul class="institution institution3 ">
|
<view class="" style="font-weight: 700;padding-bottom: 6rpx;">机构统计10</view>
|
<li v-for="ietm1 in 1 " :key="item1" class="flex">
|
<view class="">item</view>
|
<view class="">112</view>
|
</li>
|
</ul>
|
</view>
|
<view class="CRight flex flex-column relative">
|
<el-row style="height: 50rpx;width: 100%;">
|
<view class="flex">
|
<view class="">共{{total}}条</view>
|
<view class="">
|
<uni-data-select style="width: 250rpx;" v-model="rankVal" :localdata="rank" :clear="false"
|
@change="selectChange">
|
</uni-data-select>
|
</view>
|
</view>
|
</el-row>
|
<view style="flex-grow: 1;" class="flex CommodityList">
|
<view class="" v-for="item in CommodityList" :key="item" style="height:28% ;">
|
<el-card class="box-card" style="height: 100%;">
|
<view class="flex flex-start">
|
<view class=""
|
style="background-color: #5879a4;text-align: right;transform:translateX(-50rpx);color: #fff;padding:0 10rpx 0 50rpx;">
|
{{item.post}}
|
</view>
|
<view class="" style="margin-right: 20rpx;">{{item.name}}</view>
|
<view class=""
|
style="border: 1px solid #d4d4d4;font-weight:500;padding: 0 10rpx;border-radius: 10rpx;">
|
{{item.dynasty}}
|
</view>
|
</view>
|
<view class=""
|
style="background-color: #f6f6f6;padding: 5rpx 10rpx;color: #777777; margin: 15rpx 0;">
|
{{item.anotherNamer}}
|
</view>
|
<view class=""
|
style="font-weight: 600; font-size: 20rpx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
|
{{item.content}}
|
</view>
|
</el-card>
|
</view>
|
</view>
|
<!-- 弹出层 -->
|
<el-dialog title="" class="dialog" :visible.sync="dialogVisible" width="40%">
|
<!-- 取消键 -->
|
<view class="" @click="dialogVisible=false"
|
style="padding: 20rpx;position: absolute;left: 0;top: 0;font-size: 40rpx;z-index: 999;">X</view>
|
<view class="flex" style="height: 100%;flex-direction: column;">
|
<view class="detailImage" style="position: relative;">
|
<img style="opacity: .5;" src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1710608400&t=42d653b0f525a8de1d45825ea8b45f66"
|
alt="" />
|
<view class=" flex flex-column " style="height: 100%;justify-content: center; position: relative;z-index: 999;">
|
<view class="" style="font-size: 40rpx;font-weight: 900;">御医</view>
|
<view class="" style="font-size: 20rpx;font-weight: 800; border: 2rpx solid #000;margin: 30rpx 0;background-color: #fff;border-radius: 10rpx;padding: 0 10rpx;">御医</view>
|
<ul class="flex">
|
<li v-for="item in 3" style="background-color: #fff;color: #415c7a; border: 2rpx solid #415c7a;border-radius: 30rpx;padding: 0 15rpx;margin-right: 10rpx;" >ssdf</li>
|
</ul>
|
</view>
|
</view>
|
<view class="" style="width: 80%; height: 100%;position: relative;">
|
<view class=" flex flex-content"
|
style=" box-shadow: 4px 4px 8px #888; background-color: #fff; width: 100%;left: 0; position: relative;top: -50rpx;padding: 30rpx 0; ">
|
<view class="">品级: <span>二品</span> </view>
|
<view class="">品级: <span>二品</span> </view>
|
<view class="">品级: <span>二品</span> </view>
|
</view>
|
<view class="" style="background-color: #f4f4f4;font-weight: 700;padding: 10rpx;">
|
相关描述
|
</view>
|
<view class="" style="font-size: 23rpx;font-weight: 600;margin: 30rpx 0;">按摩博士是古代太医署职称，负责掌管按摩正骨专业的教授考核，官阶在从九品下[1]。按摩博士，隋代设二人，品位不详。唐代设一人，官阶为从九品下，按摩博士负责掌管按摩、正骨专业的教学，下设按摩师、按摩工等作为助手。</view>
|
<view class="" style="background-color: #f4f4f4;font-weight: 700;padding: 10rpx;">
|
相关描述
|
</view>
|
<view class="" style="font-size: 23rpx;font-weight: 600;margin: 30rpx 0;">按摩博士是古代太医署职称，负责掌管按摩正骨专业的教授考核，官阶在从九品下[1]。按摩博士，隋代设二人，品位不详。唐代设一人，官阶为从九品下，按摩博士负责掌管按摩、正骨专业的教学，下设按摩师、按摩工等作为助手。</view>
|
</view>
|
<view class="flex" style="padding: 20rpx; box-sizing: border-box; width: 100%;margin-bottom: 2rpx;">
|
<el-button class="flex">
|
<view class="flex">
|
<view class="" style="margin-right: 40rpx;">上一条</view>
|
<view class="">机构: 太医院 </view>
|
</view>
|
</el-button>
|
<el-button class="flex">
|
<view class="flex">
|
<view class="" style="margin-right: 40rpx;">机构: 太医院 </view>
|
<view class="" >下一条</view>
|
</view>
|
</el-button>
|
</view>
|
</view>
|
</el-dialog>
|
<!-- 分页 -->
|
<el-row style="height: 50rpx;position: absolute;bottom: 50rpx;">
|
<el-pagination class="paging" :current-page="CurrentPage" :total="total" :page-size="6"
|
@current-change="CurrentChange" @prev-click="PrevClick" @next-click="NextClick" prev-text="上一页"
|
next-text="下一页" background layout="prev, pager, next">
|
</el-pagination>
|
</el-pagination>
|
</el-row>
|
</view>
|
</view>
|
|
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
// 弹出层
|
dialogVisible: true,
|
// 搜索的下拉列表
|
selectValue: [{
|
value: 0,
|
text: '是否'
|
}, {
|
value: 1,
|
text: '11sd1'
|
}, {
|
value: 2,
|
text: '11sdsd1'
|
}],
|
// 热门搜索
|
hot: [{
|
id: 1,
|
name: '李时珍',
|
bgColor: false
|
}, {
|
id: 2,
|
name: '李时珍2',
|
bgColor: false
|
}, {
|
id: 3,
|
name: '李时珍3',
|
bgColor: false
|
}, ],
|
// 点击的搜索项
|
HotBg: false,
|
// 排序下拉菜单
|
rank: [{
|
value: 0,
|
text: '排序'
|
}, {
|
value: 1,
|
text: '排序s'
|
}],
|
rankVal: 0,
|
// 列表项
|
CommodityList: [{
|
id: 1,
|
post: '机构',
|
name: '太医院',
|
dynasty: '唐朝',
|
anotherNamer: '别称----------',
|
content: '内容++++++++++++++++++++++++++++++'
|
},
|
{
|
id: 2,
|
post: '机构',
|
name: '太医院',
|
dynasty: '唐朝',
|
anotherNamer: '别称----------',
|
content: '内容++++++++++++++++++++++++++++++'
|
},
|
{
|
id: 3,
|
post: '机构',
|
name: '太医院',
|
dynasty: '唐朝',
|
anotherNamer: '别称----------',
|
content: '内容++++++++++++++++++++++++++++++'
|
}
|
],
|
// 分页的总数
|
total: 100,
|
// 当前页
|
CurrentPage: 1
|
|
}
|
},
|
methods: {
|
// 热门搜索
|
HotClick(id) {
|
this.hot.forEach(item => {
|
if (item.id === id) {
|
console.log(item.id === id);
|
item.bgColor = true
|
} else {
|
console.log(item.id === id);
|
item.bgColor = false
|
}
|
})
|
|
},
|
selectChange(e) {
|
|
console.log(e);
|
},
|
// 分页当前页触发事件
|
CurrentChange(val) {
|
if (this.CurrentPage != val) {
|
this.CurrentPage = val
|
console.log('当前页', val);
|
console.log(this.CurrentPage);
|
}
|
|
},
|
// 上一页
|
PrevClick(val) {
|
if (this.CurrentPage != val) {
|
this.CurrentPage = val
|
console.log('上一页', val);
|
console.log(this.CurrentPage);
|
|
}
|
},
|
// 下一页
|
NextClick(val) {
|
if (this.CurrentPage != val) {
|
// console.log('下一页',val);
|
this.CurrentPage = val
|
console.log(this.CurrentPage);
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
|
.NavTop {
|
background-color: #0c274c;
|
padding: 25rpx;
|
color: #fff !important;
|
|
img {
|
width: 30rpx;
|
height: 30rpx;
|
vertical-align: middle;
|
}
|
|
.NavTopr {
|
img {
|
margin-right: 10rpx;
|
}
|
}
|
}
|
|
.mImage {
|
width: 100%;
|
height: 40rpx;
|
|
img {
|
vertical-align: top;
|
}
|
}
|
|
.search {
|
width: 50%;
|
}
|
|
.centre {
|
padding: 0 30rpx;
|
/* border: 1px solid #000; */
|
height: 70vh;
|
/* overflow: hidden; */
|
align-items: flex-start;
|
|
.CLeft {
|
height: 100%;
|
vertical-align: top;
|
flex-direction: column;
|
|
.institution {
|
width: 300rpx;
|
border: 1px solid #000;
|
padding: 20rpx;
|
|
}
|
|
.institution2 {
|
margin: 20rpx 0;
|
}
|
|
.institution3 {
|
flex-grow: 1;
|
}
|
}
|
|
.CRight {
|
margin-left: 20rpx;
|
height: 100%;
|
flex-grow: 1;
|
border: 1px solid #000;
|
box-sizing: border-box;
|
overflow: hidden;
|
padding: 10rpx 30rpx;
|
}
|
}
|
|
.CommodityList {
|
flex-grow: 1;
|
width: 100%;
|
display: flex;
|
justify-content: flex-start;
|
align-items: flex-start;
|
flex-wrap: wrap;
|
align-content: flex-start;
|
padding: 20rpx 20rpx 0 20rpx;
|
justify-content: space-between;
|
|
>view {
|
width: 49%;
|
margin-bottom: 20rpx;
|
|
.box-card {
|
overflow: visible;
|
}
|
}
|
}
|
|
/* ::v-deep .el-card__body{
|
padding: 30rpx;
|
} */
|
.paging {
|
display: flex;
|
align-items: center;
|
}
|
|
.dialog {
|
position: fixed;
|
right: 0;
|
top: 0;
|
|
>div {
|
height: 100%;
|
margin: 0 !important;
|
position: fixed;
|
right: 0;
|
top: 0;
|
|
> :nth-child(1) {
|
display: none;
|
}
|
|
|
>:nth-child(2) {
|
padding: 0;
|
}
|
}
|
}
|
|
::v-deep .el-dialog .el-dialog__body {
|
height: 100%;
|
}
|
|
.detailImage {
|
width: 100%;
|
height: 450rpx;
|
color: #000;
|
img{
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
vertical-align: top;
|
}
|
}
|
</style>
|
