BiodiversityAndEnergyRevolutionTire.vue 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652
  1. <template>
  2.  <div style="background-color: #fff; min-width: 1920px;overflow: auto;">
  3. <HeaderItem style="background: #2c558a "></HeaderItem>
  4. <div style="width: 100%;height: 650px; ">
  5. <img style="width: 100%;height: 100%;margin-top: -44px; " src="@/assets/Biodiversity/top 2.png">
  6. </div>
  7. <div style="position: relative;margin-top: -119px;margin-bottom: 30px;">
  8. <div style="width: 100%;overflow: hidden;background-color: #fff;border-radius: 50px 50px 0 0;">
  9. <div style="width: 70%;margin-left: 15%;margin-top: 50px; ">
  10. <div class="user-top-name">背景</div>
  11. <div class="ui-user-EnInfo">
  12. <div class="ui-line"></div>
  13. <div class="ui-user-detail">BACKGROUND</div>
  14. <div class="ui-line"></div>
  15. </div>
  16. <div style="width: 76%;margin-left: 12%;">
  17. <div :class="$i18n.locale == 'zh' ?'ui-text-info':'ui-text-info-en'">{{ $i18n.locale == 'zh' ?
  18. '生物多样性是人类赖以生存和发展的重要基础,关乎子孙后代和人类福祉,关乎永续发展和文明兴衰。' : 'Biodiversity is an important basis for
  19. human survival and development, which is related to future generations and human well-being,
  20. sustainable development and the rise and fall of civilization.' }}</div>
  21. <div :class="$i18n.locale == 'zh' ?'ui-text-info':'ui-text-info-en'">{{ $i18n.locale == 'zh' ?
  22. '进入工业文明以来,人类在创造巨大物质财富的同时,也加速了对自然资源的攫取,打破了地球生态系统平衡,带来了生物多样性丧失和环境破坏等重大危机。当前,人类正处于第六次物种大灭绝边缘,全球物种灭绝速度不断加快,生态系统退化形势严峻,生物多样性丧失对人类生存和发展构成严重威胁。'
  23. : 'Since entering the industrial civilization, while creating huge material wealth, human
  24. beings have also accelerated the grab of natural resources, broken the balance of the
  25. earth is ecosystem, and brought about major crises such as loss of biodiversity and
  26. environmental damage. At present, mankind is on the verge of the sixth mass extinction of
  27. species. The global rate of species extinction is accelerating. The situation of ecosystem
  28. degradation is severe. The loss of biodiversity poses a serious threat to human survival and
  29. development.'}}
  30. </div>
  31. <div :class="$i18n.locale == 'zh' ?'ui-text-info':'ui-text-info-en'">{{ $i18n.locale == 'zh' ?
  32. '从全球范围看,造成全球生物多样性破坏的原因主要可以归结为栖息地破坏、生物资源过度消耗、气候变化、环境污染、生物入侵五个方面。不合理的能源发展方式是导致上述问题不断加剧的关键因素。工业革命以来,化石能源长期大规模开发利用,产生大量温室气体和有害物质,造成温度上升、环境破坏、资源紧张,严重威胁全球生物多样性。特别是气候危机加速袭来,很可能在未来几十年演化成全球性生态危机,给地球生物带来巨大灾难。面对日益严峻的形势,关键要抓佳能源这个
  33. “牛鼻子”,加快能源电力革命,减缓和消除化石能源开发利用对生物多样性的破坏,实现能源电力与生物多样性协同治理。'
  34. : 'From a global perspective, the causes of global biodiversity destruction can be mainly
  35. attributed to habitat destruction, excessive consumption of biological resources, climate
  36. change, environmental pollution and biological invasion. Unreasonable energy development
  37. mode is the key factor that leads to the aggravation of the above problems. Since the
  38. industrial revolution, fossil energy has been developed and utilized on a large scale for a
  39. long time, producing a large number of greenhouse gases and harmful substances, causing
  40. temperature rise, environmental damage, resource tension, and a serious threat to global
  41. biodiversity. In particular, the accelerated onset of the climate crisis is likely to evolve
  42. into a global ecological crisis in the coming decades, which will bring huge disasters to
  43. the earth is creatures. Facing the increasingly severe situation, the key is to improve the
  44. energy "Bullnose", accelerate the energy and electricity revolution, slow down and eliminate
  45. the destruction of biodiversity caused by the development and utilization of fossil energy,
  46. and achieve the coordinated governance of energy, electricity and biodiversity.' }}
  47. </div>
  48. <div :class="$i18n.locale == 'zh' ?'ui-text-info':'ui-text-info-en'">{{ $i18n.locale == 'zh' ?
  49. '全球能源互联网是能源生产清洁化、配置广域化、消费电气化的新型能源系统,是清洁能源在全球范围大规模开发、输送和使用的重要平台。构建全球能源互联网是实现世界能源电力革命的根本途径,能够改变经济社会依赖化石能源的发展路径,推动建立“零污染、零碳排放、高效率”
  50. 的新型能源发展模式,彻底解决化石能源这一影响和制约生物多样性的关键问题,促进能源与生态环境协调可持续发展,为保护生物多样性提供有效解决方案,
  51. 为推动生态文明建设、打造地球生命共同体注入新动能。'
  52. : 'The global energy internet is a new energy system with clean energy production, wide
  53. distribution and electrification of consumption, and an important platform for large-scale
  54. development, transmission and use of clean energy worldwide. Building a global energy
  55. Internet is the fundamental way to realize the world energy and power revolution. It can
  56. change the development path of the economy and society relying on fossil energy, promote the
  57. establishment of a new energy development model of "zero pollution, zero carbon emissions,
  58. and high efficiency", thoroughly solve the problem of fossil energy, which affects and
  59. restricts biodiversity, and promote the coordinated and sustainable development of energy
  60. and the ecological environment, To provide effective solutions for biodiversity conservation
  61. and inject new momentum into promoting the construction of ecological civilization and
  62. building a global community of life' }}
  63. </div>
  64. </div>
  65. <div style="width: 100%;margin-top: 30px;display: flex;justify-content: space-between;">
  66. <div style="width: 48%;height: 340px;background-color: #e9f3ff; ">
  67. <div class="user-car-title">
  68. 话题
  69. </div>
  70. <div class="user-car-titEn">TOPIC</div>
  71. <div :class="$i18n.locale == 'zh'?'user-car-text':'user-car-text-en'">{{ $i18n.locale ==
  72. 'zh' ?
  73. '会议将以“生物多样性与能源电力革命”为主要话题,邀请联合国、有关国际组织高级别代表,相关国家高级别官员,大学及研究机构专家学者,企业及金融机构负责人直面全球生物多样性危机背景下的人类发展模式中的问题,正视全球气候环境危机,就清洁能源开发、低碳能源转型、跨区域能源互联网建设、碳减排、三网融合、科技创新、生态文明建设和推动构建人类命运共同体等话题开展研讨。'
  74. : 'The conference will take "biodiversity and energy power revolution" as the main
  75. topic, and invite high-level representatives of the United Nations and relevant
  76. international organizations, high-level officials of relevant countries, experts and
  77. scholars from universities and research institutions, and heads of enterprises and
  78. financial institutions to directly face the problems in the human development model in
  79. the context of the global biodiversity crisis, face up to the global climate and
  80. environmental crisis Cross regional energy Internet construction, carbon emission
  81. reduction, three networks integration, scientific and technological innovation,
  82. ecological civilization construction and promoting the construction of a community with
  83. a shared future for mankind were discussed.' }}
  84. </div>
  85. </div>
  86. <div style="width: 48%;height: 340px;background-color: #e9f3ff; ">
  87. <div class="user-car-title">
  88. 目标
  89. </div>
  90. <div class="user-car-titEn">OBJECTIVES</div>
  91. <div :class="$i18n.locale == 'zh'?'user-car-text':'user-car-text-en'">{{ $i18n.locale ==
  92. 'zh' ?
  93. '会议将发布《生物多样性与能源电力革命》研究成果,揭示化石能源为主体的不合理能源发展方式是导致生物多样性破坏的重要根源,提出以全球能源互联网推动能源电力革命、保护生物多样性的新思路、新方案和行动路线图,为推力世界能源电力革命、促进生物多样性保护提供可操作、可实施、可复制的一榄子解決方案。'
  94. : 'The conference will release the research results of Biodiversity and Energy Power
  95. Revolution, reveal that the irrational energy development mode dominated by fossil
  96. energy is an important source of biodiversity destruction, propose new ideas, new plans
  97. and action roadmap to promote the energy power revolution and protect biodiversity
  98. through the global energy Internet, and provide operable, implementable One olive
  99. solution that can be copied.' }}
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. <div class="ui-user-pic">
  105. <div style="width: 70%;margin-left: 15%;margin-top: 30px; ">
  106. <div class="user-top-name">初步议程</div>
  107. <div class="ui-user-EnInfo">
  108. <div class="ui-line"></div>
  109. <div class="ui-user-detail">DRAFT AGENDA</div>
  110. <div class="ui-line"></div>
  111. </div>
  112. <div class="ui-speak-time">
  113. <div class="ui-speak-left">{{ $i18n.locale == 'zh' ? '会议时间' : 'Meeting time' }}:</div>
  114. <div class="ui-speak-right">{{ $i18n.locale == 'zh' ? '2022年12月16日13:35-14:45' : 'December
  115. 16, 2022 13:35-14:45' }}</div>
  116. </div>
  117. <div class="ui-speak-time">
  118. <div class="ui-speak-left">{{ $i18n.locale == 'zh' ? '会议地点' : 'Meeting address' }}:</div>
  119. <div class="ui-speak-right">{{ $i18n.locale == 'zh' ? '加拿大蒙特利尔会展中心512E会议室' : '512E
  120. Conference Room, Montreal Convention Center, Canada' }}</div>
  121. </div>
  122. <div style="width: 98%;margin-left: 1%;margin-top: 30px; display: flex;">
  123. <div style="width: 10%;text-align: center;position: relative;">
  124. <div :class="$i18n.locale == 'zh' ?'body-time-left1':'body-time-left11'">
  125. 13:15-13:35
  126. </div>
  127. <div :class="$i18n.locale == 'zh' ?'body-time-left2':'body-time-left22'">
  128. 13:15-13:35
  129. </div>
  130. <div :class="$i18n.locale == 'zh' ?'body-time-left3':'body-time-left33'">
  131. 13:55-14:45
  132. </div>
  133. </div>
  134. <div style="width: 90%; ">
  135. <el-timeline>
  136. <el-timeline-item :timestamp="$i18n.locale == 'zh' ? '开场致辞' : 'Opening remarks'"
  137. placement="top">
  138. <div>
  139. <p class="text-detail">1.{{ $i18n.locale == 'zh' ? '中国生态环境部有关领导' : 'Relevant
  140. leaders of the Ministry of Ecology and Environment of China' }}
  141. <br />2.{{
  142. $i18n.locale == 'zh' ? '联合国生多公约秘书处执秘穆雷玛' : 'Executive Secretary of the
  143. Secretariat of the United Nations Convention on Biological Diversity'
  144. }}<br />
  145. 3.{{ $i18n.locale == 'zh' ? '联合国有关机构负责人' : 'Heads of relevant United
  146. Nations agencies' }}<br />
  147. 4.{{ $i18n.locale == 'zh' ? '合作组织主席、国家电网公司董事长、中国电力联合会理事长辛保安' :
  148. 'Xin Bao an, Chairman of the Cooperation Organization, Chairman of the
  149. State Grid Corporation of China and Chairman of the China Electricity
  150. Council' }}
  151. </p>
  152. </div>
  153. </el-timeline-item>
  154. <el-timeline-item :timestamp="$i18n.locale == 'zh' ? '成果发布' : 'Results release'"
  155. placement="top">
  156. <div>
  157. <p class="text-detail">{{ $i18n.locale == 'zh' ?
  158. '合作组织秘书局副局长陈葛松发布《生物多样性与能源电力革命》专著' : 'Chen Gesong, Deputy Director of the
  159. Secretariat of the Cooperation Organization, released the monograph
  160. "Biodiversity and Energy Power Revolution"'
  161. }}</p>
  162. </div>
  163. </el-timeline-item>
  164. <el-timeline-item :timestamp="$i18n.locale == 'zh' ? '主题演讲' : 'Keynote speech'"
  165. placement="top">
  166. <div>
  167. <p class="text-detail">1.{{ $i18n.locale == 'zh' ? '联合国环境署代表' :
  168. 'Representative of the United Nations Environment Programme'
  169. }} <br />2.{{ $i18n.locale == 'zh' ? '世界经济论坛代表' : 'Representative of the
  170. World Economic Forum'
  171. }}<br />
  172. 3.{{ $i18n.locale == 'zh' ? '世界可持续发展工商理事会执行副总裁戴安.霍尔多夫女士' : 'Ms. Diane
  173. Holdorf, Executive Vice President of the World Business Council for
  174. Sustainable Development'
  175. }}<br />
  176. 4.{{ $i18n.locale == 'zh' ? '世界资源研究所代表' : 'Representative of World
  177. Resources Institute' }}<br />
  178. 5.{{ $i18n.locale == 'zh' ? '中国人民大学生态金融研究中心副主任、教授蓝虹女士' : 'Ms. Lan Hong,
  179. Deputy Director and Professor of the Ecological Finance Research Center
  180. of Renmin University of China'
  181. }}<br /> 6.{{ $i18n.locale == 'zh' ? '加电协代表' :
  182. 'Power Supply Association Representative' }}</p>
  183. </div>
  184. </el-timeline-item>
  185. </el-timeline>
  186. </div>
  187. </div>
  188. </div>
  189. </div>
  190. <div style="position:relative;z-index: 9999; ">
  191. <img style="position:absolute;top:0%;left:23%;margin-top: 85px; "
  192. src="@/assets/Biodiversity/animales4.png" alt="">
  193. </div>
  194. <div style="width: 70%;margin-left: 15%;margin-top: 50px; ">
  195. <div class="user-top-name">项目案例</div>
  196. <div class="ui-user-EnInfo">
  197. <div class="ui-line"></div>
  198. <div class="ui-user-detail">PROJECT CASE</div>
  199. <div class="ui-line"></div>
  200. </div>
  201. <div></div>
  202. <div style="width:100%;margin-top: 20px;">
  203. <ul style="width: 100%;">
  204. <li class="ui-ul-li" v-for="(item,index) in listInfo" :key="index">
  205. <div style="width: 100%;height: 100%;display: flex;">
  206. <div style="width: 20%;height: 260px;text-align: center;">
  207. <div>
  208. <img :src="'api/file/pub/' + item.pictureUrl"
  209. style="display:inline-block;width: 253px;height:219px;margin-top:20.5px;margin-left: 50%;transform:translateX(-50%)">
  210. </div>
  211. </div>
  212. <div v-if="item.sysAttachmentInfos.length==1" style="width: 63.5%;height: 260px;">
  213. <div class="user-top-title-ui" :title="item.title">
  214. {{item.title}}</div>
  215. <div
  216. style="width: 98%;height: 180px;margin-left: 50%;transform: translateX(-50%);">
  217. <div class="user-center-ui" v-html="item.contentHtml">
  218. </div>
  219. <div style="width: 100%;height: 10px;"></div>
  220. </div>
  221. </div>
  222. <div v-if="item.sysAttachmentInfos.length>=2" style="width: 47.6%;height: 260px;">
  223. <div class="user-top-title-ui" :title="item.title">
  224. {{item.title}}</div>
  225. <div
  226. style="width: 98%;height: 180px;margin-left: 50%;transform: translateX(-50%);">
  227. <div class="user-center-ui" v-html="item.contentHtml">
  228. </div>
  229. <div style="width: 100%;height: 10px;"></div>
  230. </div>
  231. </div>
  232. <div v-if="item.sysAttachmentInfos.length==0" style="width: 80%;height: 260px;">
  233. <div class="user-top-title-ui" :title="item.title">
  234. {{item.title}}</div>
  235. <div
  236. style="width: 98%;height: 180px;margin-left: 50%;transform: translateX(-50%);">
  237. <div class="user-center-ui" v-html="item.contentHtml">
  238. </div>
  239. <div style="width: 100%;height: 10px;"></div>
  240. </div>
  241. </div>
  242. <div v-if="item.sysAttachmentInfos.length>=2"
  243. style="max-width: 32.4%;height: 260px;display: flex; overflow: auto;">
  244. <div style="height: 200px;margin:0 6px;"
  245. v-for="(ele,indexs) in item.sysAttachmentInfos" :key="indexs">
  246. <div style="margin-top: 45px;">
  247. <img :src="'api/file/pub/' + ele.attachmentSavePath"
  248. style="width: 197px;height: 148px; ">
  249. <div class="user-text-ui" :title="ele.attachmentTitle.split('.')[0]">
  250. {{ele.attachmentTitle.split('.')[0]}}</div>
  251. </div>
  252. </div>
  253. </div>
  254. <div v-if="item.sysAttachmentInfos.length==1"
  255. style="max-width: 16.5%;height: 260px;display: flex; overflow: auto;">
  256. <div style="height: 200px;margin:0 5px;"
  257. v-for="(ele,indexs) in item.sysAttachmentInfos" :key="indexs">
  258. <div style="margin-top: 45px;">
  259. <img :src="'api/file/pub/' + ele.attachmentSavePath"
  260. style="width: 197px;height: 148px; ">
  261. <div class="user-text-ui" :title="ele.attachmentTitle.split('.')[0]">
  262. {{ele.attachmentTitle.split('.')[0]}}</div>
  263. </div>
  264. </div>
  265. </div>
  266. <div v-if="item.sysAttachmentInfos.length==0"></div>
  267. </div>
  268. </li>
  269. </ul>
  270. <!-- 分页 -->
  271. <div style="width: 100%;position: relative;height: 100px;">
  272. <el-pagination background
  273. style="height: 80px;position: absolute;left: 50%;top: 100px;transform: translate(-50%,-50%);"
  274. layout="prev, pager, next" :total=totalCount @current-change="handleCurrentChange">
  275. </el-pagination>
  276. </div>
  277. </div>
  278. </div>
  279. <div></div>
  280. </div>
  281. </div>
  282. <footers></footers>
  283. </div>
  284. </template>
  285. <script>
  286. import {getInfoList} from '@/api/Biodiversity/BiodiversityAndEnergyRevolutionTire'
  287. import HeaderItem from '@/components/headerItem3'
  288. import footers from '@/components/footersNew'
  289. export default {
  290.  name: 'BiodiversityAndEnergyRevolutionTire',
  291. components: {
  292. HeaderItem,
  293. footers,
  294. },
  295. data() {
  296. return {
  297. listInfo:[],
  298. totalCount:'',
  299. language:'',
  300. page: {
  301. pageSize: 5,
  302. pageNo: 1,
  303. continentDict: null,
  304. industryDict: null,
  305. initialOrderZh: null,
  306. memberNameEn: null,
  307. memberNameZh:null,
  308. language: null,
  309. },
  310. };
  311. },
  312. methods:{
  313. init(){
  314. if(this.$i18n.locale=='zh'){
  315. this.language='ZH'
  316. }else{
  317. this.language='EN'
  318. }
  319. let params={
  320. pageNo:this.page.pageNo,
  321. pageSize:this.page.pageSize,
  322. language:this.language
  323. }
  324. console.log(params);
  325. getInfoList(params).then((res)=>{
  326. console.log('列表数据',res);
  327. this.listInfo=res.data.otherCmsInformationViews
  328. let num=Math.ceil(Number(res.data.otherCmsInformationViewsCount)/5)
  329. console.log(num);
  330. this.totalCount=Number(num*10)
  331. })
  332. },
  333. handleCurrentChange(val) {
  334. this.page.pageNo = val;
  335. this.init()
  336. },
  337. },
  338. watch: {
  339. '$i18n.locale'() {
  340. this.init()
  341. },
  342. },
  343. mounted(){
  344. this.init()
  345. }
  346. }
  347. </script>
  348. <style scoped>
  349. .ui-line{
  350. width: 34%;
  351. margin-top: 19px;
  352. border-top: 2px solid #0a3b78;
  353. }
  354. .user-top-name{
  355. width: 100%;
  356. height: 49px;
  357. line-height: 49px;
  358. font-size:35px;font-family: PingFangSC-Semibold, PingFang SC;
  359. font-weight: 600;
  360. color: #003372;
  361. text-align: center;
  362. }
  363. .ui-user-EnInfo{
  364. display: flex;
  365. justify-content: space-around;
  366. width: 40%;
  367. margin-left: 30%;
  368. height: 40px;
  369. margin-bottom: 30px;
  370. }
  371. .ui-text-info{
  372. margin-top: 20px;
  373. font-size: 14px;
  374. font-family: PingFangSC-Regular, PingFang SC;
  375. font-weight: 400;
  376. color: #333333;
  377. line-height: 22px;
  378. text-indent: 2em;
  379. }
  380. .ui-text-info-en{
  381. margin-top: 20px;
  382. font-size: 14px;
  383. font-family: PingFangSC-Regular, PingFang SC;
  384. font-weight: 400;
  385. color: #333333;
  386. line-height: 22px;
  387. }
  388. .ui-user-detail{
  389. height: 40px;
  390. line-height: 40px;
  391. font-size: 20px;
  392. font-family: PingFangSC-Medium, PingFang SC;
  393. font-weight: 500;
  394. color: #003372;
  395. }
  396. .user-car-title{
  397. margin-top: 30px;
  398. width: 100%;
  399. height: 49px;
  400. line-height:
  401. 49px; font-size: 30px;
  402. font-family: PingFangSC-Semibold, PingFang SC;
  403. font-weight: 600;
  404. color: #003372;
  405. text-align: center;
  406. }
  407. .user-car-titEn{
  408. margin-top: 8px;
  409. margin-bottom: 20px;
  410. width: 100%;
  411. height: 21px;
  412. font-size: 15px;
  413. font-family: PingFangSC-Medium, PingFang SC;
  414. font-weight: 540;
  415. color: #003372;
  416. line-height: 21px;
  417. text-align: center;
  418. }
  419. .user-car-text{
  420. width: 90%;
  421. margin-left: 5%;
  422. font-size: 14px;
  423. font-family: PingFangSC-Regular, PingFang SC;
  424. font-weight: 400;
  425. color: #333333;
  426. line-height: 20px;
  427. text-indent: 2em;
  428. }
  429. .user-car-text-en{
  430. width: 90%;
  431. margin-left: 5%;
  432. font-size: 14px;
  433. font-family: PingFangSC-Regular, PingFang SC;
  434. font-weight: 400;
  435. color: #333333;
  436. line-height: 20px;
  437. }
  438. .ui-user-pic{
  439. margin-top: 30px;
  440. width: 99.9%;
  441. height: 850px;
  442. border: 1px dotted #939394;
  443. background-image: url('~@/assets/Biodiversity/wolves-ga63ca5643_1920.jpg');
  444. background-size:100% 100%;
  445. }
  446. .ui-speak-time{
  447. width: 60%;
  448. height: 30px;
  449. margin-left: 20%;
  450. display: flex;
  451. justify-content: space-evenly;
  452. }
  453. .ui-speak-left{
  454. width: 30%;
  455. height: 30px;
  456. line-height: 30px;
  457. font-size: 16px;
  458. font-family: PingFangSC-Medium, PingFang SC;
  459. font-weight: 600;
  460. color: #104990;
  461. text-align: right;
  462. }
  463. .ui-speak-right{
  464. width: 70%;
  465. height: 30px;
  466. line-height: 30px;
  467. font-size: 16px;
  468. font-family: PingFangSC-Medium, PingFang SC;
  469. font-weight: 550;
  470. text-align: left;
  471. padding-left: 5px;
  472. }
  473. .text-detail{
  474. font-size: 16px;
  475. font-family: PingFangSC-Regular, PingFang SC;
  476. font-weight: 400;
  477. color: #333333;
  478. line-height: 30px;
  479. }
  480. .body-time-left1{
  481. height: 22px;
  482. font-size: 16px;
  483. font-family: PingFangSC-Medium, PingFang SC;
  484. font-weight: 500;
  485. color: #104990;
  486. line-height: 22px;
  487. position: absolute;
  488. left: 24.8%;
  489. top: 1px;
  490. }
  491. .body-time-left11{
  492. height: 22px;
  493. font-size: 16px;
  494. font-family: PingFangSC-Medium, PingFang SC;
  495. font-weight: 500;
  496. color: #104990;
  497. line-height: 22px;
  498. position: absolute;
  499. left: 24.8%;
  500. top: 1px;
  501. }
  502. .body-time-left2{
  503. height: 22px;
  504. font-size: 16px;
  505. font-family: PingFangSC-Medium, PingFang SC;
  506. font-weight: 500;
  507. color: #104990;
  508. line-height: 22px;
  509. position: absolute;
  510. left: 24.8%;
  511. top: 195px;
  512. }
  513. .body-time-left22{
  514. height: 22px;
  515. font-size: 16px;
  516. font-family: PingFangSC-Medium, PingFang SC;
  517. font-weight: 500;
  518. color: #104990;
  519. line-height: 22px;
  520. position: absolute;
  521. left: 24.8%;
  522. top: 230px;
  523. }
  524. .body-time-left3{
  525. height: 22px;
  526. font-size: 16px;
  527. font-family: PingFangSC-Medium, PingFang SC;
  528. font-weight: 500;
  529. color: #104990;
  530. line-height: 22px;
  531. position: absolute;
  532. left: 24.8%;
  533. top: 300px;
  534. }
  535. .body-time-left33{
  536. height: 22px;
  537. font-size: 16px;
  538. font-family: PingFangSC-Medium, PingFang SC;
  539. font-weight: 500;
  540. color: #104990;
  541. line-height: 22px;
  542. position: absolute;
  543. left: 24.8%;
  544. top: 370px;
  545. }
  546. .ui-ul-li{
  547. display: inline-block;
  548. width: 98%;
  549. height: 260px;
  550. margin-left: 1%;
  551. margin: 10px 0;
  552. border: 1px solid #9CC7FA;
  553. }
  554. .user-text-ui{
  555. width: 197px;
  556. height:40px;
  557. overflow: hidden;
  558. text-overflow: ellipsis;
  559. display: -webkit-box;
  560. -webkit-line-clamp: 2;
  561. -webkit-box-orient: vertical;
  562. text-align: center;
  563. font-size: 14px;
  564. font-family: PingFangSC-Regular, PingFang SC;
  565. font-weight: 400;
  566. color: #333333;
  567. }
  568. .user-top-title-ui{
  569. width: 98%;
  570. overflow: hidden;
  571. text-overflow: ellipsis;
  572. display: -webkit-box;
  573. -webkit-line-clamp: 2;
  574. -webkit-box-orient: vertical;
  575. line-height: 20px;
  576. margin-top: 20px;
  577. margin-bottom: 6px;
  578. font-size: 14px;
  579. font-family: PingFangSC-Medium, PingFang SC;
  580. font-weight: 600;
  581. color: #333333;
  582. margin-left: 50%;
  583. transform: translateX(-50%);
  584. }
  585. .user-center-ui{
  586. width: 100%;
  587. height: 180px;
  588. line-height: 20px;
  589. overflow: auto;
  590. font-size: 14px;
  591. font-family: PingFangSC-Regular, PingFang SC;
  592. font-weight: 400;
  593. color: #333333;
  594. }
  595. /deep/.el-timeline-item__timestamp {
  596. height: 22px;
  597. font-size: 18px;
  598. font-family: PingFangSC-Medium, PingFang SC;
  599. font-weight: 600;
  600. color: #104990;
  601. line-height: 22px;
  602. }
  603. /deep/.el-timeline-item__tail {
  604. position: absolute;
  605. left: 4px;
  606. height: 265%;
  607. border-left: 2px solid #4772a7;
  608. }
  609. /deep/.el-timeline-item__node {
  610. position: absolute;
  611. background-color: #104990;
  612. border-radius: 50%;
  613. display: -webkit-box;
  614. display: -ms-flexbox;
  615. display: flex;
  616. -webkit-box-pack: center;
  617. -ms-flex-pack: center;
  618. justify-content: center;
  619. -webkit-box-align: center;
  620. -ms-flex-align: center;
  621. align-items: center;
  622. }
  623. ::-webkit-scrollbar {
  624. width: 4px;
  625. height: 4px;
  626. }
  627. ::-webkit-scrollbar-thumb {
  628. border-radius: 5px;
  629. -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  630. background-color: #99a9bf;
  631. }
  632. ::-webkit-scrollbar-track {
  633. -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  634. border-radius: 5px;
  635. background-color: #d3dce6;
  636. }
  637. </style>