部分页面

.postcssrc.js

@@ -1,10 +1,14 @@
 // https://github.com/michael-ciniawsky/postcss-load-config
 
 module.exports = {
-  "plugins": {
+  plugins: {
     "postcss-import": {},
     "postcss-url": {},
     // to edit target browsers: use "browserslist" field in package.json
-    "autoprefixer": {}
+    autoprefixer: {}
+  },
+  "postcss-pxtorem": {
+    rootValue: 37.5,
+    propList: ["*"]
   }
-}
+};

config/dev.env.js

@@ -1,13 +1,12 @@
 module.exports = {
   NODE_ENV: '"development"',
   ENV_CONFIG: '"dev"',
-  BASE_API:'"http://localhost:9535"',//'"http://api.test1.sgjyun.com"'
+  BASE_API: '"http://api.test1.sgjyun.com"'
   // BASE_API:'"http://api.scrm.kuyicloud.com"',//'"http://localhost:9534"'
-  
+
   //  SSO_HOST: '"https://testsso.sgjyun.com"',
   //  SRCM_HOST: '"http://test1.sgjyun.com"',
   //  XT_HOST: '"http://xt.test.sgjyun.com"',
   //  MIRCO_MALL_HOST: '"http://mall.test.sgjyun.com"',
   //  CDM_HOST: '"http://cdm.test.sgjyun.com"',
-}
-
+};

package.json

@@ -75,6 +75,7 @@
     "vue-i18n": "7.3.2",
     "vue-infinite-scroll": "^2.0.2",
     "vue-multiselect": "2.0.8",
+    "vue-photo-preview": "^1.1.3",
     "vue-router": "3.0.1",
     "vue-splitpane": "1.0.2",
     "vuedraggable": "^2.23.0",
@@ -115,6 +116,7 @@
     "portfinder": "1.0.13",
     "postcss-import": "11.0.0",
     "postcss-loader": "2.0.9",
+    "postcss-pxtorem": "^4.0.1",
     "postcss-url": "7.3.0",
     "rimraf": "2.6.2",
     "sass-loader": "^6.0.7",

src/assets/styles/common.css

@@ -0,0 +1,124 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

src/assets/styles/iconfont.css

@@ -0,0 +1,19 @@
+@font-face {
+  font-family: "iconfont"; /* project id 1470572 */
+  src: url("//at.alicdn.com/t/font_1470572_ccqfklrqbdb.eot");
+  src: url("//at.alicdn.com/t/font_1470572_ccqfklrqbdb.eot?#iefix")
+      format("embedded-opentype"),
+    url("//at.alicdn.com/t/font_1470572_ccqfklrqbdb.woff2") format("woff2"),
+    url("//at.alicdn.com/t/font_1470572_ccqfklrqbdb.woff") format("woff"),
+    url("//at.alicdn.com/t/font_1470572_ccqfklrqbdb.ttf") format("truetype"),
+    url("//at.alicdn.com/t/font_1470572_ccqfklrqbdb.svg#iconfont") format("svg");
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased; /*字体清除锯齿效果*/
+  -webkit-text-stroke-width: 0.2px; /*文本外边框大小*/
+  -moz-osx-font-smoothing: grayscale;
+}

src/assets/styles/mixin.scss

@@ -0,0 +1,27 @@
+@mixin border-top {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    content: "";
+    height: 1px;
+    background: #e0e0e0;
+  }
+}
+
+@mixin border-bottom {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    content: "";
+    height: 1px;
+    background: #e0e0e0;
+  }
+}

src/libs/rem.js

@@ -0,0 +1,20 @@
+const baseSize = 32;
+// 设置 rem 函数
+function setRem() {
+  const scale = document.documentElement.clientWidth / 750;
+  document.documentElement.style.fontSize =
+    baseSize * Math.min(scale, 2) + "px";
+  //   // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
+  //   let htmlWidth =
+  //     document.documentElement.clientWidth || document.body.clientWidth;
+  //   //得到html的Dom元素
+  //   let htmlDom = document.getElementsByTagName("html")[0];
+  //   //设置根元素字体大小
+  //   htmlDom.style.fontSize = htmlWidth / 23.4375 + "px";
+}
+// 初始化
+setRem();
+// 改变窗口大小时重新设置 rem
+window.onresize = function() {
+  setRem();
+};

src/main.js

@@ -1,69 +1,73 @@
-import Vue from 'vue'
+import Vue from "vue";
 
-import 'normalize.css/normalize.css'// A modern alternative to CSS resets
+import "normalize.css/normalize.css"; // A modern alternative to CSS resets
 
-import Element from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
-import '@/utils/directives.js'
-import '@/styles/index.scss' // global css
-import '@/styles/variables.scss' // global css
-import '@/assets/iconfont/iconfont.css'
-import '@/assets/icon/iconfont.css'
-import { Message } from 'element-ui'
-import App from './App'
-import router from './router'
-import store from './store'
-import { Base64 } from 'js-base64'
-import i18n from './lang' // Internationalization
-import './icons' // icon
-import './errorLog'// error log
+import "./assets/styles/iconfont.css";
+import "./assets/styles/common.css";
+
+import Element from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+import "@/utils/directives.js";
+import "@/styles/index.scss"; // global css
+import "@/styles/variables.scss"; // global css
+import "@/assets/iconfont/iconfont.css";
+import "@/assets/icon/iconfont.css";
+import { Message } from "element-ui";
+import App from "./App";
+import router from "./router";
+import store from "./store";
+import { Base64 } from "js-base64";
+import i18n from "./lang"; // Internationalization
+import "./icons"; // icon
+import "./errorLog"; // error log
 // import './permission' // permission control
-import './xt_permission'
+import "./xt_permission";
 // import './mock' // simulation data
 
-import * as filters from './filters' // global filters
-import 'swiper/dist/css/swiper.css'
-import 'swiper/dist/css/swiper.min.css';
+import * as filters from "./filters"; // global filters
+import "swiper/dist/css/swiper.css";
+import "swiper/dist/css/swiper.min.css";
 //引入mint-ui
-import Mint from 'mint-ui';
+import Mint from "mint-ui";
 Vue.use(Mint);
 
 //引入无线滚条
 
-import { read } from 'fs';
-import BaiduMap from 'vue-baidu-map'
+import { read } from "fs";
+import BaiduMap from "vue-baidu-map";
+
+import Viewer from "v-viewer";
+import "viewerjs/dist/viewer.css";
+
+import "./libs/rem.js";
 
