<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-gray-50">
    <div
      class="bg-[url('@/assets/imgs/tyjb-bg.png')] bg-cover bg-center h-[240px] flex items-center justify-center text-[65px] font-bold text-white"
    >
      太原市互联网应急指挥和举报中心
    </div>
    <div
      class="mt-5 w-[1250px] m-auto flex flex-col items-center justify-center"
    >
      <div class="con">
        <div class="con1">
          <ul>
            <li>
              <h4>举报须知</h4>
            </li>
            <li>
              <h5>
                省互联网信息办公室开通“山西省违法和不良信息举报通道”，欢迎广大网民依法如实举报。为了保证您的举报尽快得到受理，请认真阅读举报须知，了解举报受理范围。点击“接受”进入举报页面，点击“不接受”退出举报。
              </h5>
            </li>
            <div class="line1"></div>
            <br />
            <li
              class="bg-[#00000011]"
              style="padding-top: 20px; padding-bottom: 10px"
            >
              <a :href="inject('VITE_12377_URL')" target="_blank"
                ><img
                  src="https://www.sxgov.cn/templateRes/202312/08/50291/50043/logo12377.jpg"
              /></a>
              <h1>
                <a :href="inject('VITE_12377_URL')" target="_blank"
                  >中央网信办举报中心官网违法和不良信息举报入口</a
                >
              </h1>
            </li>
            <br />
            <li
              class="bg-[#00000011]"
              style="padding-top: 20px; padding-bottom: 10px"
            >
              <a :href="inject('VITE_SXGOV_URL')" target="_blank"
                ><img
                  src="//www.sxgov.cn/templateRes/202301/05/50196/50122/jubaosx21.jpg"
              /></a>
              <h1>
                <a :href="inject('VITE_SXGOV_URL')" target="_blank"
                  >山西省互联网应急指挥和举报中心举报入口</a
                >
              </h1>
            </li>
            <br />
            <li
              class="bg-[#00000011]"
              style="padding-top: 0px; padding-bottom: 10px"
            >
              <h1 class="cursor-pointer">
                <!-- <a
                  href="http://oa.wangxinban.cn/jb/#/Home/Home?agencyID=52340bbb-f782-4886-02c4-08d9605acd8c&agencyName=太原市网信"
                  target="_blank"
                  >太原市互联网违法和不良信息举报平台</a
                > -->
                <a target="_blank" @click="handleClick"
                  >太原市互联网违法和不良信息举报平台</a
                >
              </h1>
              <h3>太原市互联网举报电话：{{ inject("VITE_PHONE") }}</h3>
              <h3>太原市互联网举报邮箱：{{ inject("VITE_EMAIL") }}</h3>
              <el-button
                class="botton"
                type="primary"
                size="big"
                @click="handleClick"
              >
                我要举报
              </el-button>
            </li>
            <!-- <li>
              <h3>
                举报类别：政治类、暴恐类、诈骗类、色情类、低俗类、赌博类、侵权类、谣言类、其他类
              </h3>
            </li> -->
          </ul>
        </div>
        <ul>
          <li><h1>一、受理举报范围</h1></li>
          <li>山西属地网站中出现的以下信息：</li>
          <li>1、反对宪法所确定的基本原则的；</li>
          <li>2、危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</li>
          <li>3、损害国家荣誉和利益的；</li>
          <li>4、煽动民族仇恨、民族歧视，破坏民族团结的；</li>
          <li>5、破坏国家宗教政策，宣扬邪教和封建迷信的；</li>
          <li>6、散布谣言，扰乱社会秩序，破坏社会稳定的；</li>
          <li>7、散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</li>
          <li>8、侮辱或者诽谤他人，侵害他人合法权益的；</li>
          <li>9、含有法律、行政法规禁止的其他内容的。</li>
          <li><h1>二、注意事项</h1></li>
          <li>1、请您根据受理举报范围进行举报。</li>
          <li>2、请您自觉遵守中华人民共和国宪法和法律。</li>
          <li>
            3、举报应当实事求是，应对举报内容的真实性、客观性负责，不得捏造事实、制造假证、诬告陷害他人。
          </li>
          <li>4、请如实提供违法违规信息（附链接地址、截图等）。</li>
          <li>
            5、提倡实名举报，请留下有效联系方式，以便工作人员和您取得联系。
          </li>
          <li>6、请不要重复举报。</li>
          <!-- <li>7、举报电话：0351-3902004，0351-3902046</li> -->
          <!-- <li>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;举报邮箱：sxwzblxxjb @ 126.com，sxhhtd
            @ 126.com
          </li> -->
        </ul>
      </div>

      <!-- <div id="footer" class="iframe"> -->
      <!-- <Footer></Footer> -->
      <!-- <Footer class="w-[100%]"></Footer> -->

      <!-- <iframe
          src="https://topic.sxgov.cn/base.htm"
          remote="remote"
          name="top"
          width="100%"
          height="100%"
          scrolling="no"
          frameborder="0"
        ></iframe> -->
      <!-- </div> -->
    </div>
    <Footer class="w-[100%] mt-10"></Footer>
  </div>
