首页完成

src/utils/menu.js

@@ -28,7 +28,8 @@ export const menuItemList = [{
   path: "/second/index",
   meta: {
     icon: "icon_home",
-    title: "首页"
+    title: "首页",
+    exclude: true
   }
 }, {
   path: "it-facilities-management",
@@ -40,28 +41,32 @@ export const menuItemList = [{
     englishTitleColor: "#9BBDFB",
     url: "",
     content: "",
-    image: "",
+    backgroundImage: require('@/assets/img/index/head/home_bg1.png'),
     imageList: undefined
   },
   children: [{
     path: "the-underlying-cloud-platform",
     meta: {
       title: "基础云平台",
+      subTitle: "通过基础云平台，实现校园内部服务器统一管理",
       url: "http://192.168.10.100/admin",
       content: "通过基础云平台部署，实现校园内部服务器的统一管理，以虚拟服务器形态为教学教务系统提供IT资源支持，优化校内资源管理。",
       image: require("@img/ProductIntroduction/TheUnderlyingCloudPlatform/基础云平台.jpg"),
+      prefixIcon: require('@img/index/content/home_icon_yunpingtai.png'),
       imageList: undefined
     }
   }, {
     path: "comprehensive-data-analysis",
     meta: {
       title: "综合数据分析",
+      subTitle: "为高校提供智慧校园整体解决方案",
       // 跳转地址
       url: "http://192.168.10.4:10280/project51/index.html",
       // 详细描述
       content: "本系统针对高校的多种数据设计了可视化大屏的展示，主要包括高校的综合数据、在校生数据、招生数据、就业数据、教职工数据、科研数据、后勤数据、图书馆数据以及能耗数据进行展示和分析，可助力高校各级人员的日常工作、日常监管，也可用于对内对外的参观展示、汇报演讲等不同场景。",
       // 显示图片
       image: require("@img/ProductIntroduction/BigDataAnalytics/zongheshujufenxi1.png"),
+      prefixIcon: require('@img/index/content/home_icon_shujufenxi.png'),
       imageList: [
         require("@img/ProductIntroduction/BigDataAnalytics/zongheshujufenxi1.png"),
         require("@img/ProductIntroduction/BigDataAnalytics/zongheshujufenxi2.png"),
@@ -72,9 +77,11 @@ export const menuItemList = [{
     path: "teach-big-data",
     meta: {
       title: "智教大数据",
+      subTitle: "对高校的多种数据设计了可视化大屏的展示",
       url: "http://192.168.10.4:10280/project55/index.html",
       content: "智慧教育大数据平台结合高校出台的相关教育综合改革措施，为高校提供基于大数据的智慧校园整体解决方案和数据中心解决方案，提升高校在学科建设、人才培养、文化传承、服务社会的能力和水平。旨在为学校管理者、教师提供有效辅助教务教学活动的数据分析内容，包含学院基本概况、教学情况一览、众创空间分析等。",
       image: require("@img/ProductIntroduction/BigDataAnalytics/zhijiaodashuju1.png"),
+      prefixIcon: require('@img/index/content/home_icon_dashuju.png'),
       imageList: [
         require("@img/ProductIntroduction/BigDataAnalytics/zhijiaodashuju1.png"),
         require("@img/ProductIntroduction/BigDataAnalytics/zhijiaodashuju2.png"),
@@ -92,43 +99,51 @@ export const menuItemList = [{
     englishTitleColor: "#F2B4B6",
     url: "",
     content: "",
-    image: "",
+    backgroundImage: require('@/assets/img/index/head/home_bg2.png'),
     imageList: undefined
   },
   children: [{
     path: "smart-teaching-and-training-platform",
     meta: {
       title: "智慧教学平台",
+      subTitle: "规范实际教学过程，提升专业教学水平",
       url: "http://192.168.10.4:10180/eduServer/dist/module/login.html",
       content: "该平台可规范实际教学过程，提升专业教学水平；可快速跟进问题并处理；提升学院整体教学质量，降低对个体教师的依赖。教师使可以使用多种教学手段自由组合，让教学更灵活，有趣；可以通过清晰的教学步骤说明，让教学更轻松；学生可以通过学习智教平台上的基础课程和项目案例，使学习和实践对接，不再纸上谈兵。",
       image: require("@img/ProductIntroduction/TeachingAndAcademicAffairs/zhihuipeixun.png"),
+      prefixIcon: require('@img/index/content/home_icon_jiaoxue.png'),
       imageList: undefined
     }
   }, {
     path: "online-exam-system",
     meta: {
       title: "在线考试平台",
+      subTitle: '全流程的在线开始功能，快速掌握考试情况',
       url: "http://192.168.10.4:8084/index.thtml",
       content: "在线考试系统：提供全流程的在线考试功能，包含创建题库、组织试卷、参与考试、阅卷批改、答卷统计等。对象化试题模型，支持常见考试题型、可进行灵活配置与扩展。智能批改瞬间完成、人工干预方便高效，确保数据准确无误。优化操作流程，鼠标拖拽、数据克隆等技术使得操作简单快捷。自带核心统计功能，并可根据需求定制数据分析功能，可快速掌握考试情况。",
       image: require("@img/ProductIntroduction/TeachingAndAcademicAffairs/zaixiankaoshi.png"),
+      prefixIcon: require('@img/index/content/home_icon_kaoshi.png'),
       imageList: undefined
     }
   }, {
     path: "academic-affairs-system",
     meta: {
       title: "教务管理系统",
+      subTitle: '是一个开放性和适用性较强的教务管理系统',
       url: "https://turp-443.webvpn.tjise.edu.cn/index",
       content: "本系统是一个聚焦、实用、方便、开放性和适用性强的教务管理系统。包含工作台、教室管理、课程管理、理论任务管理、排课管理、成绩管理等功能。满足各类高校对信息资源采集、存储、处理、组织、管理和利用的需求，实现信息资源的集成与共享，提高各院系、各部门管理人员管理水平与办公效率，减轻工作负担。",
       image: require("@img/ProductIntroduction/TeachingAndAcademicAffairs/biyesheji.png"),
+      prefixIcon: require('@img/index/content/home_icon_jiaowu.png'),
       imageList: undefined
     }
   }, {
     path: "graduation-project-management-subsystem",
     meta: {
       title: "毕设管理系统",
+      subTitle: '本系统为校企合作的毕业设计系统',
       url: "http://192.168.10.4:10280/project62/index.html",
       content: "本系统为校企合作的毕业设计系统。企业端可进行企业指导管理设置，申报新课题、管理学生的课题申报、管理课题双选、管理课题指导、管理成果物等。高校端可对企业申报课题进行多角色审批，管理本校合作企业、管理企业开设的班级等。学生可在线进行课题申报、填写阶段性产物、提交改题申请、提交毕设相关文档等。",
       image: require("@img/ProductIntroduction/StudentWork/毕业设计管理子系统.png"),
+      prefixIcon: require('@img/index/content/home_icon_bishe.png'),
       imageList: [
         require("@img/ProductIntroduction/StudentWork/zonghepince1.png"),
         require("@img/ProductIntroduction/StudentWork/zonghepince2.png"),
@@ -140,9 +155,11 @@ export const menuItemList = [{
     path: "second-classroom-online-management-platform",
     meta: {
       title: "第二课堂",
+      subTitle: '管理学生成绩，且为团委工作提供系统支持',
       url: "http://192.168.10.4:10280/project59/index.html",
       content: "第二课堂在线管理平台全面贯彻落实全国高校思想政治工作会议精神和党中央对群团工作和群团改革的部署精神，一方面对学生、学生社团、社团活动、社会经历、第二课堂成绩进行管理，另一方面提供了团委工作的任务下发和进度跟踪功能，为团委的工作提供了系统支持。",
       image: require("@img/ProductIntroduction/StudentWork/dierketang1.png"),
+      prefixIcon: require('@img/index/content/home_icon_erketang.png'),
       imageList: [
         require("@img/ProductIntroduction/StudentWork/dierketang1.png"),
         require("@img/ProductIntroduction/StudentWork/dierketang2.png")
@@ -152,9 +169,11 @@ export const menuItemList = [{
     path: "industry-university-cooperation-management-platform",
     meta: {
       title: "产学合作平台",
+      subTitle: '深化产教融合、校企合作而建设的信息化系统',
       url: "http://192.168.10.4:10280/project60/index.html",
       content: "本平台的建设是为了深入贯彻《“十四五”教育发展规划》《国务院办公厅关于深化产教融合的若干意见》精神，落实《教育部工业和信息化部 中国工程院关于加快建设发展新工科 实施卓越工程师教育培养计划 2.0 的意见》的要求，深化产教融合、校企合作而建设的信息化系统，包含专业方向管理、学生志愿申报、实习管理等子系统。",
       image: require("@img/ProductIntroduction/TeachingAndAcademicAffairs/jiaowu_chanxue1.png"),
+      prefixIcon: require('@img/index/content/home_icon_chanxue.png'),
       imageList: [
         require("@img/ProductIntroduction/TeachingAndAcademicAffairs/jiaowu_chanxue1.png"),
         require("@img/ProductIntroduction/TeachingAndAcademicAffairs/jiaowu_chanxue2.png"),
@@ -166,9 +185,11 @@ export const menuItemList = [{
     path: "project-declaration-system",
     meta: {
       title: "项目申报系统",
+      subTitle: '本系统聚焦于高校项目的申报管理业务',
       url: "http://192.168.10.4:10280/project57/index.html",
       content: "本系统聚焦于高校项目的申报管理业务，涉及多种角色，提供申报过程全周期可视化管理功能，可在线进行项目申请，通过数据看板、进度追踪等功能管控项目申请进展。稳定、可靠、实用性强的系统设计可提高整体工作效率、促进信息共享以及项目内容积累。",
-      image: require("@img/ProductIntroduction/TeachingAndAcademicAffairs/项目申报管理系统.png")
+      image: require("@img/ProductIntroduction/TeachingAndAcademicAffairs/项目申报管理系统.png"),
+      prefixIcon: require('@img/index/content/home_icon_shenbao.png'),
     }
   }]
 }, {
@@ -181,16 +202,18 @@ export const menuItemList = [{
     englishTitleColor: "#F3CDB3",
     url: "",
     content: "",
-    image: "",
+    backgroundImage: require('@/assets/img/index/head/home_bg3.png'),
     imageList: undefined
   },
   children: [{
     path: "admissions-system",
     meta: {
       title: "高校招生系统",
+      subTitle: '用于职业技术类或技工等院校的招生过程管理',
       url: "http://192.168.10.4:10280/project56/index.html",
       content: "主要用于职业技术类院校或技工院校等中职、高职院校的招生过程管理；包含常见的招生团队管理、生源管理、费用管理、报销管理、招生渠道管理、工具管理以及数据分析等模块。可精细化管理，降低招生成本，提高销售转化。",
       image: require("@img/ProductIntroduction/StudentWork/zhaoshengxitong1.png"),
+      prefixIcon: require('@img/index/content/home_icon_zhaosheng.png'),
       imageList: [
         require("@img/ProductIntroduction/StudentWork/zhaoshengxitong1.png"),
         require("@img/ProductIntroduction/StudentWork/zhaoshengxitong2.png"),
@@ -202,9 +225,11 @@ export const menuItemList = [{
     path: "welcome-system",
     meta: {
       title: "迎新系统",
+      subTitle: '本系统为移动版高校迎新系统',
       url: "http://192.168.10.4:10280/project61/index.html",
       content: "本系统为移动版高校迎新系统。迎新平台主要有新生报到、个人信息确认、绿色通道、学杂费、自选宿舍、军训服装选择、接站预定、报到情况、报到单等功能。原型后期将不定期更新，学生端即将增加微信授权登录、学生人脸识别认证、助学贷款、学生信息完善、证件资料（通知书、个人证件照、身份证正反面）上传功能，教师端增加报到情况统计、学生管理、学生验审、学生绿色通道审核、贷款信息审核、宿舍信息审核、军训服预定审核、接站预定审核、分班、专业分配、报到单生成/打印/审核等功能。",
       image: require("@img/ProductIntroduction/StudentWork/迎新系统.png"),
+      prefixIcon: require('@img/index/content/home_icon_yingxin.png'),
       imageList: [
         require("@img/ProductIntroduction/StudentWork/zizhuguanli1.png"),
         require("@img/ProductIntroduction/StudentWork/zizhuguanli2.png")
@@ -214,9 +239,11 @@ export const menuItemList = [{
     path: "co-working-spaces",
     meta: {
       title: "众创空间管理系统",
+      subTitle: '为创业者及团队搭建沟通交流和资源对接与流转平台',
       url: "http://192.168.10.6:8080/",
       content: "众创空间综合服务平台的建设，将使众创空间管理机构能够通过应用互联网与信息化手段，加强对高校众创空间及其相关业务进行统一的管理、宣传与服务，并在此基础上实现对高校创新创业工作的教育与指导，为创业者、创业团队搭建沟通交流平台和资源对接与流转平台。",
       image: require("@img/ProductIntroduction/ResearchAndLogistics/zhongchuang1.png"),
+      prefixIcon: require('@img/index/content/home_icon_chongchuang.png'),
       imageList: [
         require("@img/ProductIntroduction/ResearchAndLogistics/zhongchuang1.png"),
         require("@img/ProductIntroduction/ResearchAndLogistics/zhongchuang2.png"),
@@ -228,9 +255,11 @@ export const menuItemList = [{
     path: "asset-management",
     meta: {
       title: "资产管理系统",
+      subTitle: '实现高校对固定资产的管理需求',
       url: "http://soft.demo365.cn/Index_Eam.aspx",
       content: "实现高校对固定资产的管理需求，包含资产品类、资产单位、资产仓库、资产供应商、资产库存、资产采购、资产采购审核、资产报修八大模块。实现对本校的固定资产采购、登记、维修、报废等所有环节进行行之有效的监管，并对于资产的使用情况进行有效地整合和控制，以实现固定资产的全面、实时管理。保证对固定资产实施科学、高效的管理。",
       image: require("@img/ProductIntroduction/ResearchAndLogistics/zichanguanli1.png"),
+      prefixIcon: require('@img/index/content/home_icon_zichan.png'),
       imageList: [
         require("@img/ProductIntroduction/ResearchAndLogistics/zichanguanli1.png"),
         require("@img/ProductIntroduction/ResearchAndLogistics/zichanguanli2.png"),
@@ -241,9 +270,11 @@ export const menuItemList = [{
     path: "laboratory-management-system",
     meta: {
       title: "实验室管理系统",
+      subTitle: '适用于高校实验室工作管理',
       url: "http://192.168.10.4:10280/project53/index.html",
       content: "本系统从高校实验室管理需求出发，主要功能包含学院管理、专业管理、课程管理、实验用品管理、学期管理、实验室管理、实验室申请、大型仪器管理等功能，角色涵盖高校领导、实验室管理员、实验教师、学生等。适用于高校实验室管理，满足多学院、多专业、多种课程开展实验工作。",
       image: require("@img/ProductIntroduction/ResearchAndLogistics/shiyanshi1.png"),
+      prefixIcon: require('@img/index/content/home_icon_shiyanshi.png'),
       imageList: [
         require("@img/ProductIntroduction/ResearchAndLogistics/shiyanshi1.png"),
         require("@img/ProductIntroduction/ResearchAndLogistics/shiyanshi2.png"),
@@ -254,9 +285,11 @@ export const menuItemList = [{
     path: "campus-electricity-management-system",
     meta: {
       title: "校园用电管理系统",
+      subTitle: '实现校园用电智能化管理，用电更放心、更省心',
       url: "http://192.168.10.4:10280/project52/index.html",
       content: "为实现校园用电的智能化管理、保证学校用电的独立性和安全性，针对学校用电隐患，打造的高校用电系统，包括新增售电、状态监控、统计报表核心功能。可监控电表状态、查看统计报表、对房间、电表、账户进行管理，可进行实施报警并记录报警历史。一目了然的功能设计，让用电更放心、更省心。",
       image: require("@img/ProductIntroduction/ResearchAndLogistics/xiaoyuanyongdian1.png"),
+      prefixIcon: require('@img/index/content/home_icon_yongdian.png'),
       imageList: [
         require("@img/ProductIntroduction/ResearchAndLogistics/xiaoyuanyongdian1.png"),
         require("@img/ProductIntroduction/ResearchAndLogistics/xiaoyuanyongdian2.png"),
@@ -268,9 +301,11 @@ export const menuItemList = [{
     path: "smart-campus-service-platform",
     meta: {
       title: "校园服务系统",
+      subTitle: '实现服务事项在线集成，学生校内生活更加方便',
       url: "http://192.168.10.4:10280/project54/index.html",
       content: "本系统是借助网络和信息化技术手段，实现服务事项在线集成，让业务在线上多跑路，师生在线下少跑腿，配合服务中心，提高整体办事效率、改善服务质量、降低服务成本；而APP端是校园服务+校内社群为主，包含发布动态，聊天，课表维护等功能，使得学生校内生活更加方便。",
       image: require("@img/ProductIntroduction/AdministrationPersonnel/zhihuixiaoyuan1.png"),
+      prefixIcon: require('@img/index/content/home_icon_xiaoyuanfuwu.png'),
       imageList: [
         require("@img/ProductIntroduction/AdministrationPersonnel/zhihuixiaoyuan1.png"),
         require("@img/ProductIntroduction/AdministrationPersonnel/zhihuixiaoyuan2.png")
@@ -280,12 +315,14 @@ export const menuItemList = [{
     path: "personnel-management-platform",
     meta: {
       title: "人事管理系统",
+      subTitle: '人力资源工作者操作方便快捷，提高工作效率',
       // 跳转地址
       url: "http://soft.demo365.cn/Index_HR.aspx",
       // 详细描述
       content: "本系统可将人力资源工作者从繁重的日常琐碎事务中解放出来，将更多的精力用于企业的人力资源职能管理和管理决策，保持高校的持续高效运营。系统共分为七大模块：绩效考核，招聘管理，档案管理，工资管理，考勤管理，培训管理，系统管理。所有菜单、按钮功能均可由管理员通过配置来控制，操作方便快捷，可大大提高工作效率。",
       // 显示图片
       image: require("@img/ProductIntroduction/AdministrationPersonnel/renshidangan1.png"),
+      prefixIcon: require('@img/index/content/home_icon_renshiguanli.png'),
       imageList: [
         require("@img/ProductIntroduction/AdministrationPersonnel/renshidangan1.png"),
         require("@img/ProductIntroduction/AdministrationPersonnel/renshidangan2.png"),
@@ -296,37 +333,54 @@ export const menuItemList = [{
     path: "integrity-records-management-system",
     meta: {
       title: "廉政档案管理系统",
+      subTitle: '是一个一体化廉政风险动态管理平台系统',
       // 跳转地址
       url: "http://192.168.10.4:10280/project58/index.html",
       // 详细描述
       content: "廉政档案管理系统是一款集廉政数据录入、廉情预警、统计监督为一体的系统化廉政风险动态管理平台。用户通过该系统可管理各个科室干部的廉政档案，在线查阅干部廉政档案及廉情统计情况，实时动态监督等。信访举报信息字段可自定义配置，灵活适配用户使用场景。电子廉政档案的建立完善，可精准、快捷、全面呈现干部的“廉政画像”，还可作为干部职务任免、岗位调整、晋职晋级和评先选优的重要依据，推动廉政意见回复的信息化、便捷化、高效化。",
       // 显示图片
-      image: require("@img/ProductIntroduction/AdministrationPersonnel/廉政档案管理系统.png")
+      image: require("@img/ProductIntroduction/AdministrationPersonnel/廉政档案管理系统.png"),
+      prefixIcon: require('@img/index/content/home_icon_lianzheng.png'),
     }
   }, {
     path: "trade-union-management-system",
     meta: {
       title: "工会管理系统",
+      subTitle: '工会网上办公系统，降低成本，提高效率',
       // 跳转地址
       url: "http://192.168.10.6:7003/",
       // 详细描述
       content: "本系统是工会网上办公系统，主要功能是基层工会经费申请、审批和管理，将线下的经费登记备案管理工作通过线上完成，并且可以线上发布政策文件及会议通知，系统的设计为教育工会的工作提供了抓手，大大提高了工作效率。",
       // 显示图片
-      image: require("@img/ProductIntroduction/AdministrationPersonnel/工会管理系统.png")
+      image: require("@img/ProductIntroduction/AdministrationPersonnel/工会管理系统.png"),
+      prefixIcon: require('@img/index/content/home_icon_gonghui.png'),
     }
   }, {
     path: "collaborative-working",
     meta: {
       title: "协同办公",
+      subTitle: '是多人沟通、共享、协同一起办公的一款软件系统',
       // 跳转地址
       url: "http://soft.demo365.cn/Index_OA.aspx",
       // 详细描述
       content: "协同办公是利用网络、信息化，而提供给多人沟通、共享、协同一起办公的一款软件系统，给办公人员提供方便、快捷的办公方式，同时可降低成本，提高效率。本系统包含工作流管理、工作管理、任务管理、会议管理、车辆管理、新闻管理、项目管理、系统设置等功能。",
       // 显示图片
-      image: require("@img/ProductIntroduction/AdministrationPersonnel/协同办公.png")
+      image: require("@img/ProductIntroduction/AdministrationPersonnel/协同办公.png"),
+      prefixIcon: require('@img/index/content/home_icon_xietong.png'),
     }
   }]
 }];
 
 // 前缀路径
 export const prefixBasePath = "/product-introduction";
+
+/**
+ * 跳转新页面
+ * @param url 跳转地址
+ */
+export function gotoNewTab(url) {
+  if (url)
+    window.open(url, "_blank");
+  else
+    this.$Message.error('缺少地址信息')
+}

src/views/ProductIntroduction/Single.vue

@@ -19,6 +19,8 @@
 </template>
 
 <script>
+import { gotoNewTab } from "@/utils/menu";
+
 export default {
   name: "Single",
   props: {
@@ -49,16 +51,7 @@ export default {
     }
   },
   methods: {
-    /**
-     * 跳转新页面
-     * @param url 跳转地址
-     */
-    gotoNewTab(url) {
-      if (url)
-        window.open(url, "_blank");
-      else
-        this.$Message.error('缺少地址信息')
-    }
+    gotoNewTab
   }
 };
 </script>

src/views/index/index.vue

 <template>
   <div class="index">
-    <h1>Index</h1>
-    <p>
-      This is the index page. You can find the source code for this page in
-      <code>src/views/index/index.vue</code>
-    </p>
+    <div class="head">
+      <div class="head__item"
+           v-for="({meta: {title, exclude, backgroundImage}, children}, index) in menuItemList"
+           :key="index"
+           v-if="!exclude && children && children.length">
+        <div class="head__item__title">{{ title }}</div>
+        <div class="head__item__separator"></div>
+        <div class="head__item__count">
+          <div class="head__item__count__text">共计</div>
+          <div class="head__item__count__number">{{ children.length }}</div>
+          <div>个</div>
+        </div>
+        <el-image class="head__item__background" :src="backgroundImage" />
+      </div>
+    </div>
+    <div class="content">
+      <div class="content__item"
+           v-for="({meta: {title, englishTitle, titleColor, englishTitleColor, exclude}, children}, index) in menuItemList"
+           :key="index"
+           v-if="!exclude && children && children.length">
+        <div class="title">
+          <div class="title__symbol" :style="{color: titleColor, background: titleColor}"></div>
+          <div class="title__text" :style="{color: titleColor}">{{ title }}</div>
+          <div class="title__text-english" :style="{color: englishTitleColor}">{{ englishTitle }}</div>
+        </div>
+        <div class="content__item__list">
+          <div class="content__item__list__item"
+               v-for="({meta: {title, subTitle, prefixIcon, url, exclude}}, index) in children"
+               :key="index"
+               @click="gotoNewTab(url)"
+               v-if="!exclude">
+            <div class="content__item__list__item__icon">
+              <el-image :src="prefixIcon" />
+            </div>
+            <div class="content__item__list__item__text">
+              <div class="content__item__list__item__text__title">{{ title }}</div>
+              <div class="content__item__list__item__text__sub-title">{{ subTitle }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { gotoNewTab, menuItemList } from "@/utils/menu";
+
 export default {
-  name: "index"
+  name: "index",
+  data() {
+    return {
+      menuItemList
+    };
+  },
+  methods: {
+    gotoNewTab
+  }
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.index {
+  padding: 40px;
+  background: #F1F1F1;
+
+  .head {
+    display: grid;
+    grid-gap: 20px;
+    grid-template-columns: repeat(3, 1fr);
+    background: white;
+    padding: 30px;
+
+    &__item {
+      width: auto;
+      height: 152px;
+      padding: 20px 30px;
+      position: relative;
+
+      div {
+        position: relative;
+        z-index: 2;
+      }
+
+      .head__item__background {
+        position: absolute;
+        z-index: 0;
+        top: 0;
+        left: 0;
+        display: block;
+        max-width: 500px;
+        height: 152px;
+      }
+
+      &__title {
+        font-size: 18px;
+        font-weight: bold;
+        color: #FFFFFF;
+      }
+
+      &__separator {
+        height: 1px;
+        margin: 20px 0;
+        background: #FFFFFF;
+      }
+
+      &__count {
+        display: flex;
+        align-items: center;
+        font-size: 18px;
+        font-weight: 400;
+        color: #FFFFFF;
+
+        div {
+          height: 18px;
+          line-height: 18px;
+        }
+
+        .head__item__count__number {
+          height: 36px;
+          line-height: 36px;
+          font-size: 36px;
+        }
+      }
+    }
+  }
+
+  .content {
+    margin-top: 30px;
+    background: white;
+    padding: 20px 30px 0;
+
+    &__item {
+      padding: 10px 0 40px;
+      cursor: pointer;
+
+      .title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 28px;
+
+        &__symbol {
+          width: 4px;
+          height: 40px;
+          margin-right: 20px;
+        }
+
+        &__text, &__text-english {
+          font-size: 18px;
+          font-weight: bold;
+        }
+
+        &__text-english {
+          font-weight: 400;
+          margin-left: 10px;
+        }
+      }
+
+      &__list {
+        display: grid;
+        grid-gap: 20px;
+        grid-template-columns: repeat(4, 1fr);
+
+        &__item {
+          display: flex;
+          align-items: center;
+          padding: 16px 0 17px 20px;
+          border-radius: 6px;
+          border: 1px solid #E4E4E4;
+
+          &__icon {
+            margin-right: 16px;
+
+            .el-image {
+              width: 30px;
+              height: 30px;
+            }
+          }
+
+          &__text {
+            &__title {
+              margin-bottom: 12px;
+              font-size: 15px;
+              font-weight: bold;
+              color: #333333;
+            }
+
+            &__sub-title {
+              font-size: 14px;
+              font-weight: 400;
+              color: #7D7D7D;
+            }
+          }
+        }
+      }
+    }
+  }
+}
 
 </style>
\ No newline at end of file