-import Viewer from 'v-viewer'
-import 'viewerjs/dist/viewer.css'
- 
 //Vue.use(Viewer) 默认配置写法
 Vue.use(Viewer, {
-    defaultOptions: {
-        zIndex: 9999
-    }
-})
+  defaultOptions: {
+    zIndex: 9999
+  }
+});
 Vue.use(Element, {
-  size: 'medium', // set element-ui default size
+  size: "medium", // set element-ui default size
   i18n: (key, value) => i18n.t(key, value)
-})
+});
 
 // register global utility filters.
 Object.keys(filters).forEach(key => {
-  Vue.filter(key, filters[key])
-})
+  Vue.filter(key, filters[key]);
+});
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
-  el: '#app',
+  el: "#app",
   router,
   store,
   i18n,
   render: h => h(App)
-})
+});
 
-Vue.prototype.Base64 = require('js-base64').Base64
+Vue.prototype.Base64 = require("js-base64").Base64;
 Vue.use(BaiduMap, {
-  ak: 'YOUR_APP_KEY'
-})
-
+  ak: "YOUR_APP_KEY"
+});

src/router/index.js

@@ -1,20 +1,21 @@
-
-import Vue from 'vue'
-import Router from 'vue-router'
-Vue.use(Router)
+import Vue from "vue";
+import Router from "vue-router";
+import preview from "vue-photo-preview";
+import "vue-photo-preview/dist/skin.css";
+Vue.use(Router).use(preview);
 
 /* Layout */
-import Layout from '@/views/layout/Layout'
-
-import role from './modules/role'
-import article from './modules/article'
-import member from './modules/member'
-import org from './modules/org'
-import marketing_tool from './modules/marketing_tool'
-import system from './modules/system'
-import site from './modules/site'
-import kefu from './modules/kefu'
- 
+import Layout from "@/views/layout/Layout";
+
+import role from "./modules/role";
+import article from "./modules/article";
+import member from "./modules/member";
+import org from "./modules/org";
+import marketing_tool from "./modules/marketing_tool";
+import system from "./modules/system";
+import site from "./modules/site";
+import kefu from "./modules/kefu";
+
 /** note: submenu only apppear when children.length>=1
  *   detail see  https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
  **/
@@ -40,91 +41,129 @@ is_menu: false               加载路由时验证用的(即该路由是否要
     hidden: false                加载路由时验证用的，is_menu 为true时才有作用，为 true 时表示该路由需要进行权限验证
   }
 **/
-var _constant_router_map = [{
-  path: '/token/verify',
-  component: () => import('@/scrm_pages/index/verify_token'),
-  hidden: true
-},
-{
-  path: '/404',
-  component: () => import('@/views/errorPage/404'),
-  hidden: true
-},
-{
-  path: '/401',
-  component: () => import('@/views/errorPage/401'),
-  hidden: true
-},
-{
-  path: '/qrcode',
-  component: ()=>import('@/scrm_pages/micro/micro'),
-},
-
-// 医院介绍详情路由
-{
-  path: '/hospital',
-  component: () => import('@/scrm_pages/hospital/hospital'),
-  name: 'hospital',
-},
-
-// 科室介绍详情
-{
-  path: '/office',
-  component: ()=>import('@/scrm_pages/office/office'),
-  name:'office'
-},
-
-// 名医介绍详情
-{
-  path:'/doctor',
-  component: ()=>import('@/scrm_pages/doctor/doctor'),
-  name:'doctor',
-},
-// 单个医生介绍详情
-{
-  path:'/docdetail',
-  component: ()=>import('@/scrm_pages/doctor/docdetail'),
-  name:'docdetail',
-},
-
-//文章列表详情
-{
-  path:'/articlelist',
-  component: ()=>import('@/scrm_pages/articlelist/articlelist'),
-  name:'articlelist'
-},
-
-//单个文章列表详情
-{
-  path:'/articlelistdetail',
-  component:()=>import('@/scrm_pages/articlelist/articlelistdetail')
-},
-
-//活动列表详情
-{
-  path:'/activitylist',
-  component:()=>import('@/scrm_pages/activitylist/activitylist')
-},
-//单个文章列表详情
-{
-  path:"/activitylistdetail",
-  component:()=>import('@/scrm_pages/activitylist/activitylistdetail')
-
-},
-
-//联系我们
-{
-  path:"/contactus",
-  component:()=>import('@/scrm_pages/contactus/contactus')
-},
-
-{
-  path: '/activity/preview',
-  component: () => import('@/scrm_pages/marketing_tool/activity_preview'),
-  hidden: true
-}
-
-]
+var _constant_router_map = [
+  {
+    path: "/token/verify",
+    component: () => import("@/scrm_pages/index/verify_token"),
+    hidden: true
+  },
+  {
+    path: "/404",
+    component: () => import("@/views/errorPage/404"),
+    hidden: true
+  },
+  {
+    path: "/401",
+    component: () => import("@/views/errorPage/401"),
+    hidden: true
+  },
+  {
+    path: "/qrcode",
+    component: () => import("@/scrm_pages/micro/micro")
+  },
+  // mirco
+  {
+    path: "/microHome",
+    component: () => import("@/scrm_pages/microHome/microHome")
+  },
+  {
+    path: "/hospitalIntroduction",
+    component: () =>
+      import("@/scrm_pages/hospitalIntroduction/hospitalIntroduction")
+  },
+  {
+    path: "/medicalTeam",
+    component: () => import("@/scrm_pages/medicalTeam/medicalTeam")
+  },
+  {
+    path: "/doctorIntroduction",
+    component: () =>
+      import("@/scrm_pages/doctorIntroduction/doctorIntroduction")
+  },
+  {
+    path: "/news",
+    component: () => import("@/scrm_pages/news/news")
+  },
+  {
+    path: "/activity",
+    component: () => import("@/scrm_pages/activity/activity")
+  },
+  {
+    path: "/activityDetail",
+    component: () => import("@/scrm_pages/activityDetail/activityDetail")
+  },
+  {
+    path: "/apply",
+    component: () => import("@/scrm_pages/apply/apply")
+  },
+  {
+    path: "/",
+    component: () => import("@/scrm_pages/microHome/microHome")
+  },
+
+  // 医院介绍详情路由
+  {
+    path: "/hospital",
+    component: () => import("@/scrm_pages/hospital/hospital"),
+    name: "hospital"
+  },
+
+  // 科室介绍详情
+  {
+    path: "/office",
+    component: () => import("@/scrm_pages/office/office"),
+    name: "office"
+  },
+
+  // 名医介绍详情
+  {
+    path: "/doctor",
+    component: () => import("@/scrm_pages/doctor/doctor"),
+    name: "doctor"
+  },
+  // 单个医生介绍详情
+  {
+    path: "/docdetail",
+    component: () => import("@/scrm_pages/doctor/docdetail"),
+    name: "docdetail"
+  },
+
+  //文章列表详情
+  {
+    path: "/articlelist",
+    component: () => import("@/scrm_pages/articlelist/articlelist"),
+    name: "articlelist"
+  },
+
+  //单个文章列表详情
+  {
+    path: "/articlelistdetail",
+    component: () => import("@/scrm_pages/articlelist/articlelistdetail")
+  },
+
+  //活动列表详情
+  {
+    path: "/activitylist",
+    component: () => import("@/scrm_pages/activitylist/activitylist")
+  },
+  //单个文章列表详情
+  {
+    path: "/activitylistdetail",
+    component: () => import("@/scrm_pages/activitylist/activitylistdetail")
+  },
+
+  //联系我们
+  {
+    path: "/contactus",
+    component: () => import("@/scrm_pages/contactus/contactus")
+  },
+
+  {
+    path: "/activity/preview",
+    component: () => import("@/scrm_pages/marketing_tool/activity_preview"),
+    hidden: true
+  }
+];
 
 var _asy_router_map = [
   member,
@@ -134,19 +173,18 @@ var _asy_router_map = [
   org,
   system,
   site,
-  role,
-]
+  role
+];
 
