山东大学项目实训（十）——PolyDetector：多模态的医疗图像辅助诊断系统

将医院官网与医生的功能分开之后，为进一步丰富前端，在查看了一些官网的内容后发现他们都会有“新闻资讯”页面，因此下一步要为我们的医院官网安排一个新的前端页面。

页面的效果如下：

为实现该页面，我们使用Vue.js构建。页面主要由HTML模板和CSS样式组成。

HTML模板部分：

• 结构：页面的主要结构是一个 div.main_content 容器，内部包含 div.article_right 用于显示文章内容。
• 标题：文章标题使用 h1.article_title 元素显示。
• 供稿信息：供稿者信息在 div.sub_tit 内展示，并包含浏览次数。
• 文章内容：主要内容位于 div.article_cont 中，包含多段文字和图片。

<template>
  <div class="main_content">
    <div class="article_right">  
      <div class="ask_area pd20 border">
        <h2 class="title_header"><span>技术引领</span></h2>
        <div class="Min mbt20">  
          <h1 class="article_title" style="font-size: 20px;">
            <font color="">避免开胸开腹 省医血管外科改制开窗-分支支架技术治疗累及内脏动脉分支的复杂胸腹主动脉疾病</font>
          </h1>  
          <div class="sub_tit"> 
            <span>供稿：血管外科</span>
            <span class="count" style="display: none;">浏览次数：
              <span id="ajax_div__GetArticleViewCount_0_31099_0_5443">822</span>
            </span>
          </div>
          <div class="article_cont" id="zoom" style="font-size: 15px; line-height: 22.5px;">
            <p style="text-indent: 2em; text-align: justify;">近期，山东第一医科大学附属省立医院...</p>
            <!-- More paragraphs and content here -->
            <p style="text-align:center">
              <img src="https://www.sph.com.cn/Sites/Uploaded/Image/2024/03/016384488482501567972692019.jpg" title="640 拷贝.jpg" style="text-align: center; text-wrap: wrap;">
            </p>
            <!-- More paragraphs and images here -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

CSS样式部分：

• 整体布局：.main_content 主要容器使用固定宽度和居中布局，同时添加了阴影和边框。
• 响应式设计：使用媒体查询（@media）根据屏幕宽度调整 .main_content 的宽度。
• 标题和内容样式：定义了标题、文章内容、供稿信息的样式，确保它们的字体、行高和对齐方式一致。
• 其他样式：使用了 .border, .pd20, .mbt20 等辅助类来统一处理内边距、外边距和边框。

<style scoped>
@media only screen and (max-width: 1366px) {
  .main_content {
    width: 720px; 
    padding: 10px;
  }
}

.main_content {
  margin: 0 auto;
  box-shadow: 1px 1px 10px #ddd;
  background: #fff;
  margin-top: 60px;
  border: 1px solid #ddd;
  width: 720px; 
  padding: 10px 20px; 
}

.article_right {
  float: right;
  padding-bottom: 10px;
  overflow: hidden;
}

.border {
  border: 1px solid #ededed;
  overflow: hidden;
}

.pd20 {
  padding: 10px 20px; 
}

h2.title_header {
  height: 65px;
  border-bottom: 2px solid #e6e6e6;
  font-size: 18px; 
  color: #333;
  font-family: "宋体";
  line-height: 1.5em; 
  font-weight: bold;
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

.mbt20 {
  margin: 20px 0;
}

.article_right .article_title {
  line-height: 1.5em;
  font-weight: normal;
  text-align: center;
  color: #003e7d;
  padding: 15px 0;
  font-family: '微软雅黑';
  font-size: 18px;
}

.sub_tit {
  text-align: center;
  padding: 10px 0;
  line-height: 25px;
  position: relative;
}

.article_right .article_cont {
  margin-top: 10px;
  padding-bottom: 20px;
}

p {
  font-size: 16px; 
  line-height: 1.5em; 
  text-align: justify;
  text-indent: 2em; 
}

* {
  padding: 0;
  margin: 0;
  list-style: none;
}

div {
  display: block;
  unicode-bidi: isolate;
}

@media only screen and (max-width: 1366px) {
  .article_right {
    width: 81%;
  }
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

h2 {
  display: block;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  unicode-bidi: isolate;
}

element.style {
  font-size: 20px;
}

h1 {
  display: block;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  unicode-bidi: isolate;
}

element.style {
  font-size: 15px;
  line-height: 22.5px;
}
</style>

页面的响应式设计使得内容在较小屏幕上也能良好呈现。同时，通过详细的 CSS 类和媒体查询，使页面在各种分辨率下保持一致性。