dev/dcp-web-gate/src_old/views/conferenceServices/ConferenceViewpointList.vue

<template>
  <div class="autoBox container-box">
      <div class="content-box">
        <div class="confrence-item" v-if="viewpointData.length">
            <div class="confrence-item-header">{{$t("common.Speakers")}}</div>
            <div class="confrence-item-body">
                <ul class="confrence-viewpoint-list">
                    <li v-for="(item, i) in viewpointData" :key="i">
                        <div
                        v-if="item.list.length"
                        :style="{backgroundImage: 'url(./api/file/pub/'+item.list[0].attachmentSavePath+')', backgroundSize: '100% 100%'}"
                        ></div>
                        <div v-if="item.list.length" @click="toView('ConfrenceViewpoint', item)" style="cursor: pointer;">
                        <div class="confrence-viewpoint-text">
                            <p>{{lang=='en'? item.ideaContentEn: item.ideaContent}}</p>
                        </div>
                        <p class="guest-info">
                            <span>{{lang=='en'? item.positionEn: item.position}}</span>
                            <span>{{lang=='en'? item.speakGuestEn: item.speakGuest}}</span>
                        </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
      </div>
  </div>
</template>

<script>
import { getConfrenceDetail } from "@/api/meeting/meetingOutInfo";
export default {
    data(){
        return {
            viewpointData: []
        }
    },
    mounted(){
        getConfrenceDetail(this.$route.params.key).then((res) => {
            this.viewpointData = res.data.meetingOutInfo.guandian;
        });
    },
    methods: {
        toView(router, json) {
            this.$router.push({ name: router, params: { key: json } });
        },
    }
}
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.container-box {
  margin: 10px auto;
  background: #fff;
  padding: 0 20px;
  min-height: calc( 100vh - 420px );
}
.content-box {
  position: relative;
  padding: 40px 0;
}
.confrence-item-header {
  line-height: 28px;
  font-size: 28px;
  font-weight: bold;
  margin: 30px 0;
}
.confrence-viewpoint-list{
  display: flex;
  flex-wrap: wrap;
}
.confrence-viewpoint-list li{
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: inline-block;
  display: flex;
}
.confrence-viewpoint-list li > div:first-child{
  width: 300px;
  height: 200px;
}
.confrence-viewpoint-list li > div:last-child{
  flex: 1;
  margin-left: 20px;
  height: 300px;
  background:#e2eff9;
  padding: 0 60px;
}
.confrence-viewpoint-list .confrence-viewpoint-text{
  height: 200px;
  line-height: 28px;
  padding: 20px 0;
  margin-top: 20px;
  border-top: 1px solid #79a2d8;
  border-bottom: 1px solid #79a2d8;
}
.confrence-viewpoint-list .confrence-viewpoint-text p{
  margin: 0;
  height: 116px;
  overflow: hidden;
  padding: 0 10px;
}
.confrence-viewpoint-list .guest-info span:last-child{
  margin-left: 20px;
  font-size: 20px;
  font-weight: bold;
}
</style>