-var is_asy_router = process.env.NODE_ENV === 'production' // true; 设置为 true 强制进行路由验证
+var is_asy_router = process.env.NODE_ENV === "production"; // true; 设置为 true 强制进行路由验证
 if (!is_asy_router) {
-  _constant_router_map = _constant_router_map.concat(_asy_router_map)
-  _asy_router_map = []
+  _constant_router_map = _constant_router_map.concat(_asy_router_map);
+  _asy_router_map = [];
 } else {
-
 }
 
-export const xt_constantRouterMap = _constant_router_map
-export const xt_asyncRouterMap = _asy_router_map
+export const xt_constantRouterMap = _constant_router_map;
+export const xt_asyncRouterMap = _asy_router_map;
 
 export default new Router({
   // mode: 'history', // require service support
@@ -154,4 +192,4 @@ export default new Router({
     y: 0
   }),
   routes: xt_constantRouterMap
-})
+});

src/scrm_pages/activity/activity.vue

@@ -0,0 +1,192 @@
+<template>
+  <div>
+    <div class="content">
+      <div class="contentOne">
+        <div class="img">
+          <img src="static\images\img1.jpg" alt />
+        </div>
+        <div class="detail">
+          <p class="detailTitle">与孩子一起挑选采摘新机陆...</p>
+          <div class="detailBox">
+            <div class="activityTime">
+              <p>
+                7月28日 08:30开始
+                深圳市南山区
+              </p>
+            </div>
+            <div class="people">
+              <p>100人已报名</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="contentOne">
+        <div class="img">
+          <img src="static\images\img1.jpg" alt />
+        </div>
+        <div class="detail">
+          <p class="detailTitle">与孩子一起挑选采摘新机陆...</p>
+          <div class="detailBox">
+            <div class="activityTime">
+              <p>
+                7月28日 08:30开始
+                深圳市南山区
+              </p>
+            </div>
+            <div class="people">
+              <p>100人已报名</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="contentOne">
+        <div class="img">
+          <img src="static\images\img1.jpg" alt />
+        </div>
+        <div class="detail">
+          <p class="detailTitle">与孩子一起挑选采摘新机陆...</p>
+          <div class="detailBox">
+            <div class="activityTime">
+              <p>
+                7月28日 08:30开始
+                深圳市南山区
+              </p>
+            </div>
+            <div class="people">
+              <p>100人已报名</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="contentOne">
+        <div class="img">
+          <img src="static\images\img1.jpg" alt />
+        </div>
+        <div class="detail">
+          <p class="detailTitle">与孩子一起挑选采摘新机陆...</p>
+          <div class="detailBox">
+            <div class="activityTime">
+              <p>
+                7月28日 08:30开始
+                深圳市南山区
+              </p>
+            </div>
+            <div class="people">
+              <p>100人已报名</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="contentOne">
+        <div class="img">
+          <img src="static\images\img1.jpg" alt />
+        </div>
+        <div class="detail">
+          <p class="detailTitle">与孩子一起挑选采摘新机陆...</p>
+          <div class="detailBox">
+            <div class="activityTime">
+              <p>
+                7月28日 08:30开始
+                深圳市南山区
+              </p>
+            </div>
+            <div class="people">
+              <p>100人已报名</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="contentOne">
+        <div class="img">
+          <img src="static\images\img1.jpg" alt />
+        </div>
+        <div class="detail">
+          <p class="detailTitle">与孩子一起挑选采摘新机陆...</p>
+          <div class="detailBox">
+            <div class="activityTime">
+              <p>
+                7月28日 08:30开始
+                深圳市南山区
+              </p>
+            </div>
+            <div class="people">
+              <p>100人已报名</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<style lang="scss" scoped>
+.contentOne {
+  margin: auto;
+  margin-top: 18px;
+  width: 334px;
+  height: 119px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
+  border-radius: 16px;
+  padding-left: 16px;
+  padding-top: 18px;
+  box-sizing: border-box;
+  .img {
+    float: left;
+    width: 80px;
+    height: 80px;
+    border-radius: 12px;
+  }
+  .detail {
+    float: left;
+    margin-left: 13px;
+    width: 210px;
+    .detailTitle {
+      margin-top: 8px;
+      width: 203px;
+      height: 17px;
+      font-size: 15px;
+      font-weight: 600;
+      color: rgba(7, 18, 40, 1);
+    }
+    .detailMessage {
+      margin-top: 4px;
+      width: 212px;
+      height: 58px;
+      font-size: 13px;
+      font-weight: 400;
+      color: rgba(155, 155, 155, 1);
+      line-height: 18px;
+    }
+  }
+}
+.detailBox {
+  margin-top: 10px;
+  .activityTime {
+    float: left;
+    width: 118px;
+    height: 35px;
+    font-size: 13px;
+    color: rgba(155, 155, 155, 1);
+    line-height: 24px;
+  }
+  .people {
+    margin-top: 16px;
+    float: left;
+    width: 86px;
+    height: 30px;
+    background: rgba(57, 124, 254, 0.1);
+    border-radius: 30px;
+    p {
+      margin: auto;
+      text-align: center;
+      width: 70px;
+      height: 12px;
+      font-size: 12px;
+      color: rgba(57, 124, 254, 1);
+      line-height: 30px;
+    }
+  }
+}
+</style>

