<template> <view> <view class="bg"> <view> <image class="footer-img" src="https://dhszysp.oss-cn-hangzhou.aliyuncs.com/expertshigs/footer-bg.png"></image> <image class="title-chibang" src="../../../static/specialist/title-chibang.png"></image> <text class="title-jianjie">专家简介专区</text> </view> <!-- 开始循环的body --> <view class="jianjie"> <view class="height-loop" :class="{ fullHeight: chooseIndex === index }" v-for="(item, index) in itemList" :key="index"> <view class="loop-body"> <view class="left-body"><image :src="item.head"></image></view> <!-- 基本信息 和基本简介 --> <view class="loop-message"> <view class="mingzi-status"> <view class="good-name"> <view class="experts-name">{{ item.name }}</view> <!-- 擅长的领域 --> <view> <text v-for="(good, index) in item.goodAt" :key="index" class="good-at">{{ good }}</text> </view> </view> <!-- 收起 展开 --> <text class="experts-status">展开</text> </view> <!-- 下面的是职称和对号 --> <view class="technical"> <text class="iconfont iconduihao1 logoduihao "></text> <text class="zhicheng">{{ item.zhicheng }}</text> </view> <!-- 那个带着分线的 --> <view class="hots-ing"></view> <!-- 下面的简介的图片 --> <view class="synopsis" :class="{ fullHeight: chooseIndex === index }">{{ item.jianjie }}</view> </view> </view> </view> </view> </view> </view> </template> <script> export default { data() { return { chooseIndex: 0, // 专家简历页面 itemList: [ // 陈丽华 { name: '陈丽华', head: '../../../static/specialist/chenlihua.png', zhicheng: '原故宫博物院副院长、研究馆员', goodAt: ['漆器', '珐琅器'], jianjie: '主要从事博物馆文物的陈列展览与研究，主攻方向是漆器、珐琅器的研究与鉴定。独立主持了国内、外陈列展览近二十个。先后在《文物》、《故宫博物院院刊》、台北《故宫文物月刊》等专业刊物上发表过专业论文和文章50余篇，主要有：《明代雕漆之断代与辨伪》、《景泰款掐丝珐琅器辨识》、《明嘉靖剔彩漆器与乾隆仿品》、《中国金属胎珐琅工艺》等。' }, // 胡国强 { name: '胡国强', head: '../../../static/specialist/huguoqiang.png', zhicheng: '故宫博物院研究馆员', goodAt: [], jianjie: '长期从事文物工作，积累了一定的工作经验，在此基础上发表了多篇学术文章，并主编出版了《故宫博物院藏文物珍品全集•雕塑篇》、《捐献大家——郑振铎》、《故宫博物院藏品大系•雕塑篇》（3卷）以及《你应该知道的200件曲阳造像》等图录。参与或主持完成了“曲阳白石造像库房式陈列”、“郑振铎捐献陶俑特展”、“隋唐陶俑艺术展览”、“帝后生活”（巴西）、“邃古来今”（澳门）、“明代宫廷艺术”（美国）等国内外展览。2009年带领全组按计划完成了雕塑文物库房的验收工作。' }, { name: '许国平', head: '../../../static/specialist/xuguoping.png', zhicheng: '故宫博物院研究馆员', goodAt: [], jianjie: '长期从事碑帖保管陈列和研究工作。以碑帖版本为研究重点，进行较为深入的研究。担任《故宫博物院藏文物珍品全集•名碑善本》副主编。担任《故宫博物院藏文物珍品全集•名碑十品》副主编。先后撰写并发表了《唐九成宫醴泉铭拓本版本试析——以故宫博物院藏本为主》、《肃府本淳化阁帖考略——以故宫博物院藏本阁帖及懋勤殿本阁帖为例》和《顾刻本淳化阁帖考略——以欧斋石墨题跋著录本为主》等论文数十篇。曾多次应邀参加《兰亭国际学术研讨会》等碑帖和书法史论国际研讨会，并发表论文。主持了“书画和碑帖鉴定展”的碑帖部分展览。参与了“兰亭特展””展览的碑帖部分展览和赴法国巴黎“神圣山峰展”等展览。' }, { name: '毛宪民', head: '../../../static/specialist/maoxianmin.png', zhicheng: '故宫博物院研究馆员', goodAt: ['漆器', '珐琅器'], jianjie: '在研究明清宫廷史与清宫武备仪仗文物中，担任副主编完成《故宫博物院文物珍品全集•清宫武备》卷，在《明清论丛》、《清史论丛》、《历史档案》、《中国国家博物馆馆刊》、《满族研究》、《文化学刊》等学术期刊上发表论文及文章百余篇，论文《“乾隆年制”天地人刀剑考》、《清帝步骑射与射侯射鹄靶考》、《清代射箭与“弓力”问题》，以研究的新视角、新思路，弥补了清史文献记载的缺失；《清宫武备兵器研究》是第一部专业研究清代宫廷武备兵器的学术论著，以物证史、以史论物、史物结合，拓展了故宫文物研究领域，2015年荣获故宫博物院优秀学术论著奖并引起清史学界的关注。' }, { name: '王岩菁', head: '../../../static/specialist/wangyanjing.png', zhicheng: '故宫博物院副研究员', goodAt: ['文物修复'], jianjie: '毕业于北大资源研修学院文物鉴定与保护专业；2017年4月取得国家高级文物艺术品鉴定评估师（陶瓷类）专业人才水平等级证书。曾实习于北京天雅古玩城任市场部业务主管，现在就职于中天公正（北京）文物艺术品鉴定评估中心任鉴定评估师。' }, { name: '李臣', head: '../../../static/specialist/lichen.png', zhicheng: '北京市物价局价格认证中心古陶瓷专家、专职高校教授', goodAt: ['瓷器'], jianjie: '从事古陶瓷收藏研究 20 余年，师从故宫文物鉴定专家耿宝昌先生。具有较深厚的理论基础，同时在收藏实践中，积累了丰富的鉴定、鉴赏' } ] }; } }; </script> <style> [@import](https://my.oschina.net/u/3201731) url('../../../static/css/iconfont.css'); .bg { width: 750upx; height: 5922upx; background-image: url(https://dhszysp.oss-cn-hangzhou.aliyuncs.com/expertshigs/zhuanjiaS.png); background-size: 100%; } .footer-img { width: 708upx; height: 248upx; position: absolute; top: 5674upx; } .title-chibang { width: 378upx; height: 32upx; position: absolute; top: 485upx; left: 186upx; } .title-jianjie { color: #f9c779; font-size: 30upx; font-weight: 500; position: absolute; top: 485upx; left: 279upx; } .jianjie { padding-top: 690upx; height: auto; } /* 循环的body */ .loop-body { height: auto; margin: 0 30upx 10upx 30upx; position: relative; } /* 循环消息页面 高度 是自定义 */ .loop-body .loop-message { width: 560upx; height: auto; background-color: #ffeccf; border-radius: 10upx; position: absolute; top: 50%; margin-top: -100upx; right: 0upx; } /* 简介的 */ .synopsis { width: 500upx; height: 63upx; margin: 0 auto; overflow: hidden; margin-top: 13upx; color: #333333; font-size: 18upx; font-weight: 500; margin-bottom: 10upx; line-height: 30upx; } .loop-message .technical { width: 400upx; height: 30upx; margin-left: 30upx; display: flex; align-items: center; white-space: nowrap; color: #6f3d01; font-size: 18upx; font-weight: 400; } .loop-message .technical .logoduihao { font-size: 22upx; color: #6f3d01; } .loop-message .technical .zhicheng { margin-left: 8upx; } .loop-body .loop-message .mingzi-status { width: 500upx; height: 70upx; margin: 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .mingzi-status .good-name { display: flex; flex-direction: row; align-items: center; } .good-name .good-at { font-size: 18upx; border: #9a6f2d 1upx solid; color: #6f3d01; padding: 1upx 4upx; margin-left: 10upx; font-weight: bold; } .good-name .good-at:nth-child(1) { margin-left: 20upx; } .hots-ing { width: 500upx; height: 5upx; border-bottom: #c49552 1upx dashed; margin: 10upx 30upx 0upx 30upx; } .loop-body .left-body { width: 152upx; height: 152upx; border: #ffeccf 1upx solid; border-radius: 10upx; position: relative; } .loop-body .left-body image { position: absolute; top: -7upx; right: -7upx; width: 152upx; height: 152upx; } .experts-name { color: #333333; font-size: 28upx; font-weight: bold; } .experts-status { color: #078c75; font-size: 18upx; font-weight: 500; } .fullHeight { height: auto; } .height-loop { height: 220upx; } </style>
来源：https://my.oschina.net/u/3554714/blog/3105942