</template>

<script lang="ts" setup>
// import { ElButton, ElIcon } from "element-plus";
// import { Phone, Message, ArrowRight } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { inject } from "vue";
import Footer from "@/components/footer.vue";

const router = useRouter();

function handleClick() {
  const jbRouter = router.resolve({ name: "tysubmit" }).href;
  window.open(jbRouter, "_blank");
}
</script>

<style scoped>
.min-h-screen {
  min-height: 1024px;
}
.con {
  width: 1050px;
  margin: 0px auto;
  height: auto;
  padding-bottom: 10px;
  box-shadow: 0px 0px 9.9px 0.1px rgba(5, 157, 254, 0.32);
}
.con1 {
  width: 1050px;
  margin: 0 auto;
  text-align: center;
  padding-top: 5px;
}
.con1 ul {
  text-align: center;
}

.con ul {
  padding-top: 20px;
  padding-left: 30px;
  padding-right: 30px;
}

.con1 h4 {
  font-size: 24px;
  color: #ca0000;
  line-height: 280%;
  font-weight: bold;
}
.con1 h5 {
  font-size: 18px;
  line-height: 220%;
  text-align: left;
  text-indent: 2em;
  color: #000;
  font-weight: bold;
}

.line1 {
  border-bottom: 1px solid rgba(5, 157, 254, 0.56);
  margin: 20px auto;
}
.con1 li {
  text-align: center;
  line-height: 180%;
  padding: 0;
  margin: 0;
}
.con li {
  font-size: 18px;
  line-height: 240%;
  text-indent: 2em;
  list-style: none;
}
.con1 h1 {
  font-size: 18px;
  color: #ca0000;
  padding: 0;
  margin: 0;
  line-height: 180%;
}
.con1 h1 a {
  color: #ca0000;
  font-weight: bold;
}

.con1 h2 {
  font-size: 18px;
  color: #ca0000;
}
.con1 h2 a {
  color: #ca0000;
  font-weight: bold;
}
.con1 li {
  text-align: center;
  line-height: 180%;
  padding: 0;
  margin: 0;
}
.con1 h3 {
  font-size: 18px;
  color: #ca0000;
  font-weight: normal;
}
.con h1 {
  font-size: 20px;
  font-weight: bold;
  padding-top: 10px;
}

.con ul {
  padding-top: 20px;
  padding-left: 30px;
  padding-right: 30px;
  color: #000;
}

.con li {
  font-size: 18px;
  line-height: 240%;
  /* text-indent: 2em; */
  /* list-style: none; */
}
.botton {
  width: 150px;
  padding: 8px 10px;
  border-radius: 30px;
  box-shadow: 3px 3px 3px #909090;
  margin: 10px auto;
  background: linear-gradient(0deg, #2975c7, #58a6ee);
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
#footer {
  width: 100vh;
  /* height: 200px; */
  text-align: center;
  margin: 0px auto;
  clear: both;
  background-color: #ffffff;
  margin-top: 40px;
}
/* iframe {
  overflow-clip-margin: content-box !important;
  overflow: clip !important;
  border-width: 0px;
  border-style: inset;
  border-color: initial;
  border-image: initial;
} */
</style>