src/scrm_pages/activityDetail/activityDetail.vue

@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <div class="banner">
+      <img src="static\images\banner.jpg" alt />
+    </div>
+    <div class="headline">
+      <div class="top">与孩子一起挑选采摘新鲜有机马陆葡萄，体验采摘乐趣</div>
+      <div class="bottom">
+        <p class="browse">
+          <i class="iconfont">&#xe632;</i>
+          <span>浏览400次</span>
+        </p>
+      </div>
+    </div>
+    <div class="detail">
+      <p class="row">
+        <i class="iconfont">&#xe608;</i>
+        <span>06-19 14:00 至 17:00</span>
+      </p>
+      <p class="row">
+        <i class="iconfont">&#xe608;</i>
+        <span>广东省深圳市南山去时代大厦3楼赛盒科技观海...</span>
+      </p>
+      <p class="row">
+        <i class="iconfont">&#xe608;</i>
+        <span>已报名49人 / 限55人</span>
+      </p>
+      <p class="row">
+        <i class="iconfont">&#xe608;</i>
+        <span>0755-8548673</span>
+      </p>
+    </div>
+    <div class="introduce">
+      <div class="common_title">
+        <div class="one"></div>
+        <div class="dynamicTxt">活动介绍</div>
+      </div>
+      <div
+        class="introduceDetail"
+      >深圳市南山区人民医院(深圳市第六人民医院)，坐落于深圳经济特区西部南头半岛中心区，是深圳市第四家三级甲等医院暨南山区区域医疗中心。深圳市第四家三级甲等医院...</div>
+    </div>
+    <div class="apply">我要报名</div>
+  </div>
+</template>
+
+
+<style lang="scss" scoped>
+.banner {
+  width: 375px;
+  height: 220px;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+.headline {
+  position: fixed;
+  width: 334px;
+  height: 105px;
+  margin-top: -20px;
+  left: 20px;
+  z-index: 99px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  padding: 17px 10px 0 14px;
+  box-sizing: border-box;
+  .top {
+    font-size: 17px;
+    font-weight: 600;
+    color: rgba(7, 18, 40, 1);
+    line-height: 24px;
+  }
+}
+.browse {
+  color: rgba(182, 186, 193, 1);
+  margin-top: 8px;
+  span {
+    font-size: 12px;
+    font-weight: 400;
+  }
+}
+.detail {
+  margin-left: 20px;
+  margin-top: 90px;
+  .row {
+    margin: 10px 0;
+    i {
+      color: #b6bac1;
+    }
+    span {
+      font-size: 14px;
+      font-weight: 600;
+      color: rgba(7, 18, 40, 1);
+      margin-left: 10px;
+    }
+  }
+}
+.introduce {
+  margin-left: 20px;
+  margin-top: 24px;
+}
+
+.common_title {
+  width: 335px;
+  height: 18px;
+  line-height: 18px;
+  font-size: 18px;
+  font-weight: 800;
+  color: rgba(7, 18, 40, 1);
+}
+
+.one {
+  margin-top: 2px;
+  margin-right: 10px;
+  float: left;
+  width: 2px;
+  height: 14px;
+  background: linear-gradient(
+    0deg,
+    rgba(114, 182, 253, 1),
+    rgba(52, 119, 254, 1)
+  );
+  box-shadow: 0px 3px 12px 0px rgba(60, 127, 254, 0.2);
+  border-radius: 3px;
+}
+.introduceDetail {
+  width: 318px;
+  height: 92px;
+  font-size: 16px;
+  color: rgba(155, 155, 155, 1);
+  line-height: 24px;
+  margin-top: 18px;
+  padding-left: 6px;
+  box-sizing: border-box;
+}
+.apply {
+  width: 100%;
+  height: 42px;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  text-align: center;
+  line-height: 42px;
+  color: rgba(255, 255, 255, 1);
+  font-size: 18px;
+  background: linear-gradient(
+    90deg,
+    rgba(114, 182, 253, 1),
+    rgba(52, 119, 254, 1)
+  );
+}
+</style>

src/scrm_pages/apply/apply.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <div class="tel">
+      <el-input v-model="phone" placeholder="手机号码"></el-input>
+    </div>
+    <div class="codeBox">
+      <div class="verificationCode">
+        <el-input v-model="verificationCode" placeholder="手机号码"></el-input>
+      </div>
+      <div class="gain">获取验证码</div>
+    </div>
+    <div class="submit">提交</div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  data() {
+    return {
+      phone: "",
+      verificationCode: ""
+    };
+  }
+};
+</script>
+
+
+<style lang="scss" scoped>
+.tel {
+  margin: 34px 21px 17px 21px;
+  height: 40px;
+}
+.codeBox {
+  height: 36px;
+  margin-left: 21px;
+  margin-bottom: 17px;
+  .verificationCode {
+    float: left;
+    width: 208px;
+    height: 40px;
+    margin-right: 12px;
+  }
+  .gain {
+    float: left;
+    text-align: center;
+    color: rgba(255, 255, 255, 1);
+    font-size: 15px;
+    line-height: 36px;
+    width: 114px;
+    height: 36px;
+    background: linear-gradient(
+      90deg,
+      rgba(114, 182, 253, 1),
+      rgba(52, 119, 254, 1)
+    );
+    box-shadow: 0px 4px 12px 0px rgba(60, 127, 254, 0.2);
+    border-radius: 4px;
+  }
+}
+.submit {
+  width: 334px;
+  height: 40px;
+  background: linear-gradient(
+    90deg,
+    rgba(114, 182, 253, 1),
+    rgba(52, 119, 254, 1)
+  );
+  box-shadow: 0px 4px 12px 0px rgba(60, 127, 254, 0.2);
+  border-radius: 4px;
+  color: rgba(255, 255, 255, 1);
+  font-size: 18px;
+  text-align: center;
+  line-height: 40px;
+  margin-left: 21px;
+}
+</style>

