daikins/.svn/pristine/e1/e1f5364677aae1b99266516017010719cf1acc07.svn-base

<!-- 外部情报 > 情报详情 -->
<script setup lang="ts">
import AppBlock from '@/components/AppBlock copy.vue'
import AppNewsBox from '@/components/AppNewsBox.vue'
import DetailNews from './DetailNews.vue'
import { externalInfo } from '@/api/daikin/base'
import HomeHead from '@/views/home/components/HomeHead.vue'
import { useDate } from '@/views/home/hooks/useDate'
const { push } = useRouter()
const route = useRoute()
const { day, week } = useDate()


const SideNews = [
  { key: 'IntelligenceOutside', name: '社外情报' },
  { key: 'IntelligenceWithin', name: '社内情报' },
]

const state = ref<any>({})
async function getData() {
  const { id } = route.params
  if (!id) return

  const { data } = await externalInfo(id as string)
  console.log()
  data.tagColor = data.tag === '紧急' ? '#e60e0e' : '#2cba06'

  data.content = unescapeHTML(data.content)
  state.value = data
  console.log(state);
  
}
function unescapeHTML(html: string) {
  const doc = new DOMParser().parseFromString(html, 'text/html');
  return doc.documentElement.textContent;
}
getData()
</script>

<template>

  <div class="page">
    <HomeHead class="top">
        <!-- <template #content>
            <HomeHeadSearch />
        </template> -->
    </HomeHead>
    <div style="margin-left: 50px;width: 400px;margin-top: -50px;">
      <img src="../images/ͼƬ1.png" alt="">
      <div>
        <span style="font-size: 20px;margin-top: -50px;">大金空调调达本部HOMEPAGE</span>
        <el-button style="font-size: 18px;margin-left: 5px" type="primary" round @click="push({name:'external'})"><img src="../images/fanh.png" alt="">返回</el-button>
      </div>
    </div>
   

    <!-- <div class="h-full  flex  ml30px">
        <div class="font-600 flex items-end mt30px">
            <div class="text-36px">详情</div>
            <div class="text-18px ml40px mr25px">{{ day }}</div>
            <div class="text-18px">{{ week }}</div>
        </div>
    </div> -->
    <div class="page-wrap  h-934px mt20px" style="grid-template-columns: 1fr">
      <div class="page-main" style="padding: 0 20px;">
        <AppBlock class="h-full">
          <div class="overflow-y-auto h-full">
            <div class="px46px py40px">
              <DetailNews
                :title="state.title"
                :content="state.content"
                :publishTime="state.publishTime"
                :tag="state.tag"
                :tagColor="state.tagColor"
                :source="state.source"
              />
            </div>
          </div>
        </AppBlock>
      </div>
      <!-- <div class="page-side" v-for="item in SideNews" :key="item.key">
        <AppBlock class="h-400px">
          <div class="box h-full">
            <div class="box-title flex items-center" @click="push({ name: item.key })">
              <span class="flex-1">{{ item.name }}</span>
              <span>❯</span>
            </div>
            <div class="box-content overflow-y-auto px22px">
              <div class="py13px line" v-for="i in 15" :key="i">
                <AppNewsBox
                  class="!lh-2em"
                  labelText="New"
                  labelColor="#2cba06"
                  text="FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开崭新的未来变化开e 创崭新的未来"
                  date="2023-05-22"
                />
              </div>
            </div>
          </div>
        </AppBlock>
      </div> -->
    </div>

</div>
</template>

<style scoped lang="less">
.back{
  position: absolute;
  top: 5px;
  left: 5px;
  color: #fff;
  // z-index: 500;

  // font-weight: bold;
  text-align: center;
  justify-content: center;
  // display: flex;
  font-size: 14px;
  
}
.top {
    right: 30px;
    top: 0px;
}
.page {
  width: 100%;
  // height: 100px;
  font-family: 'PingFang SC';
  user-select: none;
  background: 0;
  // background-image: url('@/assets/images/bg.jpg');
  // background-color: #000;
  // background-position: 0 0;
  // background-repeat: no-repeat;
  // background-size: cover;
  color: #fff;

  line-height: 1;
    .page-wrap {
      display: grid;
      grid-template-columns: 1fr 314px;
      grid-template-rows: repeat(2, 1fr);
      grid-column-gap: 30px;
      grid-row-gap: 30px;

      .page-main {
        height: 830px;
        grid-area: 1 / 1 / 3 / 2;
      }
      .page-side {
        height: 100%;
        grid-area: 1 / 2 / 2 / 3;
        &:last-of-type {
          height: 300px;
          grid-area: 2 / 2 / 3 / 3;
        }
      }
    }


}
.main {
  background-image: url('@/assets/images/bg-rs-main.svg');
  background-position: 0 0;
  background-repeat: repeat-x;
  background-size: auto;
}

.box {
  --title-h: 58px;

  border: 0;
  .box-title {
    height: var(--title-h);
    color: #fff;
    background-color: #537deb;
    font-size: 18px;
    font-weight: 600;
    padding: 0 24px;
    cursor: pointer;
  }
  .box-content {
    height: 100%;
    max-height: calc(100% - var(--title-h));
  }
}
.line {
  border-bottom: 1px solid #eef3fb;
}
</style>