activity/src/view/AEROSPACE2023/page4.vue

<template>
  <skeleton title="活动安排" titleLine="">
    <div style="margin-top: 0;" class="bg bg4 animate__animated animate__backInUp">
      <p class="duanluo">时间：8月22日 15:00-16:10</p>
      <p class="duanluo">地点：西安航天国际会议中心东方红会议厅</p>
      <p class="duanluo">规模：230人</p>
    </div>
    <div class="bg bg4 animate__animated animate__backInUp">
      <p class="duanluo">会议议程</p>
    </div>
    <div class="link bg4 animate__animated animate__backInUp" v-for="(item, index) in list" :key="index">
      <div class="link_icon"></div>
      <p class="duanluo" v-text="item.key"></p>
      <p class="duanluo" v-text="item.value"></p>
    </div>
  </skeleton>
</template>
<script setup>
import skeleton from './skeleton.vue';
const list = [
    {
        key: '15:00 - 15:05',
        value: '阎良区（航空基地）领导致辞'
    },
    {
        key: '15:05 - 15:10',
        value: '省商务厅领导致辞'
    },
    {
        key: '15:10 - 15:30',
        value: '阎良区（航空基地）、航天基地投资环境推介'
    },
    {
        key: '15:30 - 15:50',
        value: '阎良区（航空基地）、航天基地区域资源发布'
    },
    {
        key: '15:50 - 16:00',
        value: '专家解读西安空天产业发展机遇'
    },
    {
        key: '16:00 - 16:10',
        value: '签约仪式'
    }
]
</script>
<style lang="scss">
// 动画库
@import url(./sass/animation.scss);
@import url(./sass/base.scss);
.bg4 {
  margin-top: 9px;
  margin-bottom: 9px;
  padding-top: 7px!important;
  padding-bottom: 7px!important;

  .duanluo {
    text-indent: 0 !important;
    line-height: 1.5em;
  }
}

.link {
  padding-left: 20px;
  font-size: 14px;

  .link_icon {
    width: 4.2px;
    height: 4.2px;
    background-color: #fff;
    float: left;
    transform: rotate(45deg);
    margin-left: -10px;
    margin-top: 0.5em;
    position: relative;

    &::after,
    &::before {
      content: ' ';
      display: block;
      width: 4.2px;
      height: 4.2px;
      position: absolute;
      background-color: rgba($color: #ffffff, $alpha: 0.5);
      top: 8px;
      left: 8px;
    }

    
    &::before {
      background-color: rgba($color: #ffffff, $alpha: 0.2);
      top: 16px;
      left: 16px;
    }
  }
}
</style>