src/scrm_pages/doctorIntroduction/doctorIntroduction.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <div>
+      <div class="contentOne">
+        <div class="img">
+          <img src="static\images\img1.jpg" alt />
+        </div>
+        <div class="detail">
+          <p class="detailTitle">
+            欧巧漫
+            <span>主任医师</span>
+          </p>
+          <p class="detailMessage">深圳大学第二附属医院-内科</p>
+        </div>
+      </div>
+      <div class="good">
+        <div class="common_title">
+          <div class="one"></div>
+          <div class="dynamicTxt">医生擅长</div>
+        </div>
+        <div class="goodtxt">擅长甲状腺、胆结石</div>
+      </div>
+      <div class="good">
+        <div class="common_title">
+          <div class="one"></div>
+          <div class="dynamicTxt">医生简介</div>
+        </div>
+        <div class="goodtxt">
+          于1996年毕业于中国医科大学，从事医疗工作
+          近20年，经验丰富
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<style lang="scss" scoped>
+.contentOne {
+  margin: auto;
+  margin-top: 18px;
+  width: 334px;
+  height: 119px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
+  border-radius: 16px;
+  padding-left: 16px;
+  padding-top: 18px;
+  box-sizing: border-box;
+  .img {
+    float: left;
+    width: 80px;
+    height: 80px;
+    border-radius: 12px;
+  }
+  .detail {
+    float: left;
+    margin-left: 13px;
+    width: 210px;
+    .detailTitle {
+      margin-top: 8px;
+      width: 203px;
+      height: 17px;
+      font-size: 15px;
+      font-weight: 600;
+      color: rgba(7, 18, 40, 1);
+      span {
+        font-size: 14px;
+        color: rgba(155, 155, 155, 1);
+        line-height: 18px;
+        margin-left: 20px;
+        font-weight: 400;
+      }
+    }
+    .detailMessage {
+      font-size: 14px;
+      color: rgba(155, 155, 155, 1);
+      line-height: 24px;
+      font-weight: 400;
+      margin-top: 14px;
+    }
+  }
+}
+.good {
+  margin-left: 20px;
+  margin-top: 35px;
+}
+.common_title {
+  width: 335px;
+  height: 18px;
+  line-height: 18px;
+}
+.dynamicTxt {
+  float: left;
+  width: 72px;
+  height: 18px;
+  line-height: 18px;
+  font-size: 18px;
+  font-weight: 600;
+  color: rgba(7, 18, 40, 1);
+}
+.one {
+  margin-top: 2px;
+  margin-right: 6px;
+  float: left;
+  width: 2px;
+  height: 14px;
+  background: linear-gradient(
+    0deg,
+    rgba(114, 182, 253, 1),
+    rgba(52, 119, 254, 1)
+  );
+  box-shadow: 0px 3px 12px 0px rgba(60, 127, 254, 0.2);
+  border-radius: 3px;
+}
+.goodtxt {
+  margin: 16px 0 36px 14px;
+  font-size: 16px;
+  font-weight: 400;
+  color: rgba(68, 75, 92, 1);
+  line-height: 24px;
+}
+</style>

src/scrm_pages/hospitalIntroduction/hospitalIntroduction.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="main">
+    <div class="bannerImg">
+      <img src="static\images\banner.jpg" alt />
+    </div>
+    <div class="detail">
+      <p>
+        蛇口位于深圳湾半岛，与香港隔海相望，西依珠江口，背靠大南山,拥有得天独厚的地理位置；作为改革开放的前沿阵地，经过数十年的发展，如今已成为一个融合居住与旅游、本土与国际、富饶与休闲的国际化城区，区域内集中了鲸山别墅九期、双玺花园、兰溪谷等一系列高尚住宅，聚集着一大批具有高品质生活、高消费能力的优质人群，同时也吸引了来自70多个国家和地区，占深圳市60%以上的外籍人士聚居于此，拥有“小联合国”的美誉。
+        深圳市南山区蛇口人民医院暨中南大学湘雅二医院深圳医院，坐落于蛇口半岛中心地带，目前已成为外籍人士与港澳居。
+        深圳市南山区蛇口人民医院暨中南大学湘雅二医院深圳医院，坐落于蛇口半岛中心地带，目前已成为外籍人士与港澳居
+      </p>
+    </div>
+  </div>
+</template>
+
+
+
+<style lang="scss" scoped>
+.bannerImg {
+  width: 339px;
+  height: 194px;
+  margin: 0 auto;
+  border-radius: 10px;
+  box-sizing: border-box;
+  padding: 18px 0;
+}
+.detail {
+  margin: 0 auto;
+  width: 336px;
+  height: 368px;
+  font-size: 16px;
+  color: rgba(7, 18, 40, 1);
+  line-height: 24px;
+}
+</style>

src/scrm_pages/medicalTeam/medicalTeam.vue

