android-cloud-H5/pages/introductionCloudPhone/articleDetails.vue

<!-- @notes: 页面于2024-11-17 由判断是否为app [isShowApp] 进行背景颜色判断的需求取消,统一换成白色背景. html上直接写 布尔值的均由 [isShowApp] 替换-->
<template>
  <layoutBack :isGoBack='false'>
    <layout title='福利社区文章' :isRouterBack="true">
      <!-- <div :class="isShowApp?'article':'article article-white'"> -->
      <div class="article" :class="{'article-white': !false}">
        <div class="article-title" v-if="isShowApp">
          福利社区文章
        </div>

        <div class="article-title2">
          {{ title }}
        </div>

        <div class="article-content" v-html="content">
        </div>

      </div>
    </layout>
  </layoutBack>
</template>
  
  <script>
import layout from './components/layout';
import layoutBack from '@/components/layout';
export default {
  auth: false,
  name: 'articleDetails',
  head: {
    title: '福利社区文章',
  },
  data() {
    return {
      title: '',
      content: '',
    };
  },
  components: { layout, layoutBack },
  created() {
    if (this.$route.query.id) {
      this.evantDetails(this.$route.query.id)
    }

  },
  computed: {
    isShowApp() {
      // 是否是APP
      const isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
      const isAndroid = this.$userAgent.isAndroid;
      const isIos = this.$userAgent.isIos;
      const isWx = this.$userAgent.isWx;
      // 如果是App并且是安卓，就不显示头部， ios显示
      // 如果微信小程序环境的，也不显示头部
      // 如果是h5 就显示头部
      let bool = false;
      bool = isApp && (isAndroid || isIos) ? true : false;
      return bool;
    },
  },
  methods: {
    async evantDetails(id) {
      await this.$axios.$get('/activity/v1/evant/information/get/evantDetails/' + id).then((res) => {
        // console.log(res)
        this.title = res.data.title;
        this.content = res.data.content;
      });
    }
  },
};
  </script>
  
  <style lang="less" scoped>
.article {
  height: 100%;
  box-sizing: border-box;
  .article-title {
    margin-left: 10px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #cfd1d4;
    line-height: 25px;
    text-align: left;
    font-style: normal;
    margin-bottom: 24px;
  }

  .article-title2 {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
    line-height: 30px;
    text-align: left;
    font-style: normal;
  }

  .article-content {
    margin-top: 24px;
    color: #ffffff;
    ::v-deep img{
      max-width: 100% !important;
      height: auto !important;
    }
  }
}

.article-white {
  .article-title {
    color: #0a132b;
  }

  .article-title2 {
    color: #0a132b;
  }

  .article-content {
    color: #0a132b;
  }
}
</style>