<template>
  <div id="thinktank">
    <div class="left-part">
      <div class="left-part-top">
        <div class="left-part-top-left">
          <div
            class="left-part-top-left-title"
            v-text="news_info[0].title"
          ></div>
          <div class="left-part-top-left-from">
            <span v-text="news_info[0].time"></span>
            <span v-text="news_info[0].organization"></span>
          </div>
          <div
            class="left-part-top-left-content"
            v-html="news_info[0].text"
          ></div>
        </div>
        <div class="left-part-top-right">
          <div
            class="left-part-top-left-title"
            v-text="news_info[1].title"
          ></div>
          <div class="left-part-top-left-from">
            <span v-text="news_info[1].time"></span>
            <span v-text="news_info[1].organization"></span>
          </div>
          <div
            class="left-part-top-left-content"
            v-html="news_info[1].text"
          ></div>
        </div>
      </div>
      <div class="left-part-line"></div>
      <div class="left-part-bottom">
        <div class="left-part-bottom-left">
          <li v-for="(item, index) in message">
            <img class="figure" :src="item.img" alt="" />
            <div>
              <span v-text="item.name"></span><br />
              <span v-text="item.text"></span><br />
              <span>
                <i class="el-icon-star-on"></i>
                <span v-text="item.feeling"></span>
              </span>
            </div>
          </li>
        </div>
        <div class="left-part-bottom-right">
          <li v-for="(item, index) in message1">
            <img class="figure" :src="item.img" alt="" />
            <div>
              <span v-text="item.name"></span><br />
              <span v-text="item.text"></span><br />
              <span>
                <i class="el-icon-star-on"></i>
                <span v-text="item.feeling"></span>
              </span>
            </div>
          </li>
        </div>
      </div>
    </div>
    <div class="right-part">
      <img class="back" :src="back" @click="goBack" />
      <div class="right-part-img">
        <img :src="organization.img" alt="" />
      </div>
      <div class="right-part-title" v-text="organization.title"></div>
      <div class="right-part-link" v-text="organization.link"></div>
      <div class="right-part-publication">
        <span>出版物：</span>
        <span v-text="organization.publication"></span>
      </div>
      <div class="right-part-characteristic">
        <span>特点：</span>
        <span v-text="organization.characteristic"></span>
      </div>
      <div class="right-part-contributor">
        <span>贡献者：</span>
        <span v-text="organization.contributor"></span>
      </div>
      <div class="right-part-address">
        <i class="el-icon-location-outline"></i>
        <span v-text="organization.address"></span>
      </div>
      <div
        class="right-part-introduction"
        v-text="organization.introduction"
      ></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#thinktank {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 20px;
  display: -webkit-box;
  box-sizing: border-box;
  .left-part {
    width: calc(80% - 10px);
    height: 97%;
    background: url(../../assets/img/yqjc/011.png) no-repeat;
    background-size: 100% 100%;
    .left-part-top {
      width: 100%;
      height: 66%;
      display: -webkit-box;
      .left-part-top-left,
      .left-part-top-right {
        width: 50%;
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
        .left-part-top-left-title,
        .left-part-top-right-title {
          width: 100%;
          height: 30px;
          line-height: 30px;
          font-size: 19px;
          font-weight: 600;
          text-align: center;
        }
        .left-part-top-left-from,
        .left-part-top-right-from {
          width: 100%;
          height: 30px;
          line-height: 30px;
          color: #9b9da0;
        }
        .left-part-top-left-content,
        .left-part-top-right-content {
          width: 100%;
          height: calc(100% - 60px);
          overflow-y: auto;
        }
      }
    }
    .left-part-line {
      width: 100%;
      height: 20px;
      background-image: url(../../assets/img/yqjc/03.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .left-part-bottom {
      width: 100%;
      height: calc(34% - 20px);
      display: -webkit-box;
      .left-part-bottom-left {
        width: 40%;
        height: 100%;
        margin-left: 5%;
        padding: 10px;
        color: black;
        overflow-y: auto;
        background-color: white;
        box-sizing: border-box;
      }
      .left-part-bottom-right {
        width: 40%;
        height: 100%;
        padding: 10px;
        margin-left: 10%;
        color: black;
        overflow-y: auto;
        background-color: white;
        box-sizing: border-box;
      }
      li {
        width: 100%;
        height: 70px;
        border: 1px solid #ddd;
        display: -webkit-box;
        .figure {
          width: 40px;
          height: 40px;
          margin-top: 15px;
          margin-left: 15px;
          margin-right: 15px;
        }
      }
    }
  }
  .right-part {
    width: 20%;
    height: 97%;
    margin-left: 10px;
    text-align: center;
    background: url(../../assets/img/yqjc/012.png) no-repeat;
    background-size: 100% 100%;
    .back {
      width: 40px;
      height: 40px;
      position: absolute;
      top: 11%;
      right: 80px;
      cursor: pointer;
    }
    .right-part-img {
      width: 100%;
      height: 150px;
      margin-top: 16%;
      img {
        width: 25%;
      }
    }
    .right-part-title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 30px;
      text-align: center;
    }
    .right-part-link,
    .right-part-publication,
    .right-part-characteristic,
    .right-part-contributor,
    .right-part-address {
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
    .right-part-introduction {
      width: 100%;
      height: calc(84% - 340px);
      padding: 10px;
      letter-spacing: 4px;
      text-align: left;
      box-sizing: border-box;
      overflow-y: auto;
    }
  }
}
</style>

<script>
import img1 from "../../assets/img/yqjc/06.png";
import img2 from "../../assets/img/yqjc/figure.jpg";
import back from "../../assets/img/setting/back.png";
export default {
  name: "thinktank",
  data() {
    return {
      back: back,
      img1: img1,
      news_info: [
        {
          title: "China’s Wind Curtailment Issues and U.S. Experience",
          time: "2018-03-05 08:00",
          organization: "Brookings Insitiution",
          text: `Editor's note:China is undergoing an unprecedented energy transition in history. As coal consumption peaked in 2013, China is committed to developing clean energy, gradually replacing coal, and promoting future development with low-carbon energy. The Tsinghua-Brookings Center for Public Policy Research will launch the "China Energy Transition" series in due course, aiming to deeply explore the political and economic prospects of power reform, fuel selection, energy and climate policies, and other challenges faced in the transition process. <br>
          This article is one of the series.Follow With the rapid development of clean energy, China has successfully cultivated the world's largest renewable energy equipment manufacturing industry and has become the country with the largest total renewable energy installed capacity. As an important part of the national strategy to address climate change and air pollution, renewable energy is accelerating the replacement of coal, a carbon-intensive and pollution-intensive fuel: as of 2016, China's renewable energy investment accounted for one-third of global renewable energy investment One, the total investment has increased by nearly 100 times over 2005. For more than two decades, with the continuous growth of investment, the proportion of China's renewable energy consumption in total energy consumption has steadily increased, and in 2016 it was about 11%. <br>
          However, the curtailment of renewable energy is becoming part of the "new normal". From 2010 to 2016, the total curtailment of wind curtailment reached 150 million MWh, and the curtailment rate was as high as 16%. During these six years, the opportunity cost of wind curtailment in China’s power industry was as high as US$1.2 billion, equivalent to an additional consumption of 48 million tons of raw coal and an additional emission of 134 million tons of carbon dioxide, equivalent to 1.5% of China’s total emissions in 2016, or Equivalent to the carbon emissions of the entire country of Algeria.`,
        },
        {
          title: "中国弃风问题与美国经验",
          time: "2018-03-05 08:00",
          organization: "布鲁金斯学会",
          text: `编者按：中国正经历史无前例的能源转型。随着煤炭消费已于2013年达峰，中国正致力于发展清洁能源、逐步替代煤炭，并以低碳能源推动未来发展。清华－布鲁金斯公共政策研究中心适时推出“中国能源转型”系列，旨在深入探讨电力改革的政治经济前景、燃料选择、能源与气候政策以及其它在转型过程中所面临的挑战。本文为该系列之一。<br>
          随着清洁能源的高速发展，中国成功培育了世界上规模最大的可再生能源装备制造业，并成为可再生能源装机总量最多的国家。作为国家战略中应对气候变化和空气污染的重要组成部分，可再生能源正在加速替代煤炭这一碳密集和污染密集型燃料：截至2016年，中国可再生能源投资占全球可再生能源投资的三分之一，投资总额比2005年增长近100倍。二十多年来，随着投资的持续增长，中国可再生能源消费占能源消耗总量的比重稳步上升，2016年约为11％。<br>
          然而，可再生能源的限电现象正成为“新常态”的一部分。2010年至2016年，弃风限电总量达到1.5亿MWh，弃风率高达16％。而在此六年间中国电力行业因弃风现象所造成机会成本高达12亿美元，相当于额外消耗原煤4800万吨，额外排放二氧化碳1.34亿吨，相当于2016年中国总排放量的1.5％，或相当于阿尔及利亚整个国家的碳排放量。`,
        },
      ],
      message: [
        {
          img: img2,
          name: "jack",
          text: "Good writing",
          feeling: 2,
        },
        {
          img: img2,
          name: "jack",
          text: "Good writing",
          feeling: 2,
        },
        {
          img: img2,
          name: "jack",
          text: "Good writing",
          feeling: 2,
        },
        {
          img: img2,
          name: "jack",
          text: "Good writing",
          feeling: 2,
        },
        {
          img: img2,
          name: "jack",
          text: "Good writing",
          feeling: 2,
        },
        {
          img: img2,
          name: "jack",
          text: "Good writing",
          feeling: 2,
        },
        {
          img: img2,
          name: "jack",
          text: "Good writing",
          feeling: 2,
        },
        {
          img: img2,
          name: "jack",
          text: "Good writing",
          feeling: 2,
        },
        {
          img: img2,
          name: "jack",
          text: "Good writing",
          feeling: 2,
        },
      ],
      message1: [
        {
          img: img2,
          name: "jack",
          text: "Good writing",
          feeling: 2,
        },
        {
          img: img2,
          name: "jack",
          text: "Good writing",
          feeling: 2,
        },
        {
          img: img2,
          name: "jack",
          text: "Good writing",
          feeling: 2,
        },
        {
          img: img2,
          name: "jack",
          text: "Good writing",
          feeling: 2,
        },
        {
          img: img2,
          name: "jack",
          text: "Good writing",
          feeling: 2,
        },
        {
          img: img2,
          name: "jack",
          text: "Good writing",
          feeling: 2,
        },
        {
          img: img2,
          name: "jack",
          text: "Good writing",
          feeling: 2,
        },
        {
          img: img2,
          name: "jack",
          text: "Good writing",
          feeling: 2,
        },
        {
          img: img2,
          name: "jack",
          text: "Good writing",
          feeling: 2,
        },
      ],
      organization: {
        img: img1,
        title: "布鲁金斯学会",
        link: "http://www.brookings.edu/",
        publication: "92",
        characteristic: "2",
        contributor: "176",
        address: "LONDON",
        introduction:
          "布鲁金斯学会一向被誉为最有影响力、最值得借鉴和最受信任的智库，总部在美国首都华盛顿特区，是一家研究公共政策的非赢利组织。其宗旨是开展高质量的独立研究，并据此提出具有创新精神和实用性的政策建议，以达到三个目标：捍卫美国民主；确保所有美国人获得经济繁荣、加强社会保障、维护公共安全带来的机遇；推进一个更加开放、安全、繁荣和合作的国际社会。",
      },
    };
  },
  methods:{
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>