@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <div class="header">
+      <div class="line"></div>
+      <div class="headerTitle">
+        <span>医院名医团队</span>
+      </div>
+      <div class="line"></div>
+    </div>
+    <div class="msg">贴心的服务，让您的就医更轻松</div>
+    <div class="content">
+      <div class="contentOne">
+        <div class="img">
+          <img src="static\images\img1.jpg" alt />
+        </div>
+        <div class="detail">
+          <p class="detailTitle">欧巧漫</p>
+          <p class="detailMessage">苏安，女，主任医师，教授，妇产科主任，湖南省医学会理事、湖南省肿瘤学会委员瘤学肿瘤学会员......</p>
+        </div>
+      </div>
+      <div class="contentOne">
+        <div class="img">
+          <img src="static\images\img1.jpg" alt />
+        </div>
+        <div class="detail">
+          <p class="detailTitle">欧巧漫</p>
+          <p class="detailMessage">苏安，女，主任医师，教授，妇产科主任，湖南省医学会理事、湖南省肿瘤学会委员瘤学肿瘤学会员......</p>
+        </div>
+      </div>
+      <div class="contentOne">
+        <div class="img">
+          <img src="static\images\img1.jpg" alt />
+        </div>
+        <div class="detail">
+          <p class="detailTitle">欧巧漫</p>
+          <p class="detailMessage">苏安，女，主任医师，教授，妇产科主任，湖南省医学会理事、湖南省肿瘤学会委员瘤学肿瘤学会员......</p>
+        </div>
+      </div>
+      <div class="contentOne">
+        <div class="img">
+          <img src="static\images\img1.jpg" alt />
+        </div>
+        <div class="detail">
+          <p class="detailTitle">欧巧漫</p>
+          <p class="detailMessage">苏安，女，主任医师，教授，妇产科主任，湖南省医学会理事、湖南省肿瘤学会委员瘤学肿瘤学会员......</p>
+        </div>
+      </div>
+      <div class="contentOne">
+        <div class="img">
+          <img src="static\images\img1.jpg" alt />
+        </div>
+        <div class="detail">
+          <p class="detailTitle">欧巧漫</p>
+          <p class="detailMessage">苏安，女，主任医师，教授，妇产科主任，湖南省医学会理事、湖南省肿瘤学会委员瘤学肿瘤学会员......</p>
+        </div>
+      </div>
+      <div class="contentOne">
+        <div class="img">
+          <img src="static\images\img1.jpg" alt />
+        </div>
+        <div class="detail">
+          <p class="detailTitle">欧巧漫</p>
+          <p class="detailMessage">苏安，女，主任医师，教授，妇产科主任，湖南省医学会理事、湖南省肿瘤学会委员瘤学肿瘤学会员......</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<style lang="scss" scoped>
+.header {
+  height: 20px;
+  width: 138px;
+  text-align: center;
+  margin: 12px auto;
+  .headerTitle {
+    float: left;
+    height: 20px;
+    line-height: 20px;
+    font-size: 18px;
+    color: rgba(7, 18, 40, 1);
+    font-weight: 600;
+    margin: 0 auto;
+    text-align: center;
+  }
+  .line {
+    float: left;
+    margin-top: 8px;
+    width: 15px;
+    height: 3px;
+    background: linear-gradient(
+      -45deg,
+      rgba(50, 210, 139, 1),
+      rgba(60, 226, 151, 1)
+    );
+  }
+}
+.msg {
+  width: 210px;
+  height: 15px;
+  font-size: 15px;
+  font-weight: 100;
+  color: rgba(7, 18, 40, 1);
+  margin: 0 auto;
+}
+.contentOne {
+  margin: auto;
+  margin-top: 18px;
+  width: 334px;
+  height: 119px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
+  border-radius: 16px;
+  padding-left: 16px;
+  padding-top: 18px;
+  box-sizing: border-box;
+  .img {
+    float: left;
+    width: 80px;
+    height: 80px;
+    border-radius: 12px;
+  }
+  .detail {
+    float: left;
+    margin-left: 13px;
+    width: 210px;
+    .detailTitle {
+      margin-top: 8px;
+      width: 203px;
+      height: 17px;
+      font-size: 15px;
+      font-weight: 600;
+      color: rgba(7, 18, 40, 1);
+    }
+    .detailMessage {
+      margin-top: 4px;
+      width: 212px;
+      height: 58px;
+      font-size: 13px;
+      font-weight: 400;
+      color: rgba(155, 155, 155, 1);
+      line-height: 18px;
+    }
+  }
+}
+</style>

src/scrm_pages/microHome/microHome.vue

@@ -0,0 +1,528 @@
+<template>
+  <div class="page_home">
+    <div>
+      <div class="banner">
+        <div class="swiper-container bannerSwiper">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">
+              <img class="img" src="static\images\banner.jpg" />
+            </div>
+            <div class="swiper-slide">
+              <img class="img" src="static\images\img3.jpg" />
+            </div>
+            <div class="swiper-slide">
+              <img class="img" src="static\images\img2.png" />
+            </div>
+          </div>
+          <!-- 如果需要分页器 -->
+          <div class="swiper-pagination"></div>
+        </div>
+      </div>
+      <div class="btnList">
+        <div class="btnOne" v-for="(item,index) in 8" :key="index">
+          <div>
+            <img src="static\images\icon1.jpg" alt />
+          </div>
+          <div>
+            <p class="title">医院介绍</p>
+          </div>
+        </div>
+      </div>
+      <!-- 医院动态 -->
+      <div class="dynamic">
+        <div class="common_title">
+          <div class="one"></div>
+          <div class="dynamicTxt">医院动态</div>
+          <div class="more">
+            <p>
+              查看更多
+              <i class="iconfont">&#xe632;</i>
+            </p>
+          </div>
+        </div>
+        <div class="content">
+          <div class="contentOne">
+            <div class="img">
+              <img src="static\images\img1.jpg" alt />
+            </div>
+            <div class="detail">
+              <p class="detailTitle">山东潍坊，高考还剩最一门...</p>
+              <p class="detailMessage">高三学生周某出生在潍坊市固堤镇一个普通的农村家庭，她的父母一直希望成绩优异的女儿能考上一所好...</p>
+            </div>
+          </div>
+          <div class="contentOne">
+            <div class="img">
+              <img src="static\images\img1.jpg" alt />
+            </div>
+            <div class="detail">
+              <p class="detailTitle">山东潍坊，高考还剩最一门...</p>
+              <p class="detailMessage">高三学生周某出生在潍坊市固堤镇一个普通的农村家庭，她的父母一直希望成绩优异的女儿能考上一所好...</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 医院介绍 -->
+      <div class="common">
+        <div class="common_title">
+          <div class="one"></div>
+          <div class="dynamicTxt">医院介绍</div>
+          <div class="more">
+            <p>
+              查看更多
+              <i class="iconfont">&#xe632;</i>
+            </p>
+          </div>
+        </div>
+        <div class="commonBox">
+          <div class="commonImg">
+            <img src="static\images\img2.png" alt />
+          </div>
+          <div
+            class="commonMessage"
+          >深圳市南山区人民医院（深圳市第六人民医院），坐落于深圳经济特区西部南头半岛中心区，是深圳市第四家三级甲等医院暨南山区区域医疗中心。深圳市第四家三级甲等医院...</div>
+        </div>
+      </div>
+      <!-- 医院环境 -->
+      <div class="common">
+        <div class="common_title">
+          <div class="one"></div>
+          <div class="dynamicTxt">医院环境</div>
+          <div class="more">
+            <p>
+              查看更多
+              <i class="iconfont">&#xe632;</i>
+            </p>
+          </div>
+        </div>
+        <div class="commonBox">
+          <div class="commonImg">
+            <img src="static\images\img2.png" alt />
+          </div>
+          <div
+            class="commonMessage"
+          >深圳市南山区人民医院（深圳市第六人民医院），坐落于深圳经济特区西部南头半岛中心区，是深圳市第四家三级甲等医院暨南山区区域医疗中心。深圳市第四家三级甲等医院...</div>
+        </div>
+      </div>
+      <!-- 医护团队 -->
+      <div class="dynamic">
+        <div class="common_title">
+          <div class="one"></div>
+          <div class="dynamicTxt">医院团队</div>
+          <div class="more">
+            <p>
+              查看更多
+              <i class="iconfont">&#xe632;</i>
+            </p>
+          </div>
+        </div>
+        <div class="content">
+          <div class="contentOne">
+            <div class="img">
+              <img src="static\images\img1.jpg" alt />
+            </div>
+            <div class="detail">
+              <p class="detailTitle">欧巧漫</p>
+              <p class="detailMessage">苏安，女，主任医师，教授，妇产科主任，湖南省医学会理事、湖南省肿瘤学会委员瘤学肿瘤学会员......</p>
+            </div>
+          </div>
+          <div class="contentOne">
+            <div class="img">
+              <img src="static\images\img1.jpg" alt />
+            </div>
+            <div class="detail">
+              <p class="detailTitle">欧巧漫</p>
+              <p class="detailMessage">苏安，女，主任医师，教授，妇产科主任，湖南省医学会理事、湖南省肿瘤学会委员瘤学肿瘤学会员......</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 医院环境 -->
+      <div class="dynamic">
+        <div class="common_title">
+          <div class="one"></div>
+          <div class="dynamicTxt">医院环境</div>
+          <div class="more">
+            <p>
+              查看更多
+              <i class="iconfont">&#xe632;</i>
+            </p>
+          </div>
+        </div>
+        <div class="imgs">
+          <div class="swiper-container imgSwiper">
+            <div class="swiper-wrapper">
+              <div class="swiper-slide carousel">
+                <img class="img" src="static\images\img3.jpg" preview="1" />
+              </div>
+              <div class="swiper-slide carousel">
+                <img class="img" src="static\images\banner.jpg" preview="1" />
+              </div>
+              <div class="swiper-slide carousel">
+                <img class="img" src="static\images\img2.png" preview="1" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 医院活动 -->
+      <div class="dynamic bottom">
+        <div class="common_title">
+          <div class="one"></div>
+          <div class="dynamicTxt">医院活动</div>
+          <div class="more">
+            <p>
+              查看更多
+              <i class="iconfont">&#xe632;</i>
+            </p>
+          </div>
+        </div>
+        <div class="content">
+          <div class="contentOne">
+            <div class="img">
+              <img src="static\images\img1.jpg" alt />
+            </div>
+            <div class="detail">
+              <p class="detailTitle">与孩子一起挑选采摘新机陆...</p>
+              <div class="detailBox">
+                <div class="activityTime">
+                  <p>
+                    7月28日 08:30开始
+                    深圳市南山区
+                  </p>
+                </div>
+                <div class="people">
+                  <p>100人已报名</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="contentOne">
+            <div class="img">
+              <img src="static\images\img1.jpg" alt />
+            </div>
+            <div class="detail">
+              <p class="detailTitle">与孩子一起挑选采摘新机陆...</p>
+              <div class="detailBox">
+                <div class="activityTime">
+                  <p>
+                    7月28日 08:30开始
+                    深圳市南山区
+                  </p>
+                </div>
+                <div class="people">
+                  <p>100人已报名</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- tab切换 -->
+    <div class="tabs">
+      <ul class="tabList">
+        <li class="tabOne">
+          <img src="static\images\home.jpg" alt />
+          <span>首页</span>
+        </li>
+        <li class="tabOne">
+          <img src="static\images\msg.jpg" alt />
+          <span>在线客服</span>
+        </li>
+        <li class="tabOne">
+          <img src="static\images\tel.jpg" alt />
+          <span>电话</span>
+        </li>
+        <li class="tabOne">
+          <img src="static\images\service.jpg" alt />
+          <span>联系我们</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import Swiper from "swiper";
+
+export default {
+  data() {
+    return {
+      bannerList: []
+    };
+  },
+  methods: {
+    initSwiper() {
+      var mySwiper1 = new Swiper(".bannerSwiper", {
+        loop: true, // 循环模式选项
+        // 如果需要分页器
+        pagination: {
+          el: ".swiper-pagination"
+        },
+        autoplay: {
+          disableOnInteraction: false
+        }
+      });
+      var mySwiper2 = new Swiper(".imgSwiper", {
+        slidesPerView: 2
+      });
+    }
+  },
+  mounted() {
+    this.initSwiper();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/styles/mixin.scss";
+.page_home {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  > div:first-child {
+    flex: 1;
+    overflow: auto;
+  }
+  > div:first-child::-webkit-scrollbar {
+    width: 0;
+  }
+}
+.banner {
+  height: 151px;
+}
+.swiper-container {
+  height: 100%;
+}
+.swiper-wrapper {
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  //   width: 334px;
+}
+.img {
+  //   width: 334px;
+  width: 100%;
+  height: 100%;
+}
+.btnList {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 100%;
+  //   height: 180px;
+  margin-top: 20px;
+}
+.btnOne {
+  display: block;
+  width: 25%;
+  text-align: center;
+  height: 80px;
+  img {
+    margin-bottom: 5px;
+    text-align: center;
+    width: 45px;
+    height: 45px;
+    background: linear-gradient(
+      0deg,
+      rgba(255, 201, 115, 1),
+      rgba(254, 207, 57, 1)
+    );
+    box-shadow: 0px 3px 12px 0px rgba(254, 206, 64, 0.25);
+    border-radius: 50%;
+  }
+  .title {
+    width: 100%;
+    height: 18px;
+    line-height: 18px;
+    font-size: 14px;
+    text-align: center;
+  }
+}
+.dynamic {
+  margin-top: 49px;
+}
+.common_title {
+  width: 335px;
+  height: 18px;
+  margin: 0 auto;
+}
+.dynamicTxt {
+  float: left;
+  width: 72px;
+  height: 18px;
+  line-height: 18px;
+  font-size: 18px;
+  font-weight: 600;
+  color: rgba(7, 18, 40, 1);
+}
+.one {
+  margin-top: 2px;
+  margin-right: 6px;
+  float: left;
+  width: 2px;
+  height: 14px;
+  background: linear-gradient(
+    0deg,
+    rgba(114, 182, 253, 1),
+    rgba(52, 119, 254, 1)
+  );
+  box-shadow: 0px 3px 12px 0px rgba(60, 127, 254, 0.2);
+  border-radius: 3px;
+}
+.more {
+  float: right;
+  p {
+    color: #b6bac1;
+    height: 18px;
+    line-height: 18px;
+  }
+}
+.contentOne {
+  margin: auto;
+  margin-top: 18px;
+  width: 334px;
+  height: 119px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
+  border-radius: 16px;
+  padding-left: 16px;
+  padding-top: 18px;
+  box-sizing: border-box;
+  .img {
+    float: left;
+    width: 80px;
+    height: 80px;
+    border-radius: 12px;
+  }
+  .detail {
+    float: left;
+    margin-left: 13px;
+    width: 210px;
+    .detailTitle {
+      margin-top: 8px;
+      width: 203px;
+      height: 17px;
+      font-size: 15px;
+      font-weight: 600;
+      color: rgba(7, 18, 40, 1);
+    }
+    .detailMessage {
+      margin-top: 4px;
+      width: 212px;
+      height: 58px;
+      font-size: 13px;
+      font-weight: 400;
+      color: rgba(155, 155, 155, 1);
+      line-height: 18px;
+    }
+  }
+}
+.common {
+  margin-top: 30px;
+  .commonBox {
+    margin: auto;
+    margin-top: 20px;
+    width: 334px;
+    height: 325px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
+    border-radius: 16px;
+    padding: 18px 21px 21px 21px;
+  }
+  .commonImg {
+    width: 295px;
+    height: 169px;
+    border-radius: 10px;
+  }
+  .commonMessage {
+    margin-top: 22px;
+    width: 284px;
+    height: 81px;
+    font-size: 14px;
+    color: rgba(60, 60, 60, 1);
+    line-height: 22px;
+  }
+}
+.imgs {
+  margin-top: 30px;
+  overflow-x: hidden;
+  img {
+    width: 172px;
+    height: 125px;
+    border-radius: 10px;
+  }
+  .carousel {
+    width: 100%;
+    height: 100%;
+    float: left;
+    padding-left: 20px;
+  }
+}
+.detailBox {
+  margin-top: 10px;
+  .activityTime {
+    float: left;
+    width: 118px;
+    height: 35px;
+    font-size: 13px;
+    color: rgba(155, 155, 155, 1);
+    line-height: 24px;
+  }
+  .people {
+    margin-top: 16px;
+    float: left;
+    width: 86px;
+    height: 30px;
+    background: rgba(57, 124, 254, 0.1);
+    border-radius: 30px;
+    p {
+      margin: auto;
+      text-align: center;
+      width: 70px;
+      height: 12px;
+      font-size: 12px;
+      color: rgba(57, 124, 254, 1);
+      line-height: 30px;
+    }
+  }
+}
+.bottom {
+  margin-bottom: 20px;
+}
+.tabs {
+  @include border-top;
+  width: 100%;
+  height: 50px;
+  box-sizing: border-box;
+}
+.tabList {
+  display: flex;
+  justify-content: space-around;
+  height: 100%;
+  .tabOne {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    img {
+      margin-top: 8px;
+      width: 20px;
+      height: 20px;
+      background: linear-gradient(
+        0deg,
+        rgba(114, 182, 253, 1),
+        rgba(52, 119, 254, 1)
+      );
+    }
+    span {
+      font-size: 12px;
+      color: rgba(182, 186, 193, 1);
+      line-height: 21px;
+    }
+  }
+}
+</style>

src/scrm_pages/news/news.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <div class="content">
+      <div class="contentOne">
+        <div class="img">
+          <img src="static\images\img1.jpg" alt />
+        </div>
+        <div class="detail">
+          <p class="detailTitle">山东潍坊，高考还剩最一门...</p>
+          <p class="detailMessage">高三学生周某出生在潍坊市固堤镇一个普通的农村家庭，她的父母一直希望成绩优异的女儿能考上一所好...</p>
+        </div>
+      </div>
+      <div class="contentOne">
+        <div class="img">
+          <img src="static\images\img1.jpg" alt />
+        </div>
+        <div class="detail">
+          <p class="detailTitle">山东潍坊，高考还剩最一门...</p>
+          <p class="detailMessage">高三学生周某出生在潍坊市固堤镇一个普通的农村家庭，她的父母一直希望成绩优异的女儿能考上一所好...</p>
+        </div>
+      </div>
+      <div class="contentOne">
+        <div class="img">
+          <img src="static\images\img1.jpg" alt />
+        </div>
+        <div class="detail">
+          <p class="detailTitle">山东潍坊，高考还剩最一门...</p>
+          <p class="detailMessage">高三学生周某出生在潍坊市固堤镇一个普通的农村家庭，她的父母一直希望成绩优异的女儿能考上一所好...</p>
+        </div>
+      </div>
+      <div class="contentOne">
+        <div class="img">
+          <img src="static\images\img1.jpg" alt />
+        </div>
+        <div class="detail">
+          <p class="detailTitle">山东潍坊，高考还剩最一门...</p>
+          <p class="detailMessage">高三学生周某出生在潍坊市固堤镇一个普通的农村家庭，她的父母一直希望成绩优异的女儿能考上一所好...</p>
+        </div>
+      </div>
+      <div class="contentOne">
+        <div class="img">
+          <img src="static\images\img1.jpg" alt />
+        </div>
+        <div class="detail">
+          <p class="detailTitle">山东潍坊，高考还剩最一门...</p>
+          <p class="detailMessage">高三学生周某出生在潍坊市固堤镇一个普通的农村家庭，她的父母一直希望成绩优异的女儿能考上一所好...</p>
+        </div>
+      </div>
+      <div class="contentOne">
+        <div class="img">
+          <img src="static\images\img1.jpg" alt />
+        </div>
+        <div class="detail">
+          <p class="detailTitle">山东潍坊，高考还剩最一门...</p>
+          <p class="detailMessage">高三学生周某出生在潍坊市固堤镇一个普通的农村家庭，她的父母一直希望成绩优异的女儿能考上一所好...</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<style lang="scss" scoped>
+.contentOne {
+  margin: auto;
+  margin-top: 18px;
+  width: 334px;
+  height: 119px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
+  border-radius: 16px;
+  padding-left: 16px;
+  padding-top: 18px;
+  box-sizing: border-box;
+  .img {
+    float: left;
+    width: 80px;
+    height: 80px;
+    border-radius: 12px;
+  }
+  .detail {
+    float: left;
+    margin-left: 13px;
+    width: 210px;
+    .detailTitle {
+      margin-top: 8px;
+      width: 203px;
+      height: 17px;
+      font-size: 15px;
+      font-weight: 600;
+      color: rgba(7, 18, 40, 1);
+    }
+    .detailMessage {
+      margin-top: 4px;
+      width: 212px;
+      height: 58px;
+      font-size: 13px;
+      font-weight: 400;
+      color: rgba(155, 155, 155, 1);
+      line-height: 18px;
+    }
+  }
+}
+</style>