1.登录功能开发

2.axios封装、api封装

.env.development

@@ -0,0 +1,11 @@
+# 页面标题
+VITE_APP_TITLE = 国土空间规划“一张图”实施监督信息系统
+
+# 开发环境配置
+VITE_APP_ENV = 'development'
+
+port = '8082'
+
+# 国土空间规划“一张图”实施监督信息系统/开发环境
+VITE_APP_BASE_API = '/dev-api'
+VITE_ARC_SERVER_API = '/qx-arc-server'

.env.production

@@ -0,0 +1,16 @@
+# 页面标题
+VITE_APP_TITLE = 国土空间规划“一张图”实施监督信息系统
+
+# 生产环境配置
+VITE_APP_ENV = 'production'
+#启动端口
+port = '5000'
+# 国土空间规划“一张图”实施监督信息系统/生产环境
+VITE_APP_BASE_API = 'http://192.168.100.252:8080'
+VITE_ARC_SERVER_API = 'http://192.168.100.252:6080'
+#通辽部署环境
+#VITE_APP_BASE_API = 'http://10.255.133.174:8080'
+#VITE_ARC_SERVER_API = 'http://10.255.133.174:6080'
+
+# 是否在打包时开启压缩，支持 gzip 和 brotli
+#VITE_BUILD_COMPRESS = gzip

build/index.js

@@ -0,0 +1,35 @@
+const { run } = require('runjs')
+const chalk = require('chalk')
+const config = require('../vue.config.js')
+const rawArgv = process.argv.slice(2)
+const args = rawArgv.join(' ')
+
+if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
+  const report = rawArgv.includes('--report')
+
+  run(`vue-cli-service build ${args}`)
+
+  const port = 9526
+  const publicPath = config.publicPath
+
+  var connect = require('connect')
+  var serveStatic = require('serve-static')
+  const app = connect()
+
+  app.use(
+    publicPath,
+    serveStatic('./dist', {
+      index: ['index.html', '/']
+    })
+  )
+
+  app.listen(port, function () {
+    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
+    if (report) {
+      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
+    }
+
+  })
+} else {
+  run(`vue-cli-service build ${args}`)
+}

package.json

@@ -17,7 +17,8 @@
         "url-loader": "^4.1.0",
         "view-design": "^4.3.2",
         "vue": "^2.6.12",
-        "vue-lazyload": "^1.3.3"
+        "vue-lazyload": "^1.3.3",
+        "vue-template-compiler": "2.7.16"
     },
     "devDependencies": {
         "autoprefixer": "^7.1.2",
@@ -63,7 +64,13 @@
         "webpack": "^3.6.0",
         "webpack-bundle-analyzer": "2.13.1",
         "webpack-dev-server": "^2.9.1",
-        "webpack-merge": "^4.1.0"
+        "webpack-merge": "^4.1.0",
+        "vuex": "3.6.0",
+        "js-base64": "^3.7.2",
+        "js-cookie": "3.0.1",
+        "jsencrypt": "3.2.1",
+        "jszip": "^3.10.1",
+        "file-saver": "^2.0.5"
     },
     "engines": {
         "node": ">= 6.0.0",

src/api/login.js

@@ -0,0 +1,61 @@
+import request from '@/utils/request'
+
+// 登录方法
+export function login(username, password, code, uuid) {
+  return request({
+    url: '/auth/login',
+    headers: {
+      isToken: false
+    },
+    method: 'post',
+    data: { username, password, code, uuid }
+  })
+}
+
+// 注册方法
+export function register(data) {
+  return request({
+    url: '/auth/register',
+    headers: {
+      isToken: false
+    },
+    method: 'post',
+    data: data
+  })
+}
+
+// 刷新方法
+export function refreshToken() {
+  return request({
+    url: '/auth/refresh',
+    method: 'post'
+  })
+}
+
+// 获取用户详细信息
+export function getInfo() {
+  return request({
+    url: '/system/user/getInfo',
+    method: 'get'
+  })
+}
+
+// 退出方法
+export function logout() {
+  return request({
+    url: '/auth/logout',
+    method: 'delete'
+  })
+}
+
+// 获取验证码
+export function getCodeImg() {
+  return request({
+    url: '/code',
+    headers: {
+      isToken: false
+    },
+    method: 'get',
+    timeout: 20000
+  })
+}

src/api/map.js

@@ -0,0 +1,35 @@
+import request from '@/utils/request'
+
+// 收藏
+export function Collect(username, bsm) {
+    return request({
+        url: '/apply/yzt/zyml/Collect',
+        method: 'post',
+        data: { username: username, bsm: bsm }
+    })
+}
+
+// 获取资源目录
+export function GetResourceTree() {
+    return request({
+        url: '/apply/yzt/zyml/GetTree',
+        method: 'get'
+    })
+}
+
+// 获取我的收藏
+export function GetMyCollect() {
+    return request({
+        url: '/apply/yzt/zyml/GetMyCollect',
+        method: 'get'
+    })
+}
+
+// 收藏
+export function PoiQuery(data) {
+    return request({
+        url: '/apply/yzt/search/poi',
+        method: 'post',
+        data: data
+    })
+}

src/api/menu.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+// 获取路由
+export const getRouters = () => {
+    return request({
+        url: '/system/menu/getRouters',
+        method: 'get'
+    })
+}

src/assets/data/chartJson.js

@@ -0,0 +1,22 @@
+import request from '@/utils/requestTwo.js'
+// let Base64 = require('js-base64').Base64;
+import { Base64 } from 'js-base64'
+
+// 地图图表
+const mapChart = {
+        GeoJson: `/js/${XZQ_DM}Chart.geojson`,
+    }
+    /**
+     * 加载地图
+     * @param parameter
+     * @returns {*}
+     */
+export function LoadMapJson(callback) {
+    request({
+        method: 'get',
+        url: mapChart.GeoJson
+    }).then(res => {
+        var geojson = JSON.parse(Base64.decode(res));
+        callback(geojson)
+    })
+}

src/assets/data/mapchart.js

@@ -0,0 +1,48 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+(function(root, factory) {
+    // eslint-disable-next-line
+    root = root || window;
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        // eslint-disable-next-line
+        define(['exports', 'echarts'], factory);
+    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+        // CommonJS
+        factory(exports, require('echarts'));
+    } else {
+        // Browser globals
+        factory({}, root.echarts);
+    }
+}(this, function(exports, echarts) {
+    var log = function(msg) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
+        }
+    }
+    if (!echarts) {
+        log('ECharts is not Loaded');
+        return;
+    }
+    if (!echarts.registerMap) {
+        log('ECharts Map is not loaded')
+        return;
+    }
+}));

src/assets/file.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 48 48" fill="rgba(255, 141, 26, 1)">
+    <path d="M0 0h48v48H0z" fill="none"></path>
+    <path d="M42 38V10c0-2.21-1.79-4-4-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4zM17 27l5 6.01L29 24l9 12H10l7-9z"></path>
+</svg>

src/assets/files/report.pdf

@@ -0,0 +1,5130 @@
+《通辽市国土空间总体规划（2019-2035）》专题研究——
+
+ 通辽市资源环境承载能力和国土空
+         间开发适宜性评价报告
+
+                           【过程稿】
+
+                     苍穹数码技术股份有限公司
+                                  2020.9
+                                  目录
+
+一、前言 ................................................. 1
+
+      （一）区域基本情况 ............................................................................................................... 1
+      （二）评价工作情况 ............................................................................................................... 9
+
+二、评价方法和过程 ...................................... 12
+
+      （一）技术路线 ..................................................................................................................... 12
+      （二）数据准备 ..................................................................................................................... 13
+      （三）指标选择 ..................................................................................................................... 15
+      （四）评价方法和过程 ......................................................................................................... 16
+
+三、资源环境禀赋特征 .................................... 20
+
+      （一）土地资源 ..................................................................................................................... 20
+      （二）水资源 ......................................................................................................................... 38
+      （三）草原资源 ..................................................................................................................... 50
+      （四）森林资源 ..................................................................................................................... 52
+      （五）湿地资源 ..................................................................................................................... 56
+      （六）能矿资源 ..................................................................................................................... 65
+
+四、本底评价结果 ........................................ 70
+
+      （一）生态保护重要性 ......................................................................................................... 70
+      （二）农业生产适宜性与承载规模................................................................................... 110
+      （三）城镇建设适宜性与承载规模 ................................................................................... 140
+
+五、现状问题和风险 ..................................... 164
+
+六、潜力分析 ........................................... 182
+
+      （一）农业生产空间潜力规模评价 ................................................................................... 182
+      （二）城镇建设潜力规模评价 ........................................................................................... 188
+
+七、结论建议 ........................................... 191
+
+      （一）国土空间开发保护中的资源环境突出问题和风险 ...............................................191
+      （二）各旗县主体功能调整建议 ....................................................................................... 192
+      （三）规划指标落实建议 ................................................................................................... 193
+      （四）支撑“三线”划定 .......................................................................................................194
+      （五）国土空间格局优化建议 ........................................................................................... 197
+      （六）重大工程安排建议 ................................................................................................... 197
+      （七）高质量发展引导性建议 ........................................................................................... 198
+
+                                                                     I
+一、前言
+    （一）区域基本情况
+
+      1.区位交通
+      通辽市位于内蒙古自治区东部、松辽平原的西端，东与吉林省接
+壤，南与辽宁省毗邻，西与赤峰市、锡林郭勒盟交界，北与兴安盟相
+连，总面积 58862 平方公里。地理坐标是北纬 42°15′~45°59′、
+东经 119°14′~123°43′，市域南北长约 418 公里，东西宽约 370
+公里。
+
+                                 图 1-1 通辽市区位图
+      通辽是地理区位优越，地处东北与华北的交汇中心，距东北最大
+的中心城市沈阳 250 公里，周边 800 公里范围内有 15 个百万人口以
+上城市，距离出海口锦州港仅 400 公里；通辽市与东北经济区中的哈
+尔滨、长春、沈阳一起被国务院规划为区域性物流节点城市，摆在与
+东北三省省会城市同等重要的战略位置，地处环渤海经济圈、东北经
+济区和东北亚三角经济区，是东北区域商贸物流中心城市和国家一级
+物流节点城市，是国家实施“一带一路”和内蒙古自治区推进向北开
+
+                                                                     1
+放的重要战略节点。
+      通辽市交通条件优越，形成集高速公路、铁路、航空为一体的综
+
+合运输网络。市域内有通新客专、京通、通让、大郑、通霍、集通 6
+条铁路交汇，通辽火车站是全国 50 个铁路枢纽编组大站之一，现已
+开通“通满欧”国际货运班列，通辽至京沈高铁新民北站客运专线已
+于 2018 年末通车运行，这标志着通辽乃至蒙东地区迈入高铁时代。
+市域公路总里程达到 2.2 万公里，其中高速公路总里程达到 646 公
+里、一级公路总里程达到 886 公里；4 条高速公路、7 条国道和 7 条
+省道贯穿全境。通辽民航机场是内蒙古东部区的重要航空港之一，飞
+行区等级为 4C 级，现已开通航线 14 条，通航城市 16 个，2018 年民
+航客运量 98.3 万人，货邮吞吐量完成 1837.1 吨；霍林河民航机场
+2017 年通航运营。
+
+      2.自然条件
+      （1）地形地貌
+      通辽市南、北部地势高，而中部地势低平，整体呈马鞍形。北部
+为大兴安岭南麓余脉的石质山地丘陵，海拔 400-1444 米，约占全市
+总面积的 23%；中部为西辽河流域沙质冲积平原，海拔 120-320 米，
+约占全市总面积的 70%；南部为辽西山地边缘的浅山、黄土丘陵区，
+海拔 550-730 米，约占全市总面积的 7%。在西辽河流域冲积平原与
+山地、丘陵之间的过渡地带分布有沙丘与沙地，海拔大多在 200-400
+米之间。罕山吞特尔峰为通辽市最高峰，海拔 1444.2 米。最低点在
+科尔沁左翼后旗境内，海拔不到 100 米。通辽市是一个沙沼坨甸、浅
+山丘陵纵横交错的地区，沙区、山区约占 80%，是科尔沁沙地（我国
+四大沙地之一）的腹地，科尔沁沙地在通辽区域内的面积 4086 万亩，
+占全市总面积的 46%，科尔沁沙地是京津冀和辽中南地区风沙的主要
+
+                                                                     2
+来源。
+
+                              图 1-2 通辽市地形地貌图
+      （2）气象条件
+      通辽市地处干旱和半干旱气候区，境内受蒙古高原气流影响，属
+温带大陆性季风气候，春季干旱大风多，夏季炎热降雨集中，秋季凉
+爽短促，冬季漫长少雪寒冷。气候特点为雨热同期，有利于植物生长
+及物质转化和积累，干旱、洪涝和大风天气是影响农、牧、林生产的
+主要自然灾害。
+      通辽市夏季多年平均气温为 23.3℃，冬季多年平均气温为-
+14.5℃。全市年平均日照数一般都在 3000 小时左右，日照百分率约
+为 68%，无霜期日数一般在 140 天左右，平均冻土深度一般在 130-
+
+                                                                     3
+180 厘米之间。多年平均降水量在 350-450 毫米之间，夏季降水量占
+全年的 68%，春秋季占 31%，冬季只占 1%。全市冬季多偏西北风，夏
+季多偏南风，全年平均风速超过 4 米/秒，大风的天数一半以上都集
+中在春季。
+
+                   图 1-3 通辽市年平均气温（℃）等值线图
+
+                                                                     4
+               图 1-4 通辽市年年总降水量（毫米）等值线图
+      （3）水文条件
+      通辽市水系主要由西辽河、柳河、大凌河、嫩江及东辽河水系组
+成，其中西辽河流域在通辽地区流域面积 35721 平方千米，约占全市
+总面积的 77.1%。流域面积在 100 平方千米以上的河流 47 条，其中
+辽河流域 38 条，松花江流域 3 条、大凌河流域 5 条，内陆河 1 条。
+主要河流有牤牛河、养畜牧河、教来河、老哈河、西拉木伦河、西辽
+河、东辽河、乌力吉木仁河和霍林河。全市多年平均地表水资源量 7.99
+亿立方米，多年平均地下水资源量 35.31 亿立方米，全市多年平均年
+水资源总量 37.47 亿立方米（扣除重复计算量 5.83 亿立方米）。自然
+湖泊 600 余个，大中小型水库共 121 座。湿地面积 22.8 万公顷，其
+
+                                                                     5
+中河流湿地面积 5.8 万公顷，湖泊湿地面积 2.3 万公顷，沼泽和沼泽
+化草甸湿地面积 6.5 万公顷，库塘湿地面积 8.2 万公顷。
+
+      （4）土壤植被条件
+      通辽市的土壤分共分 15 个土类，36 个亚类，72 个土属，176 个
+土种。风沙土是面积最大的土类，约占总土壤面积的 43.50%；其次是
+灰色草甸土，约占总土壤面积的 22.00%；再次是栗钙土，约占总土壤
+面积的 10.40%；此外还有暗棕壤、黑钙土、栗褐土、粗骨土、褐土、
+沼泽土、草甸土、新积土等，约占土壤面积的 24.10%。
+
+                           图 1-5 通辽市土壤类型图
+      通辽市地处东北、华北、内蒙古高原三大自然地理区的交汇处，
+处于森林向草原、中温带半湿润向半干旱过渡的地区，作为农耕和游
+
+                                                                     6
+牧分界 400mm 等降水线自市域中部穿过，生态环境较为脆弱。通辽市
+原始景观为榆树疏林草原，以草原植被为主，森林植被居其次。植被
+类型由干旱草原及旱生草本植物构成。根据第三次全国土地调查数据，
+通辽市草地面积 1712485 公顷，其中可利用草地 91.3%，可利用草原
+中有 90%属于退化、沙化、盐渍化草原；林地总面积 1429404 公顷，
+覆盖率达 24.28%，森林总蓄积 4129 万立方米。
+
+      3.经济社会发展情况
+      通辽市前身哲里木盟，1999 年 10 月，撤销地级哲里木盟建制，
+成立地级通辽市政府。通辽全市辖 1 个市辖区、1 个县级市、1 个县、
+5 个旗、1 个经济技术开发区，即科尔沁区、霍林郭勒市、开鲁县、
+科尔沁左翼中旗、科尔沁左翼后旗、奈曼旗、库伦旗、扎鲁特旗、通
+辽经济技术开发区。现有苏木乡镇街道 110 个（26 个苏木、4 个乡、
+61 个镇、19 个街道），3876 个嘎查村社区（2098 个嘎查、1576 个村、
+202 个城镇社区），281 个国有农牧林场分场。
+      2018 年末全市常住人口 313.32 万人，是内蒙古自治区第二人口
+大市，城镇人口 154.87 万人，城镇人口比重 49.43%。全市蒙古族人
+口约为 156 万人，分别占全国和全世界蒙古族人口的 1/4 和 1/5，是
+全国蒙古族人口最为集中的地区。
+
+                                                                     7
+                              图 1-6 通辽市行政区划图
+      2018 年，通辽市完成地区生产总值（GDP）1301.6 亿元，按可比
+价格计算，比上年增长 4.1%。其中，第一产业增加值 270.5 亿元，增
+长 1.8%；第二产业增加值 345.1 亿元，增长 1.4%；第三产业增加值
+686.0 亿元，增长 6.6%。三次产业比重为 20.8∶26.5∶52.7。按常住
+人口计算人均地区生产总值 41573 元，按 2018 年平均汇率计算为
+6282 美元,增长 4.0%。
+
+                                                                     8
+    （二）评价工作情况
+
+      1.研究背景
+      （1）时代发展的迫切需求
+      我们处在生态文明建设的新时代，新时期人民日益增长的美好生
+活需求表现为对建设美丽中国和建设人与自然和谐共生的现代化的
+诉求，但同时我们也处于一个水资源、粮食问题、能源安全、生态安
+全等问题日趋严重时代。生态空间遭受持续挤压，生态系统退化；资
+源错配、不合理的开发利用导致生态保护形式严峻、资源约束趋紧、
+环境污染严重。随着时代的发展，我们迫切需要将开发活动约束在资
+源环境承载力内，统筹布局生态、农业、城镇等功能空间，划定生态
+保护红线、永久基本农田和城镇开发边界等空间管控边界，实现可持
+续发展。
+      （2）生态文明建设的重要举措
+      党的“十八大”将生态文明建设被纳入统筹推进“五位一体”总
+体布局的重要内容。十八届三中全会更是将“建立资源环境承载能力
+监测预警机制,对水土资源、环境容量和海洋资源超载区域实行限制
+性措施”，作为中央深化改革的重要任务之一，列入了《中共中央关
+于全面深化改革若干重大问题的决定》。
+      十八大以来，习近平总书记在近 10 次重要讲话中提及资源环境
+承载能力评价，并对相关工作提出明确要求。2018 年 4 月，长江经济
+带发展座谈会提到要做好资源环境承载能力评价；2019 年 3 月，两
+会中提出坚持底线思维，以国土空间规划为依据，把城镇、农业、生
+态空间和生态保护红线、永久基本农田保护红线、城镇开发边界作为
+推进城镇化不可逾越的红线。中央制订了一系列政策文件明确要求展
+开国土空间规划的“双评价”工作。2015 年 9 月，中共中央、国务院
+
+                                                                     9
+印发的《生态文明体制改革总体方案》（中发〔2015〕25 号）明确指
+出，规划编制前应当进行资源环境承载能力评价，以评价结果作为规
+划的基本依据；2017 年 5 月 27 日，环境保护部、发改委联合发布的
+《生态保护红线划定指南》更是明确了“在资源环境承载能力和国土
+空间开发适宜性评价的基础上，按生态系统服务功能重要性、生态环
+境脆弱性识别生态保护红线范围，并落实到国土空间，确保生态保护
+红线布局合理、落地准确、边界清晰”；2019 年 5 月 9 日，中共中央、
+国务院出台《关于建立国土空间规划体系并监督实施的若干意见》，
+明确我国国土空间规划体系的主要内容，并强化国土空间规划的基础
+作用。自此，作为生态文明建设的重要举措、优化国土空间格局的基
+本依据和编制国土空间规划的前提条件，双评价的重要性日益凸显。
+
+      （3）国土空间规划的前提基础
+      国土空间规划是国家空间发展的指南、可持续发展的空间蓝图，
+是各类开发保护建设活动的基本依据。“资源环境承载能力和国土空
+间开发适宜性评价”（简称“双评价”）工作并不是简单的科学研究延
+伸，而是国土空间规划编制的前提和基础。
+      通过“双评价”工作，可以客观的反映现状资源环境的优势与短
+板，发现未来发展的潜力。国土空间资源的“双评价”能对空间功能
+区域进行划分，增强空间规划的环境合理性和协调性。此外，“双评
+价”成果从空间上明确规划范围内未来生态修复的要点，并有助于分
+析持续提升国土空间资源环境承载能力的路径。通过双评价工作，可
+以倒逼形成以生态优先、绿色发展为导向的高质量发展新路子，是国
+土空间规划编制实现科学性和合理性的前提基础。
+
+      2.评价工作开展情况
+      2019 年 10 月，通辽市国土空间规划工作项目启动会圆满召开，
+
+                                                                    10
+由我院与辽宁省城乡建设规划院共同承担本次规划编制工作。
+      2019 年 10 月 22 日，项目组赴通辽市，进行为期半个月的资料
+
+收集及现场踏勘工作，对部分图件矢量处理，初步构建评价指标体系
+及阈值。
+
+      2019 年 11 月 20 日，项目组再次赴通辽市，向通辽市自然资源
+局进行工作进展汇报，并进行一个星期左右的补充调研工作。
+
+      2020 年 2 月-3 月，项目组对通辽市国土空间“双评价”工作进
+行系统的研究，并进行“双评价”报告编写。
+
+      2020 年 4 月-5 月，项目组形成通辽市国土空间“双评价”初步
+方案，并进行初步方案汇报。
+
+      2020 年 6 月-8 月，项目组与内蒙古自治区“双评价”进行协调，
+对通辽市国土空间“双评价”初步方案进行针对性修改，并开展为期
+半个月的部门座谈补充调研工作。
+
+      3.评价目标
+      分析区域资源环境禀赋条件，研判国土空间开发利用问题和风险，
+识别生态系统服务功能极重要和生态极脆弱空间，明确农业生产、城
+镇建设的最大合理规模和适宜空间，为科学编制通辽市国土空间规划，
+优化国土空间开发保护格局，完善主体功能定位，划定生态保护红线、
+永久基本农田、城镇开发边界三条控制线，实施国土空间综合整治和
+生态修复提供基础性依据，促进形成以生态优先、绿色发展为导向的
+高质量发展新路子。
+
+      4.评价原则
+      （1）底线约束
+      坚持最严格的生态环境保护制度、耕地保护制度和节约用地制度，
+维护生态安全、粮食安全等国土安全，在优先识别生态保护极重要区
+
+                                                                    11
+基础上，综合分析农业生产、城镇建设的合理规模和适宜等级。
+      （2）问题导向
+      充分考虑通辽市全域水、土地、气候、生态、环境、灾害等资源
+
+环境要素，定性定量相结合，客观评价区域资源禀赋与环境条件，识
+别国土空间开发利用现状中的问题和风险，有针对性提出意见和建议。
+
+      （3）因地制宜
+      充分体现不同空间尺度和区域差异，合理确定评价内容、技术方
+法和结果等级。通辽市双评价应充分衔接内蒙古自治区双评价成果，
+并结合本地实际，在生态保护重要性等方面开展有针对性的补充和深
+化评价。
+      （4）简便实用
+      在保证科学性的基础上，抓住解决实际问题的本质和关键，选择
+通辽市的代表性要素和指标，采用合理方法工具，结果表达简明扼要。
+双评价要紧密结合国土空间规划编制，强化操作导向，确保评价成果
+科学、权威、适用、管用、好用。
+
+二、评价方法和过程
+    （一）技术路线
+
+      通辽市“双评价”要满足通辽市国土空间规划编制需求，明确评
+价目标，合理制定评价工作方案。首先，开展相关数据收集工作，结
+合实地调研和专家咨询等方式，系统梳理当地资源环境生态特征与突
+出问题，在此基础上确定评价内容、核心指标及计算精度，强化分析，
+形成通辽市“双评价”报告，为通辽市国土空间规划的编制提供支撑。
+
+                                                                    12
+                         图 2-1 评价工作技术路线图
+    （二）数据准备
+
+      双评价要保证数据的权威性、准确性、时效性，数据时间上尽量
+与通辽市国土空间规划的基准年 2019 年保持一致，但对于缺失基准
+年相关数据，均采用最新年份数据，并结合实际进行适当修正。
+
+      评价数据统一采用 2000 国家大地坐标系（CGCS2000），高斯-克
+吕格投影，陆域部分采用 1985 国家高程基准，计算精度采用 30 米
+×30 米栅格。
+
+                                                                    13
+       表 2-1 通辽市双评价数据收集清单
+
+                     精度要求          年份      格式   来源
+
+类型     名称            （分辨           2019
+                                   2009
+                     率）            2018
+                                   2019
+基础地理    市行政区划             -        2019    栅格 自然资源局
+    类  数字高程模型        优于或等          1995
+                     于 1:25 万              栅格   地理空间数据
+         （DEM）                        -             云平台
+                                2013-2018
+       全国第二次土地利用     优于或等                  数据库 自然资源局
+       调查通辽市 2018 年  于 1:1 万       2019
+                                   2019
+           年度变更成果               2013-2018
+                                2015-2018
+       全国第三次国土资源        1:2000  2000-2010  数据库 自然资源局
+                                   2019
+土地资源    调查通辽市数据         1:1 万              Excel 农牧局
+    类   农用地质量分等       优于或等      2000-2019
+                     于 1:100 万                  资源环境数据
+       土壤粉砂含量数据                    2018    栅格       云平台
+                                   2017
+       土壤数据集          1km          2019    栅格   寒区旱区科学
+                     （1:10                         数据中心
+
+                     万）
+
+水资源类 市水资源公报          -                     PDF  水务局
+
+       各控制单元或流域分     与控制单                  Excel 水务局
+             区水质目标   元或流域
+                     分区一致
+
+       市水（环境）功能区     -                     Excel 水务局
+
+环境类    划                                   Excel 生态环境局
+
+       市历年环境污染物统     -                     Excel 生态环境局
+                                                    全国生态状况
+       计数据
+                                           栅格 遥感调查与评
+       市历年大气、水环境     -                                   估成果
+
+       质量监测数据
+
+生态类    NPP 数据集       250m
+
+       气象台站站点坐标      -
+
+       逐日平均风速、最大
+       风速、极大风速 涉及空间
+                      插值的数
+气象类          逐日降水量    据精度，                          国家气象科学
+       逐日最高气温、最低      与所使用                 Excel 数据中心
+                     的 DEM 一
+          气温、平均气温
+        月均空气相对湿度          致
+
+       （%）
+
+交通类    交通路网          -                     矢量   全国地理信息
+                                             -  资源目录服务
+       交通枢纽          -
+                                                      系统
+                                                   百度地图
+
+                        14
+（三）指标选择
+
+根据指南并结合实际情况选择以下指标来进行通辽生态保护重
+
+要性评价、适宜性评价和承载规模评价，具体见表 2-2。
+
+表 2-2 资源环境承载能力和国土空间开发适宜性评价指标体系
+
+    集成          适宜性评价              承载规模评价
+    评价
+单项      生态保护重   农业生产适   城镇建设适宜性    农业生产承载 城镇建设承载
+评价       要性评价       宜性
+土地资                                规模        规模
+    源
+水资源     ——      ▲坡度●土 ▲坡度●高程       ▲土地耕作条    ▲土地建设条
+  气候            壤粉砂含量 ●地形起伏度       件▲高程▲土           件
+                                    壤环境容量
+  生态    ——      ▲降水量    ▲用水总量控制    ▲灌溉可用水    ▲城镇人均需
+                            指标模数   量▲农田灌溉    水量▲城镇可
+  环境                               定额▲农田灌
+                                   溉水有效利用        用水量
+  灾害
+                                         系数
+
+            ——  ▲活动积温     ▲温湿指数    ——        ——
+        ▲生态系统     ●海拔         ●海拔
+        服务功能重                      ——        ——
+        要性（生物   ▲土壤盐渍          ——
+                 化脆弱性              ——        ——
+         多样性维           ●大气环境容量
+        护、水源涵   ●土壤环境    （多年静风日    ——        ——
+        养、水土保   容量（土壤
+        持、防风固           数、多年平均风
+        沙）▲生态    污染物含   速）●水环境容
+        脆弱性（水       量）  量（年均水质目
+        土流失、土           标浓度、地表水
+        地沙化、石   ●气象灾害
+                危险性（干       资源量）
+           漠化）  旱、雨涝、   ●地质灾害危险
+                高温热害、   性（活动断层距
+            ——  低温冷害、   离、地震动峰值
+                大风灾害）   加速度、地面沉
+            ——          降累计沉降量或
+                        沉降速率、地面
+                        塌陷易发性、崩
+                        塌/滑坡/泥石流
+
+                            易发性）
+
+                        15
+    集成             适宜性评价         承载规模评价
+    评价
+单项      生态保护重  农业生产适   城镇建设适宜性   农业生产承载 城镇建设承载
+评价       要性评价      宜性
+                                 规模  规模
+  区位
+        ——     ——       ●区位优势度   ——  ——
+                       （交通干线可达
+                       性、中心城区可
+                       达性、交通枢纽
+                       可达性、交通网
+
+                           络密度）
+
+注：▲为基础指标，●为修正指标。
+
+（四）评价方法和过程
+
+      1.本底评价
+      将资源环境承载能力和国土空间开发适宜性作为有机整体，主要
+围绕水资源、土地资源、气候、生态、环境、灾害等要素，针对生态
+保护、农业生产（种植、畜牧）、城镇建设三大核心功能开展本底评
+价。
+      （1）生态保护重要性评价
+      从区域生态安全底线出发，在全域评价水源涵养、水土保持、生
+物多样性维护、防风固沙等生态系统服务功能重要性，以及水土流失、
+石漠化、土地沙化及沙源流失等生态脆弱性，综合形成生态保护极重
+要区和重要区。在省级评价结果基础上，根据更高精度数据和实地调
+查进行边界校核。从生态空间完整性、系统性、连通性出发，结合重
+地下水补给、洪水调蓄、河(湖)岸防护、自然遗迹、自然景观等进行
+补充评价和修正。
+      （2）农业生产适宜性评价
+      在生态保护极重要区以外的区域，开展种植业、畜牧业等农业生
+产适宜性评价，识别农业生产适宜区和不适宜区。省级评价内容和精
+度已满足市县国土空间规划编制需要的，可直接在省级评价结果基础
+上进行综合分析。
+
+                                                                    16
+      根据农业生产相关功能的要求，可进一步细化评价单元、提高评
+价精度、补充评价内容。
+
+      可结合特色村落布局、重大农业基础设施配套、重要经济作物分
+布、特色农产品种植等，进一步识别优势农业空间。
+
+      （3）城镇建设适宜性评价
+      在生态保护极重要区以外的区域，优先考虑环境安全、粮食安全
+和地质安全等底线要求，识别城镇建设不适宜区。进一步提高评价精
+度，对城镇建设不适宜区范围进行校核根据城镇化发展阶段特征，增
+加人口、经济、区位、基础设施等要素，识别堿镇建设适宜区。
+      结合当地实际，可针对矿产资源、历史文化和自然景观资源等，
+开展必要的补充评价。
+      （4）承载规模评价
+      基于现有经济技术水平和生产生活方式，以水资源、空间约束等
+为主要约束，缺水地区重点考虑水平衡，分别评价各评价单元可承载
+农业生产、城镇建设的最大合理规模。各地可结合环境质量目标、污
+染物排放标准和总量控制等因素，评价环境容量对农业生产、城镇建
+设约束要求。按照短板原理，取各约束条件下的最小值作为可承载的
+最大合理规模。
+      对照国内外先进水平，在技术进步、生产生活方式转变的情景下，
+评价相应的可承载农业生产、城镇建设的最大合理规模。市级以县级
+行政区为单元评价承载规模。
+
+      2.综合分析
+      （1）资源环境禀赋分析
+      分析水、土地、森林、草原、湿地、冰川、荒漠、能源矿产等自
+然资源的数量(总量和人均量)、质量、结构、分布等特征及变化趋势，
+
+                                                                    17
+结合气候、生态、环境、灾害等要素特点，对比国家、省域平均情况，
+对标国际和国内，总结资源环境禀赋优势和短板。
+
+      （2）现状问题和风险识别
+      将生态保护重要性、农业生产及城镇建设适宜性评价结果与用地
+现状进行对比，重点识别以下冲突(包括空间分布和规模):生态保护
+极重要区中永久基本农田、园地、人工商品林、建设用地；种植业生
+产不适宜区中耕地、永久基本农田；城镇建设不适宜区中城镇用地；
+地震灾害高危险区内农村居民点。
+      对比现状耕地规模与耕地承载规模、现状城镇建设用地规模与城
+镇建设承載规模、牧区实际载畜量与牲畜承載规模，判断区域资源环
+境承载状态。对资源环境超載的地区，找出主要原因，提出改善路径。
+      可根据相关评价因子，识别水平衡、水土保持、生物多样性湿地
+保护、地面沉降、土壤污染等方面问题，研判未来变化趋势和存在风
+险。
+      （3）潜力分析
+      根据农业生产适宜性评价结果，对种植业、畜牧业不适宜区以外
+的区域，根据土地利用现状和资源环境承载规模，分析可开发为耕地、
+牧草地的空间分布和规模。
+      根据城镇建设适宜性评价结果，对城镇建设不适宜区以外的区域
+(市层面可直接在城镇建设适宜区内)，扣除集中连片耕地后，根据土
+地利用现状和城镇建设承载规模，分析可用于城镇建设的空间分布和
+规模。
+      （4）情景分析
+      针对气候变化、技术进步、重大基础设施建设、生产生活方式转
+变等不同情景，分析对水资源、土地资源、生态系统、自然灾害、能
+
+                                                                    18
+源资源等的影响，给出相应的评价结果，提出适应和应对的措施建议，
+支撑国土空间规划多方案比选。
+
+      3.成果应用
+      生态评价方面应基于科学评价确定保护底线，对农业生产、城镇
+建设评价结果应结合资源禀赋、环境条件和发展目标、治理要求进行
+综合权衡，并与自治区评价成果衔接，做出合理判断。评价成果具体
+从以下方面支撑国土空间规划编制：
+      （1）支撑国土空间格局优化
+      生态格局应与生态保护重要性评价结果相匹配，农业格局应与农
+业生产适宜性评价结果相衔接。
+      （2）支撑完善主体功能分区
+      生态保护、农业生产、城镇建设单功能特征明显的区域，可作为
+重点生态功能区、农产品主产区、城市化发展区备选区域。两种或多
+种功能特征明显的区域，按照安全优先、生态优先、节约优先、保护
+优先的原则，结合区域发展战略定位，以及在全国或区域生态、农业、
+城镇格局中的重要程度，综合权衡后，确定其主体功能定位。
+      （3）支撑划定三条控制线
+      生态保护极重要区，作为划定生态保护红线的空间基础。种植业
+生产适宜区，作为永久基本农田的优选区域；退耕还林还草等应优先
+在种植业生产不适宜区内开展城镇开发边界优先在城镇建设适宜区
+范围内划定，并避让城镇建设不适宜区，无法避让的需进行专门论证
+并釆取相应措施。
+      （4）支撑规划指标确定和分解
+      耕地保有量、建设用地规模等指标的确定和分解，应与农业生产、
+城镇建设现状及未来潜力相匹配，不能突破区域农业生产、城镇建设
+
+                                                                    19
+的承载规模。
+      （5）支撑重大工程安排
+      国土空间生态修复和国土综合整治重大工程的确定与时序安排，
+
+应优先在生态极脆弱、灾害危险性高环境污染严重等区域开展。
+      （6）支撑高质量发展的国土空间策略
+      在坚守资源环境底线约束有效解决开发保护突出问题的基础上，
+
+按照高质量发展要求，提出产业结构和布局优化、资源利用效率提高、
+重大基础设施和公共服务配置等国土空间策略的建议。
+
+      （7）支撑编制空间类专项规划
+      自然保护地、生态保护修复、矿产资源开发利用等专项规划的主
+要目标任务，应与评价成果相衔接。
+
+三、资源环境禀赋特征
+    （一）土地资源
+
+      1.现状情况
+      通辽市土地总面积 5.89 万平方公里，占内蒙古自治区土地面积
+的 5.0%，国土面积位于全区第 8 位。区内有著名的草原、森林和沙
+漠，土地类型多样，发展空间广阔。
+      根据通辽市第三次国土调查数据，全市土地总面积 5886238.19
+公顷，其中农用地 5235071.86 公顷，占总面积的 88.9%；建设用地
+159684.11 公顷，占总面积的 2.7%；其他用地 491482.22 公顷，占总
+面积的 8.3%。
+      农用地中耕地 3335.09 万亩（2223392.21 公顷），占全市土地总
+面积的 37.8%；园地 5.96 万亩（3975.02 公顷），占全市土地总面积
+的 0.1%；林地 2155.09 万亩（1436724.33 公顷），占全市土地总面积
+的 24.4%；牧草地 2174.55 万亩（1449701.79 公顷），占全市土地总
+
+                                                                    20
+面积的 24.6%；其他农用地 181.92 万亩（121278.51 公顷），占全市
+土地总面积的 2.1%。
+
+      建设用地中城乡建设用地 115198.22 公顷，占全市土地总面积的
+2.0%；区域基础设施用地 26201.59 公顷，占全市土地总面积的 0.4%；
+其他建设用地 18284.30 公顷，占全市土地总面积的 0.3%。
+
+      其他用地中陆地水域 26322.57 公顷，占全市土地总面积的 0.4%；
+其他土地 465159.65 公顷，占全市土地总面积的 7.9%。
+
+                                                                    21
+           表 3-1 通辽市三大类用地现状汇总表（2019）                      单位：公顷
+
+     用地类型  通辽市 科尔沁区 科左中旗 科左后旗 开鲁县 库伦旗 奈曼旗 扎鲁特旗 霍林郭勒
+
+     耕地    2223392.21 242105.48 448700.98 457493.27 289005.41 177470.99 315703.13 290183.25 2729.70
+
+     园地    3975.02 1167.11 1090.92 196.85 391.08 164.05 694.20 268.74 2.07
+
+农用地   林地   1436724.33 41985.19 155959.67 245560.74 57144.28 127183.99 349043.53 452924.39 6922.54
+     牧草地   1449701.79 7467.28 150399.94 318002.58 29432.42 87297.52 33683.15 794352.03 29066.87
+
+     其他农用地 121278.51 10788.73 24550.43 22501.31 9112.90 11397.77 17826.42 24208.07 892.88
+
+     小计    5235071.86 303513.79 780701.94 1043754.75 385086.09 403514.32 716950.43 1561936.48 39614.06
+
+     城乡建设用地 115198.22 22211.10 21175.47 15978.75 15312.44 7972.56 18414.59 11067.47 3065.84
+
+             区域基础设施用地 26201.59 5491.68 3070.25   5233.69  3462.47 1058.14 3423.05  3296.95 1165.36
+建设用地                                             1080.29  606.99 628.52 1060.54    5377.55 6757.03
+
+                其他建设用地 18284.30 1081.24 1692.14
+
+     小计    159684.11 28784.02 25937.86 22292.73 19381.90 9659.22 22898.18 19741.97 10988.23
+
+     其他土地  465159.65 18727.53 147571.61 74417.88 30953.61 55414.78 71715.50 59098.77 7259.97
+
+其他用地 陆地水域  26322.57 544.27 3032.73 9481.28 5.32 2314.43 1969.52 8371.21 603.81
+
+     小计    491482.22 19271.80 150604.34 83899.16 30958.93 57729.21 73685.02 67469.98 7863.78
+
+     小计    5886238.19 351569.61 957244.14 1149946.64 435426.92 470902.75 813533.63 1649148.43 58466.07
+
+                                                 22
+      按照通辽市第三次国土调查用地分类，通辽市湿地 70357.28 公
+顷，占总面积的 1.2%；耕地 2223392.21 公顷，占总面积 37.8%；种
+植园用地 3975.02 公顷，占总面积的 0.1%；林地 1435752.5 公顷，占
+总面积的 24.4%；草地 1644531.9 公顷，占总面积的 27.9%；商业服
+务业用地 5895.26 公顷，占总面积的 0.1%；工矿用地 24052.05 公顷，
+占总面积的 0.4%；住宅用地 80268.94 公顷，占总面积的 1.4%；公共
+管理与公共服务用地 6387.4 公顷，占总面积的 0.1%；特殊用地
+2023.44 公顷，占总面积的 0.03%；交通运输用地 110849.32 公顷，
+占总面积的 1.9%；水域及水利设施用地 56918.25 公顷，占总面积的
+1.0%；其他土地 221834.63 公顷，占总面积的 3.8%。
+
+                                                                    23
+           表 3-2 通辽市土地利用现状汇总表（2019）                             单位：公顷
+
+                                                                公共管
+
+行政区域  总面积  湿地(00) 耕地(01)  种植园   林地(03)  草地(04)  商业服  工矿用地 住宅用地  理与公   特殊用  交通运输  水域及水  其他土地
+                           用地                   务业用             共服务              利设施用
+                                                地(05) (06) (07) 用地 地(09) 用地(10) 地(11) (12)
+                          (02)
+
+                                                                (08)
+
+科尔沁区 351569.61 1864.48 242105.48 1167.11 41985.19 24113.79 2211.17 2734.68 12375.18 1808.11 617.32 16185.55 2902.95 1498.6
+
+科左中旗 957244.14 39889.11 448700.98 1090.92 155942.69 162672.18 328.77 1574.1 15683.46 857.04 389.81 21963.21 11570.78 96581.09
+
+科左后旗 1149946.64 5938.28 457493.27 196.85 245560.74 338244.43 606.59 1496.01 12632.56 797.04 162.94 18207.92 19650.37 48959.64
+
+开鲁县 435426.92 2523.76 289005.41 391.08 57144.28 55618.19 985.51 1342.34 10924.82 711.51 292.73 11534.68 1714.48 3238.13
+
+库伦旗 470902.75 2626.56 177470.99 164.05 127183.99 124754.77 180.08 903.41 6224.73 403.23 109.29 7316.12 3309.64 20255.89
+
+奈曼旗 813533.63 2580.25 315703.13 694.2 349043.53 83516.39 791.81 1910.54 14246.22 827.41 274.34 14708.69 5717.25 23519.87
+
+扎鲁特旗 1649148.43 14150.23 290183.25 268.74 451969.49 821236.39 515.35 5881.82 7383.81 735.09 130.5 19046.83 11052.24 26594.69
+
+霍林郭勒 58466.07 784.61 2729.7 2.07 6922.54 34375.8 275.98 8209.15 798.16 247.97 46.51 1886.32 1000.54 1186.72
+
+小计 5886238.19 70357.28 2223392.21 3975.02 1435752.5 1644531.9 5895.26 24052.05 80268.94 6387.4 2023.44 110849.32 56918.25 221834.63
+
+                                                24
+      通辽市地域辽阔，土地资源绝对数量大，人均占有量高。市域土
+地利用一直以农牧业为主，农牧用地占全市总面积的 62.4%，是全市
+重要的农业生产用地；林业用地占全市土地总面积的 24.4%，是全市
+重要的生态用地。土地利用类型在空间分布上突出表现为带状分布规
+律，北部大兴安岭南麓、南部奈曼旗为林地集中分布区；西辽河平原
+地势平坦，土壤肥沃，是耕地集中分布区；牧草地穿插其间，呈现带
+状分布。
+
+                 图 3-1 通辽市土地利用现状图（2019）
+
+                                                                    25
+2.时空变化
+（1）时间变化
+
+土地利用变化在一定程度上反映了土地的利用情况，根据 2005
+
+年至今的土地变更数据以及三调数据，2009 年以后数据为第二次土
+
+地调查数据，2019 年数据为第三次土地调查数据，三次土地调查所采
+
+用的技术方法及要求不同，调查精度也不一致，造成了数据的变动较
+
+大，因此将土地利用变化分三阶段进行分析。
+
+①农用地时间变化分析
+
+表 3-3 通辽市主要农用地情况变化表（2005-2019） 单位：万亩
+
+时间       耕地         园地     林地       牧草地
+
+2005 年  1542.04     26.24  2020.90  2756.55
+
+2006 年  1608.90     26.20  2042.31  2743.98
+
+2007 年  1610.82     26.19  2050.45  2738.88
+
+2008 年  1611.58     26.19  2050.45  2738.81
+
+2009 年（二调） 2021.02  10.08  2130.00  2958.06
+
+2010 年  2021.52     10.10  2129.14  2955.75
+
+2011 年  2020.05     10.04  2127.93  2953.06
+
+2012 年  2022.05     9.96   2126.50  2952.43
+
+2013 年  2026.27     9.92   2125.04  2951.33
+
+2014 年  2058.56     9.71   2111.68  2935.63
+
+2015 年  2071.04     9.66   2111.04  2923.87
+
+2016 年  2083.81     9.62   2107.59  2914.76
+
+2017 年  2095.56     9.55   2104.06  2910.60
+
+2018 年  2095.85     9.53   2103.09  2910.03
+
+2019 年（三调） 3335.09  5.96   2153.63  2112.25
+
+      数据来源：2005-2015 年数据来自通辽市土地利用总体规划；2015-2018 年
+数据来自通辽市自然资源局土地变更调查数据；2019 年数据来自全国第三次土
+地调查数据。
+
+      2005-2008 年主要农用地动态变化表现为：2005 年因土地结构调
+
+整使耕地面积有所增加，2006-2008 年耕地面积增加不大。生态用地
+
+（园、林、牧）面积变化不大，园地与林地基本不变，牧草地有小幅
+
+                    26
+度增加。
+      2009-2018 年主要农用地动态变化表现为：2009 年由于第二次土
+
+地调查在技术手段、技术方法和总体要求较以往的不同，耕地发生了
+很大的变化，耕地面积大幅度增加；2009-2018 年，由于通辽市高标
+准基本农田建设、土地整理项目和土地整治重大工程的实施，耕地面
+积逐年稳步提升。园地、林地、牧草地等生态用地面积受耕地和建设
+用地的侵占，面积不断减少。
+
+      2019 年动态变化表现为：2019 年数据采用了全国第三次土地调
+查工作的成果，由于技术手段的改进、调查内容的变化以及影响精度
+的差异，耕地面积大幅度增加，约是 2018 年土地变更调查数据的 1.6
+倍，耕地面积增加的主要原因是城镇村内部斑块细化，现状为耕地的
+调查为耕地，另外由于农民私自开垦，造成部分盐碱地、沙地和草地
+变为耕地；生态用地（园、林、牧）面积变化较大，园地面积减少，
+林地面积有所增加，牧草地面积大幅度减少。园地面积变化的主要原
+因是农业种植结构调整导致部分果园变为耕地；林地面积变化的主要
+原因是退耕还林和生态造林增加了林地规模；草地面积变化的主要原
+因是由于多年干旱引起草地沙化无法放牧，农民自主开发耕地种植饲
+料，还有部分建设用地占用草地。
+
+      ②建设用地时间变化分析
+      2005-2008 年主要建设用地动态变化表现为：2005-2008 年城乡
+建设用地面积逐年小幅度增加；交通运输用在 2005-2007 年每年有所
+增加，但是增加面积较小，2007-2008 年面积没有发生变化；水利设
+施用地在 2005-2006 年期间面积有略微增加，在 2006-2008 年间面积
+没有发生变化。
+      2009-2018 年主要建设用地动态变化表现为：2009 年水利设施用
+
+                                                                    27
+地面积大量减少，减少原因是第二次土地调查与之前的土地变更调查
+
+数据相比，地类进行了调整；2010-2018 年，通辽市建设用地总量与
+
+城乡建设用地逐年稳步增加、变化幅度不大；近年来，随着通辽市基
+
+础设施的完善与提升，交通运输用地面积有所增加。
+
+2019 年主要建设用地动态变化表现为：2019 年与 2018 年相比，
+
+建设用地面积大幅度减少，其中城乡建设用地比上年减少 79887.12
+
+公顷，交通运输用地比上年增加 2168.95 公顷，水利设施比上年减少
+
+12089.24 公顷。建设用地面积的大量减少，主要是由于三调中城乡建
+
+设用地类别细化，细化出了其他非建设用地类型，另外城镇村内部、
+
+风景名胜区内部和工业用地内部用地细化，按照现状对应地类，导致
+
+了面积的大幅减少；而交通运输设施根据实际建设情况，近年来稳步
+
+增加；水利设施减少主要由于用地类型的细化，例如将原水利设施用
+
+地中的“水库水面”调整为“农用地”，不再归属为建设用地。
+
+表 3-4 历年主要建设用地面积表                   单位：公顷
+
+       时间     建设用地       城乡建设用地 交通运输用地        水利设施
+      2005 年  216231.64                       30982.51
+      2006 年             164235.09  15829.43  31022.46
+      2007 年       —                          31022.46
+      2008 年       —     164588.05  16541.4   31022.46
+2009 年（二调）         —                          15688.18
+      2010 年       —     166654.35 16895.573  15690.37
+      2011 年  216857.82                       15690.07
+      2012 年       —     166664.34 16895.573  18395.02
+      2013 年       —                          15498.12
+      2014 年  223507.27  181101.73  16245.96  15425.78
+      2015 年  225607.30                       15424.65
+      2016 年  227323.86  182415.61  17025.22  15433.79
+      2017 年  229995.64                       15433.21
+      2018 年  231023.58  184133.13  17356.66  15436.12
+              233033.98
+                         185936.94  17575.94
+
+                         187390.66  18837.76
+
+                         189302.63  19109.03
+
+                         190718.69  19392.87
+
+                         192890.39  19871.28
+
+                         193578.51  20190.10
+
+                         195085.34  20685.76
+
+                         28
+时间      建设用地 城乡建设用地 交通运输用地 水利设施
+
+2019 年  159684.11 115198.22  22854.71  3346.88
+
+      数据来源：2005-2015 年数据来自通辽市土地利用总体规划；2015-2018 年
+数据来自通辽市自然资源局土地变更调查数据；2019 年 数据来自全国第三次土
+地调查数据。
+
+      （2）空间分布
+
+      ①农用地分布
+      农用地：2019 年通辽市现有农用地面积 7852.61 万亩，主要分
+布在扎鲁特旗、科尔沁左翼后旗、科尔沁左翼中旗和奈曼旗，分别占
+农用地总面积的 29.8%、19.9%、14.9%和 13.7%，霍林郭勒市占比最
+少只有 0.8%。耕地主要集中分布在市域中部的西辽河流域和科左后
+旗、奈曼旗、库伦旗南部地区；耕地外围主要分布牧草地，林地主要
+分布在北部的扎鲁特旗和南部的奈曼旗；三类用地整体呈带状分布，
+与全域的自然地理特征相符。
+
+        29
+           表 3-5 通辽市农用地情况一览表（2019） 单位：万亩
+
+      耕地   园地                   林地        牧草地      其他农用地      合计
+                            面积 比重      面积 比重       面积 比重
+用地类型
+
+      面积   比重 面积 比重                                           面积      比重
+
+科尔沁区 363.16 10.9 1.75 29.4  62.98  2.9 11.20  0.5 16.18 8.9   455.27  5.8
+
+科左中旗 673.05 20.2 1.64 27.4 233.94 10.9 225.60 10.4 36.83 20.2 1171.05 14.9
+
+科左后旗 686.24 20.6 0.30 5.0 368.34 17.1 477.00 21.9 33.75 18.6 1565.63 19.9
+
+开鲁县 433.51 13.0 0.59 9.8    85.72 4.0 44.15 2.0 13.67 7.5 577.63      7.4
+
+库伦旗 266.21 8.0 0.25  4.1    190.78 8.9 130.95 6.0 17.10 9.4   605.27  7.7
+
+奈曼旗 473.55 14.2 1.04 17.5 523.57 24.3 50.52 2.3 26.74 14.7 1075.43 13.7
+
+扎鲁特旗 435.27 13.1 0.40 6.8 679.39 31.5 1191.53 54.8 36.31 20.0 2342.90 29.8
+
+霍林郭勒 4.09  0.1 0.003 0.1    10.38  0.5 43.60  2.0  1.34  0.7  59.42   0.8
+
+合计 3335.09 100.0 5.96 100.0 2155.09 100.0 2174.55 100.0 181.92 100.0 7852.61 100.0
+
+                                   30
+                   图 3-2 通辽市农用地分布图（2019）
+      ②建设用地分布
+      2019 年，通辽市建设用地总面积 159684.11 公顷，占全市总面
+积的 2.7%,人均建设用地高达 500 平方米。建设用地主要分布的市域
+中部，沿交通干线分布明显。城镇建设用地主要分布在各旗县中心城
+区，村庄零散分布于主要交通干线两侧。区域基础设施用地主要是交
+通设施用地和水利设施用地，交通设施主要包括铁路、公路、机场等
+区域设施，主要集中在市域中部、南部区域；水利设施面积较小。
+
+                                                                    31
+       表 3-6 通辽市建设用地情况一览表（2019） 单位：公顷
+
+       城乡建设用地            区域基础设施用地         其他建设用地                   小计
+
+用地类型   面积         比重     面积        比重     面积       比重     面积           比重
+
+科尔沁区   22211.10   19.3   5491.68   21.0   1081.24  5.9    28784.02     18.0
+科左中旗
+科左后旗   21175.47   18.4   3070.25   11.7   1692.14  9.3    25937.86     16.2
+
+ 开鲁县   15978.75   13.9   5233.69   20.0   1080.29  5.9    22292.73     14.0
+ 库伦旗
+ 奈曼旗   15312.44   13.3   3462.47   13.2   606.99   3.3    19381.9      12.1
+扎鲁特旗
+霍林郭勒   7972.56    6.9    1058.14   4.0    628.52   3.4    9659.22      6.0
+   小计
+       18414.59   16.0   3423.05   13.1   1060.54  5.8    22898.18     14.3
+
+       11067.47   9.6    3296.95   12.6   5377.55  29.4   19741.97     12.4
+
+       3065.84    2.7    1165.36   4.4    6757.03  37.0   10988.23     6.9
+
+       115198.22  100.0  26201.59  100.0  18284.3  100.0  159684.11    100.0
+
+                             32
+                 图 3-3 通辽市建设用地分布图（2019）
+      ③其他用地
+      2019 年，通辽市其他用地 491482.22 公顷，占全市总面积的 8.3%,
+其中陆地水域 26322.57 公顷，占全市总面积的 0.4%；其他土地
+465159.65 公顷，占全市总面积的 7.9%。陆地水域包括河流水面和湖
+泊水面，主要分布在科左后旗和扎鲁特旗；其他土地包括盐碱地、沙
+地、裸土地等，主要分布在科左中旗、科左后旗、奈曼旗、库伦旗和
+扎鲁特旗。
+
+                                                                    33
+       表 3-7 通辽市其他用地情况一览表（2019） 单位：公顷、%
+
+                其他土地         陆地水域                 小计
+
+用地类型   面积             比重     面积        比重     面积         比重
+
+科尔沁区   18727.53       4.0    544.27    2.1    19271.80   3.9
+科左中旗
+科左后旗   147571.61      31.7   3032.73   11.5   150604.34  30.6
+
+ 开鲁县   74417.88       16.0   9481.28   36.0   83899.16   17.1
+ 库伦旗
+ 奈曼旗   30953.61       6.7    5.32      0.0    30958.93   6.3
+扎鲁特旗
+霍林郭勒   55414.78       11.9   2314.43   8.8    57729.21   11.7
+   小计
+       71715.50       15.4   1969.52   7.5    73685.02   15.0
+
+       59098.77       12.7   8371.21   31.8   67469.98   13.7
+
+       7259.97        1.6    603.81    2.3    7863.78    1.6
+
+       465159.65      100.0  26322.57  100.0  491482.22  100.0
+
+                      34
+                 图 3-4 通辽市其他用地分布图（2019）
+
+      3.利用特点
+      （1）土地资源类型多样，地区差异大
+      通辽市地势南部和北部高，中部低平，呈马鞍形。北部为大兴安
+岭南麓余脉的石质山地丘陵，南部为辽西山地边缘的浅山、黄土丘陵
+区，中部为西辽河流域沙质冲积平原，其中在西辽河流域冲积平原与
+山地、丘陵之间的过渡地带分布着起伏不平的沙丘和沙地，耕地牧草
+地为主，沙地等未利用地面积较大，由于地区自然环境迥异，土地类
+型分局地区差异极大。
+      全市地貌和土壤类型多样，在不同地貌上发育着不同土壤，既有
+
+                                                                    35
+适宜发展种植业的土壤，又有适宜发展畜牧业和林果业的土壤。中部
+西辽河、新开河冲积平原区地势平坦，土地肥力较好，排灌设施配套，
+交通方便，是全市粮食高产稳产基地。油料及其他经济作物和杂粮主
+要分布在坨沼地区，这些地区的土地肥力差，灌溉无保证，单产低，
+总产不稳，基本上靠天种粮，但饲草种类多样，适宜发展畜牧业，也
+有丰富的耕地后备资源。土地利用的多样性不仅反映了土地的特点和
+属性，而且揭示了土地的分布规律，为建立“两高一优”农业和优质
+高效畜牧业创造了有利条件。
+
+      （2）农用地利用比重较大，耕地布局突出
+      全市农牧林用地比重较大，农用地占全市土地总面积的 88.9%。
+通辽市素有“内蒙古粮仓”之称，粮食总产量占自治区的 30%以上，
+种植业是土地利用的最主要形式，但同时也是抗御自然灾害能力弱的
+生物生产系统，其土地利用必须适应自然环境和生物气候条件。由于
+地域和自然环境的多样性，通辽市的耕地主要布局在西辽河沿岸，地
+形地貌及水热条件差异明显，耕地外围主要为牧草地，构成沿河条带
+状布局的农牧业生产重要区域。
+      （3）农牧业交错利用特点明显
+      通辽市既是自治区主要的农业区也是重要牧业区，农牧业交错特
+征明显。在自然背景下呈现沿西辽河农区、牧区交错分布的特点。由
+于气候呈波动性变化，农牧业结构也呈现波动性交替。但由于近年来
+农业收益和补贴较高，出现了农民私自开垦等情况，造成草地面积逐
+年减少，耕地面积不断增加，进而也加剧了市域水资源短缺的趋势，
+地下水位的下降造成土壤沙化现象进一步加剧，生态环境较脆弱，急
+需转变土地利用的形式。
+
+                                                                    36
+      4.存在问题
+      （1）土地生态环境有待进一步加强
+      通辽市土地质量较低，在全市土地资源中，草甸土、风沙土、盐
+碱土、碱土、石质土、沼泽土、粗骨土等土类面积占总土地面积的
+48.18％。中低产田面积约占耕地的 70％左右，草牧场退化面积约占
+现有草场的 70％以上。
+      科尔沁沙地是退耕还林还草工程实施的重点地区，随着退耕还林
+还草等生态建设工程的实施，其绿化的速度明显加快，生态环境有了
+很大的改观。但是通辽市土地沙化、水土流失和草场退化等生态问题
+由于治理难度大，投入少，加之部分地区乱垦、滥挖土地，使土地环
+境恶化趋势仍未得到有效遏制，土地综合整治任务仍十分艰巨。据
+2019 年三调数据统计，林地面积占土地总面积的比例仅 24.39%，牧
+草地面积占土地总面积的 23.92%，生态环境有待进一步加强。
+      （2）建设用地集约利用程度偏低
+      城镇用地内部结构和布局不尽合理，建筑密度与容积率低，存在
+浪费土地的现象。城镇建设中土地浪费现象主要有三个显著特征：一
+是旧城区改造缓慢，环境污染严重。二是低矮建筑物多，建筑密度低。
+三是有些用地部门存在多占少用现象，甚至闲置撂荒。此外，许多城
+镇盲目外延，扩大用地规模，盲目搞工业园区，导致土地资源浪费严
+重，土地粗放利用的现象十分普遍。
+      农村居民点分散，多数居民点规模小而且分散，有的山区或环境
+恶劣地区十来户甚至几户人家就形成一个村庄，村庄规模较小，在规
+划期内很难形成规模较大的集中用地区；一户两宅和一户多宅的现象
+仍然存在，尤其是在牧区牧民大都有冬营盘和夏营盘，其特有的生活
+习惯，使通辽市农村居民点总面积规模偏大；居民点内部布局混乱，
+各类用地相互混杂，居住环境差，人均用地严重超标，2018 年农业人
+
+                                                                    37
+口人均居民点面积达 626.23 平方米，远远高于国家规定的标准上限
+（150 平方米/人）。
+
+      （3）土地资源利用不合理，珍惜和合理利用土地的意识不强
+      土地资源利用不合理主要表现在用多于养。农业生产期广种薄收，
+造成地越种越多，田越种越瘦，只向大自然索取，不给予土地输入。
+牧业生产中，强调牲畜头数，只计存栏，不计商品率，加重草场负担，
+大多部分牧场处于过牧状态，土地退化、沙化现象比较严重。可利用
+土地面积有限，特别是耕地，随着人口增长，各项建设用地面积逐年
+扩大，以致后备资源呈现不足，人地矛盾、人粮矛盾、草畜矛盾日趋
+突出。
+      （4）土地开发利用难度大
+      通辽市虽然有较丰富的宜农、宜果、宜林地，但是开发利用有一
+定难度，需要投资多。一是，宜开发的农用地大部分离水源较远，地
+下水位较深，水利设施建设工程量大；二是，宜开发的农用地多数为
+半沙丘和沙丘，平整土地工程量大，需要的投资大；三是，土壤的自
+然肥力低，保水保肥能力差，有的土地平整后需铺垫熟土，费用较高；
+四是，草场植被覆盖率低，生产能力差，需要改造建设的费用很大。
+    （二）水资源
+
+      1.现状情况
+      通辽市水系由大凌河水系、辽河水系、嫩江水系组成。西辽河流
+域面积占全市总面积的 77.1%。流域面积在 100 平方公里以上的河流
+有 47 条，属辽河流域的 38 条，属松花江流域的 3 条，属大凌河流域
+的 5 条，属内陆河 1 条。较大的河流有牤牛河、养畜牧河、教来河、
+老哈河、西拉木伦河、西辽河、东辽河、乌力吉木仁河和霍林河。其
+中，教来河、老哈河、西拉木伦河、西辽河、东辽河、乌力吉木仁河
+
+                                                                    38
+产流区绝大部分在境外，在通辽市基本不产流，为过境河流。另有大
+小湖泊 44 个，水域面积 292.9 平方公里。
+
+      依据《通辽市水资源公报》，通辽市多年平均水资源总量约 37.47
+亿立方米，约占内蒙古水资源总量的 6.86%。其中，多年平均地表水
+资源总量约 7.99 亿立方米，多年平均地下水资源总量约 35.31 亿立
+方米，其中地表水与地下水资源重复量为 5.83 亿立方米。年人均占
+有水量 847 立方米，低于全国平均水平，水资源紧缺已成为制约农业
+资源进一步开发利用的主要限制因素。
+
+      2018 年，通辽市水功能区共 72 个，监测 70 个，其中国家重要
+水功能区 27 个，参加评价 14 个，达标 10 个，达标率 71.4%；其他国
+家重要水功能区 4 个，参加评价 1 个，达标 1 个，达标率 100%；自
+治区级水功能区 39 个，参加评价 27 个，达标 25 个，达标率 92.6%。
+科尔沁区范围内，浅层地下水存在污染，氨氮、锰、高锰酸盐指数等
+水化指标超标。
+
+      2.时空分布
+      通辽市境内受蒙古高原气候影响,属于大陆性气候,春季干旱多
+风,夏季炎热雨水集中,秋季凉爽短促,冬季漫长干冷。年降雨量较少,
+一般在 350-450 毫米之间,从时间分布来看,有 70%的降雨量集中在 6、
+7、8 三个月，在用水量较大的 3-5 月份降雨量稀少,多数河流径流量
+较小,甚至干枯。大约有 2/3 的地表水资源为洪水径流量,无法得到有
+效利用。
+      （1）地表水分布情况
+      通辽市处于蒙古高原递降辽河平原的斜坡,地形趋势是南北高翘,
+中间低平,由西北向东南倾斜。通辽市水系主要包括三部分，大凌河
+水系、辽河水系、嫩江水系。从空间上看,可划分为北部山区河流、
+
+                                                                    39
+中部平原区河流和南部低地丘陵区河流，领域面积在 100 平方公里以
+上的河流共有 47 条，地表水分布具有不均匀的特点。
+
+      ①中部平原区河流
+      中部河流主要有西辽河、新开河、教来河,沿河两岸多为平原和
+沙丘,河床质均为粉细沙,水流含沙量较大,年均径流量达 231700 万
+立方米,多为过境客水,占全部径流的 78.81%，但年内分配不均。
+      老哈河发源于河北省与内蒙古交界的七老图山，全长 426 公里，
+流域面积 2.74 万平方公里，其中内蒙古境内 2.03 万平方公里。
+      西拉木伦河发源于大兴安岭南麓，河道全长 376 公里，流域面积
+3.13 万平方公里。
+      西辽河干流河道全长 403 公里，平均比降 1/2000，流域面积 17811
+平方公里。
+      新开河自台河口水利枢纽分水后（解放初期在古河道基础上整修
+而成），河流走向呈东北、东南弧形贯穿平原区的北部。全长 376 公
+里，流域面积 7881 平方公里，平均比降 1/1800。
+      教来河发源于赤峰市敖汉旗努鲁尔虎山，河道全长 482.2 公里，
+其中通辽市境内 341 公里。全流域面积 12693 平方公里，通辽市内流
+域面积 762 平方公里。
+      乌力吉木仁河发源于大兴安岭南端大罕山东麓，河源至梅林庙河
+道全长 458 公里，平均比降 1/500～1/700。河道全长 598 公里，流
+域面积 4.8 万平方公里。梅林庙以下流域面积 2.03 万平方公里，河
+道比降 1/1500～1/2000。
+      东辽河发源于吉林省辽源市境内，在通辽市河段长 54 公里，平
+均河宽 1000 米，河道平均比降 1/2000 左右。
+
+                                                                    40
+      ②北部山区河流
+      北部山区（主要指扎鲁特旗和霍林郭勒市）河流两岸多山，植被
+较好，河床稳定，多砂卵石，含沙量较少，年径流量较小。主要河流
+有乌努格奇河、胜利河、广兴堡河及嫩江水系的霍林河。
+      扎鲁特旗的河流有乌努格奇河、胜利河、广兴堡河，三条河流均
+为乌力吉木仁河的一级支流。霍林郭勒市的河流有霍林河。
+      乌努格奇河发源于扎鲁特旗罕山南坡，全长 133.0 公里，流域面
+积 2033 平方公里。乌努格奇河在前进村以上，多为山区，河谷两岸
+为陡峻的石山，左岸陡于右岸，河床狭窄，平均宽 5～6 米，比降
+1/150～1/200，河道比降减至 1/1000。
+      胜利河发源于扎鲁特旗罕山南坡。全长 97 公里，流域面积 1631
+平方公里，河道在鲁北以上，多为山区，河谷狭窄，一般河谷宽为 1.5～
+2.0 公里，河床宽为 7～8 米，河道平均比降 1/500 左右，均为砂质
+河床，植被较好。
+      广兴堡河发源于扎鲁特旗石柱子山东南坡，全长 100 公里，流域
+面积 1664 平方公里。
+      霍林河发源于扎鲁特旗西北部，属于松花江流域的嫩江水系。河
+道全长 590 公里，总流域面积 27840 平方公里，在通辽市境内流域面
+积 4759 平方公里。
+      ③南部低山丘陵区河流
+      南部低山丘陵区河流主要有柳河、铁牛河和养畜牧河,河岸为半
+山区,土质松散,植被率低,河道坡陡流急。
+      柳河是辽河流域的一级支流，其发源地在库伦旗境内，市域境内
+流域面积 2860 平方公里，占整个柳河流域的 70.6%。
+      牤牛河是大凌河流域的上游区，发源于奈曼旗沙日好来镇台力虎
+
+                                                                    41
+北约 2 公里，在市域境内河长 50 公里左右，流域面积 1333 平方公
+里，有 4 条较大支流汇入。河道比降大，一般在 1/100～1/400 左右，
+沟壑发育，沟深达 30 米以上。中下游河床呈宽浅型，无明显主槽，
+平均河宽 700 米，支流河宽 300 米左右。
+
+      北部和南部年均径流量只有 62300 万立方米,属于自产水,占全
+部径流的 21.19%。
+
+      ④湖泊
+      通辽市境内有湖泊 44 个，总面积 292.9 平方公里。扎鲁特旗 6
+个湖泊，水面面积 8.43 平方公里；开鲁县 7 个湖泊，水面面积 12.6
+平方公里；科左后旗 25 个湖泊，水面面积 6.18 平方公里；科左中旗
+6 个湖泊，水面面积 8.34 平方公里。
+
+                        图 3-5 通辽市主要河流分布图
+
+                                                                    42
+      （2）地下水分布情况
+      通辽市地下水资源相对较丰富,综合补给量为 368250 万立方米,
+占水资源总量的 70%，但地区分布也不均匀。平原沱沼区一带最多,中
+部平原次之，南、北山区则相对贫乏。在平原区地下水厚度为 70-100
+米,微承压含水层厚度为 30-70 米,含水层富水性良好,按降深 20 米,8
+寸口径单,一般日出量达 2000-000 立方米。
+      西辽河冲积平原第四系松散层厚度 60～200 米，补给来源充沛，
+贮存了丰富的地下水。就整个平原而言，除沙丘外，一般地下水埋深
+只有 1～3 米左右，而在河流两岸及甸子地一带只有 1 米或小于 1 米。
+只有在乌力吉木仁河与新开河之间和梅林庙以西山前平原及养畜牧
+河一带，地下水埋藏较深，一般地下水埋深在 5 米左右，有的大于 5
+米。
+      整个第四系含水层，主要由砂砾石，中细砂及粉细砂所组成，其
+间常夹有数层亚砂土、亚粘土、粘土的透镜体。因此，第四系地下水
+是具有统一连续水位的潜水。由于含水层岩性在垂直方向上的变化，
+故可把第四系含水体分为三个主要含水层：下部砂砾石含水层，厚达
+20～60 米；中部中细砂含水层，厚达 90～120 米；上部粉细砂含水
+层。
+
+      3.利用特点
+      （1）水资源利用情况
+      2014-2018 年，通辽市总用水量从 28.06 亿吨下降到 24.51 亿吨，
+其中生活用水量从 0.91 亿吨增加到 1.04 亿吨，第一产业用水量由
+23.80 亿吨下降到 21.79 亿吨，第二产业用水量从 2.68 亿吨下降到
+0.84 亿吨，第三产业用水量从 0.27 亿增加到 0.41 亿吨，生态用水
+从 0.40 亿吨增加到 0.43 亿吨。总的趋势看，农业灌溉用水量和工业
+
+                                                                    43
+用水量下降趋势明显，生活和三产用水量有明显的提升。
+
+      表 3-8 通辽市水资源利用情况一览表（2014-2018）
+
+用水类别       单位     2014       2015    2016    2017    2018
+                                     5098    5654    5806
+生活用   城镇   万吨     4868       5022    4301    4301    4590
+   水  农村   万吨     4277       4439    9399    9955   10396
+      小计   万吨     9145       9461   233867  230863  217859
+                                    22897   17875    8445
+第一产业用水 万吨 237975 231800              3102    3395    4131
+                                     4891    3592    4260
+第二产业用水 万吨 26764 26613               274156  265680  245091
+                                    148.55  151.93  154.87
+第三产业用水 万吨         2698       2900   163.93  160.94  158.45
+                                    312.48  312.87  313.32
+生态用水       万吨     4027       3044    98.6   109.3   112.2
+                                     71.9    73.2    79.4
+小计         万吨 280609 273818          82.4    87.2    90.9
+
+      城镇 万人 141.71 144.64           310.4   273.4   200.9
+
+人口 农村 万人 170.69 167.44
+
+      小计 万人 312.40 312.08
+
+人均生    城镇  L/人·d  94.1       97.1
+活用水    农村  L/人·d  68.6       72.6
+      总平均  L/人·d  80.2       83.1
+   量
+                             342.1
+人均生产生活可           338.6
+用水量（工业＋ L/人·d
+
+      生活）
+
+资料来源：2014-2018 年水资源公报。
+
+                         44
+                        表 3-9 2018 年通辽市各行政分区用水量
+
+旗县（区）            生活     第一产业    第二产业  第三产业  生态环境  总用水量    人均生产生活可用水量(工业＋
+       城镇 农村 小计                                                           生活)
+
+科尔沁区 3476 1153 4629 43756       4078  1475  1086  55024   335.8
+
+霍林郭勒 375 22 397         180     1807  532   314   3230    920.9
+
+科左后旗 344 553 897 24824          122   304   399   26546   91.1
+
+科左中旗 365 870 1235 47980         240   230   85    49770   90.4
+
+开鲁县    355 520 875      36900   950   382   120   39227   156.3
+
+库伦旗    220 380 600      4405    355   210   380   5950    180.7
+                                                          121.1
+奈曼旗    342 681 1023 38003       246   680   856   40808
+
+扎鲁特旗 329 411 740 21811          647   318   1020  24536   154.7
+
+全市     5806 4590 10396  217859  8445  4131  4260  245091  200.9
+
+资料来源：2018 年水资源公报。
+
+                                      45
+      2018 年，通辽市总供水量 24.51 亿立方米，占当年水资源总量
+的 69.07%。其中地表水源供水量 0.64 亿立方米，地下水源供水量
+23.62 亿立方米，其他水源供水量 0.25 亿立方米。在地表水源供水
+量中，蓄水工程供水 0.41 亿立方米，引水工程供水 0.17 亿立方米，
+提水工程供水 0.06 亿立方米。地下水源供水量均为浅层地下水。
+
+   图 3-6 通辽市地表、地下、其他水源供水量占总供水量比例
+
+  图 3-7 通辽市蓄、引、提水工程供水量占地表水源供水量比例
+      2018 年，通辽市总用水量 24.51 亿立方米，其中生活用水量 1.04
+
+亿立方米，农田灌溉用水量 19.09 亿立方米，林牧渔畜用水量 2.69
+亿立方米，工业、建筑业用水量 0.85 亿立方米，服务业用水量 0.41
+亿立方米，生态与环境用水量（仅包括人工措施供给的城镇环境用水）
+0.43 亿立方米。
+
+                                                                    46
+                      图 3-8 通辽市各行业用水比例图
+      2018 年，通辽市总耗水量 17.58 亿立方米，其中生活耗水量 0.68
+亿立方米，农田灌溉耗水量 13.59 亿立方米，林牧渔畜耗水量 2.14
+亿立方米，工业、建筑业耗水量 0.61 亿立方米，服务业耗水量 0.21
+亿立方米，生态与环境耗水量（仅包括人工措施供给的城镇环境耗水）
+0.36 亿立方米。全市综合耗水率 71.74%，其中城镇生活耗水率 50.03%，
+农村生活耗水率 85.01%，农田灌溉耗水率 71.17%，林牧渔畜耗水率
+79.39%，工业耗水率 70.02%。
+
+                      图 3-9 通辽市各行业耗水比例图
+      （2）区域性引水工程情况
+      通辽市目前有两大引水工程，分别是 LXB 通辽支线工程和引绰济
+辽工程。
+      LXB 供水内蒙古支线工程向通辽市科尔沁区、科左后旗、库伦旗、
+
+                                                                    47
+奈曼旗供水，年供水量 1.0833 亿立方米，其中供科尔沁区 1860 万立
+方米，科左后旗 3092 万立方米，库伦旗 2079 万立方米，奈曼旗 3802
+万立方米。该工程是解决通辽市水资源严重短缺问题的基础性战略工
+程，是国家“172 项重点工程”之一，已列入水利部《水利改革发展
+“十三五”规划》重大引调水工程项目库。
+
+      引绰济辽工程是从嫩江支流绰尔河引水至通辽市，向沿线城市及
+工业园区供水，并具有灌溉、发电等综合利用效用的大（1）型水利
+工程。引绰济辽工程年调水 4.36 亿立方米，向兴安盟供水 1.49 亿立
+方米，向通辽市供水 2.87 亿立方米，其中供扎鲁特旗 4500 万立方
+米、开鲁县 1600 万立方米、科左中旗 1600 万立方米、科尔沁区 21000
+万立方米。
+
+      4.存在问题
+      （1）水资源短缺且利用不合理
+      水资源利用不合理，其具体表现为地表水利用率低，地下水局部
+地区严重超采。河道已经连续几年干涸无水，农业用水、工业用水和
+城镇生活用水全部依靠地下水，造成地下水严重超采。
+      （2）工程老化，水资源利用率低
+      地表水工程布局合理，但标准低，老化严重，渠系不配套，灌区
+渠系大部分为二级渠道，且年久失修，致使灌溉用水浪费。特别是平
+原区下游，由于地表水灌溉的减少，渠系及建筑物的损坏比较严重。
+平原区各大、中型水库均为病险库，不能正常蓄水，大多数处于低水
+位运用，没有发挥其应有的效益。
+      （3）地下水集中开采，已形成漏斗区
+      近年来，随着通辽地区工农业的发展，地下水开采量越来越大，
+区域下降漏斗面积不断扩大，现已形成以通辽市热电厂为中心的地下
+
+                                                                    48
+水下降漏斗区，漏斗中心水位下降越来越大。
+      科尔沁区是内蒙古自治区最大的超采区，超采区面积 3056.40 平
+
+方公里（占自治区超采面积 7247 平方公里的 42.2%），平均超采量
+2.58 亿立方米/年（占全区超采量 6.23 亿立方米/年的 41.4%）；霍林
+郭勒市超采区面积 42.61 平方公里，平均超采量 0.04 亿立方米/年。
+2017 年，霍林郭勒市地下水已不超采，达到采补平衡。科尔沁区通过
+采取一系列的治理措施，超采水量逐年减少，提前完成 2020 年的治
+理目标，并力争在 2025 年达到采补平衡。
+
+              图 3-10 通辽市科尔沁区地下水超采区范围图
+      （4）水资源的水质遭到不同程度的污染
+      水质的污染主要来自以下几个方面：一是工业污染源，主要是工
+业废水和工业废渣；二是生活污染源，主要是生活污水和生活垃圾；
+三是农业面源污染源，主要是农药和化肥。
+      （5）水资源管理水平低
+      主要体现在水资源管理观念淡薄，多年来水资源侧重工程建设，
+其管理尚未提到议事日程，近几年，才纳入轨道，尚未落到实处。由
+于种种原因，要达到向土地和能源那样的管理观念，还需要大量的工
+
+                                                                    49
+作。而且缺少专业人才，缺乏管理技术，始终没有一套切实可行的管
+
+理方法和制度，责任不明确，尚未建立一套完整的管理体系。
+
+（三）草原资源
+
+通辽市地处森林和草原的过渡地带，原始景观为榆树疏林草原，
+
+以草原植被为主，森林植被居其次。植被类型由干旱草原及旱生草本
+
+植物构成。山地和沙地适宜杨、柳、榆、樟子松、山杏、锦鸡儿和黄
+
+柳等乔灌木生长。麻黄、甘草、山杏、沙棘等资源品种独特，质地优
+
+良。
+
+根据第三次国土资源调查数据，全市草地面积 1644531.94 公顷，
+
+其中天然牧草地 1398469.40 公顷，占草地面积的 85%；人工牧草地
+
+9708.34 公顷，占草地面积的 0.6%；其他草地 16646.51 公顷，占草
+
+地面积的 14.4%。全市可利用草原中有 90%属于退化、沙化、盐渍化
+
+草原。从空间分布看，扎鲁特旗草地面积最大，达到 821236.4 公顷，
+
+占草地总面积的 49.9%；其次是科左后旗草地面积达 338244.4 公顷，
+
+占草地总面积的 20.6%；其他旗县草地面积均有少量分布。
+
+    表 3-10 通辽市草地面积汇总表(2019)  单位：公顷
+
+    名称  天然牧草地 人工牧草地 其他草地 小计 比重
+
+科尔沁区    7466.12   1.16     16646.51 24113.79 1.5
+
+科左中旗    109235.1  4218.92 49218.15 162672.2 9.9
+
+科左后旗    313727.3  306.55   24210.58 338244.4 20.6
+
+开鲁县     29073.3   359.12   26185.77 55618.19 3.4
+
+库伦旗     87292.36  5.16     37457.25 124754.8 7.6
+
+奈曼旗     33605.41  60.52    49850.46 83516.39 5.1
+
+扎鲁特旗    793857.7  110.14   27268.59 821236.4 49.9
+
+霍林郭勒    24202.1   4646.77  5526.93 34375.8 2.1
+
+    小计  1398459.40 9708.34 236364.24 1644531.94 100
+
+资料来源：第三次国土资源调查数据（2019）。
+
+                  50
+                     图 3-11 通辽市草地分布图(2019)
+      全市草场面积分为 5 类 9 个亚类，28 个组 80 个型。
+      草甸草原类：包括 3 个亚类 7 个组 9 个型。草场以中旱生多年生
+从生禾草及根茎禾草占优势，集中分布在扎鲁特旗北部。
+      干草原类：包括 2 个亚类 11 个组 36 个型。广泛分布在中部西辽
+河平原的沙丘、沙地及辽西山地北缘的黄土丘陵区。植被以旱生多年
+生草本植物占优势，主要有大针茅、隐子草、百里香、小叶锦鸡、冰
+草等。
+      草甸类：包括 1 个亚类 2 个组 11 个型。主要分布在扎鲁特旗北
+部的山间河谷平地和西辽河平原低地坨间甸子地。植被主要由旱中生
+和中旱生多年草本植物组成，如羊草、野谷草等，草质好，产量高，
+
+                                                                    51
+是主要打草场。
+      低湿地草甸类：包括 4 个亚类 7 个组 22 个型。主要分布在古河
+
+道、河漫滩、宽谷底和泡子周围的低湿地。植被以中生多年生草本植
+物为主。
+
+    （四）森林资源
+      1.现状情况
+      根据第三次国土资源调查数据，通辽市森林总面积 1435752.45
+
+公顷，其中乔木林地 701177.76 公顷，占森林总面积的 48.8%；灌木
+林地 464147.82 公顷，占森林总面积的 32.3%；其他林地 270426.87
+公顷，占森林总面积的 18.9%。全市森林覆盖率达 24.4%。
+
+                                                                    52
+                  表 3-11 通辽市林地面积汇总表(2019)  单位：公顷、%
+
+           乔木林地              灌木林地              其他林地
+
+行政区名称                                                        小计         比重
+
+       面积         比重     面积         比重     面积         比重
+
+科尔沁区   33031.49   4.7     1321.48    0.3    7632.22    2.8   41985.19   2.9
+                          3014.11    0.6   65396.87   24.2
+科翼中    87531.71   12.5   20878.65    4.5    82225.4   30.4   155942.69  10.9
+                          3046.42    0.7   40399.35   14.9
+科左后旗   142456.69  20.3   26477.62    5.7   25446.36    9.4   245560.74  17.1
+                         175466.67  37.8   15034.33    5.6
+开鲁县    13698.51   2.0    232274.86  50.0   30998.55   11.5   57144.28   4.0
+                          1667.99    0.4    3293.79    1.2
+库伦旗    75260.01   10.7   464147.82  100.0  270426.87  100.0  127183.99  8.9
+
+奈曼旗    158542.5   22.6                                       349043.53  24.3
+
+扎鲁特旗   188696.08  26.9                                       451969.49  31.5
+
+霍林郭勒   1960.76    0.3                                        6922.54    0.5
+
+小计     701177.76  100.0                                      1435752.45 100
+
+资料来源：第三次国土资源调查数据（2019）。
+
+                                    53
+      林地资源的空间分布情况：全市林地资源主要分布在扎鲁特旗北
+部和市域西南部区域，市域中部科尔沁区、开鲁县林地分布较少；其
+中乔木林地主要分布在科左后旗、奈曼旗和扎鲁特旗，3 个旗的乔木
+林地均占总面积的 20%以上；灌木林地主要分布在奈曼旗和扎鲁特旗，
+2 个旗的灌木林地面积占总面积的 87.8%；其他林地主要分布在科左
+中旗和科左后旗，2 个旗的其他林地面积占总面积的 54.6%。森林覆
+盖率方面，奈曼旗森林覆盖率最高，达 42.9%；扎鲁特旗森林覆盖率
+27.4%，库伦旗森林覆盖率 27.0%，科左后旗森林覆盖率 21.4%，开鲁
+县森林覆盖率 13.1%，科尔沁区森林覆盖率 11.9%，霍林郭勒市森林
+覆盖率 11.8%，科左中旗森林覆盖率 10.9%。
+
+                     图 3-12 通辽市林地分布图(2019)
+
+                                                                    54
+      通辽市乔木树种以落叶松、樟子松、油松、榆树、杨树、柳树为
+主，其中杨树面积 675473.1 公顷，蓄积 21775875 立方米。灌木树种
+以锦鸡儿、山杏、沙棘为主，其中锦鸡儿面积 115859.4 公顷，山杏
+面积 266215 公顷。
+
+      2.利用特点及存在问题
+      （1）人工林比重大，天然林比重小，中幼龄林比重大。现有人
+工林约占有林地面积的 75.3%，天然林占有林地面积的 24.7%；中幼
+林约占林地面积的 60%，占人工林面积的 99%。
+      （2）森林质量较低。我国森林每公顷蓄积量为 85.88 立方米，
+其中人工林每公顷蓄积量为 49.01 立方米。而通辽市森林每公顷蓄积
+量仅为 30.3 立方米，人工林每公顷蓄积量为 38.25 立方米，分别是
+全国平均单位面积蓄积量的 35.3%和 77.9%。
+      （3）森林病虫害较严重，抗自然灾害能力低，影响森林生态功
+能的发挥。由于通辽市人工树种单一且抚育管理跟不上，每年发生森
+林病虫害的面积较大。
+      （4）人工造林树种单一，人工纯林多，混交林少，阔叶树多，针
+叶树少，外来树种多，乡土树种少。通辽市阔叶林树种面积占到 93%，
+针叶树种只占 7%。而阔叶树种中人工杨树面积占到 89.9%，生物多样
+性低。小叶杨、家榆、旱柳、大叶榆和五角枫等乡土树种推广和应用
+力度不够。
+      （5）重造林，轻抚育。造林后不抚育或抚育不及时，造成土壤
+板结，林木生长不良，形成低产林、低效林和残次林。
+      （6）重数量，轻质量。年人工造林面积较大，部分造林地块不
+及时浇水或浇水跟不上，造成死亡。人工造林的栽植质量、苗木质量、
+田间管理等有待进一步提高。
+
+                                                                    55
+    （五）湿地资源
+
+      1.现状情况
+      湿地是自然界最富生物多样性的生态系统和人类最重要的生存
+环境之一,具有涵养水源、净化水质、蓄洪防旱、调节气候、美化环
+境、维护生物多样性和维持碳循环等极为重要的生态功能，被誉为“地
+球之肾”。
+      通辽市是内蒙古自治区湿地资源最多的盟市之一。根据 2015 年
+内蒙古自治区第二次湿地调查成果，通辽市湿地总面积 1871.60 平方
+公里，占全市总面积的 3.2%。其中河流湿地面积 44741.79 公顷，占
+湿地总面积的 23.9%；湖泊湿地面积 15904.21 公顷，占湿地总面积
+的 8.5%；沼泽湿地面积 109904.5 公顷，占湿地总面积的 58.7%；人
+工湿地面积 16609.83 公顷，占湿地总面积的 8.9%。
+      而根据全国第三次国土调查成果，截至 2019 年底，湿地总面积
+703.57 平方公里，占全市总面积的 1.2%。其中森林沼泽 9.23 公顷，
+占湿地总面积的 0.01%；灌丛沼泽 962.65 公顷，占湿地总面积的 1.4%；
+沼泽草地 41534.09 公顷，占湿地总面积的 59.0%；内陆滩涂 26006.78
+公顷，占湿地总面积的 37.0%；沼泽地 1844.53 公顷，占湿地总面积
+的 2.6%。两次调查虽然有统计口径的不同，但湿地面积总量下降的趋
+势明显，湿地保护形势非常严峻。
+      目前，全市共有湿地自然保护区 16 个，其中自治区级 2 个，市
+级 2 个，县级 12 个，分布于全市七个旗县区。保护对象分别为水生
+生态系统、湿地生态系统、湿地水域生态系统、湿地水生动植物及生
+态系统。湿地保护区内草原、湖泊、水库、沼泽、沙地、苇塘相间分
+布，地貌类型多样，植被群落复杂，具有独特的湿地自然景观和丰富
+的动植物资源，是科尔沁沙地平原上最具有代表性的地域之一。湿地
+
+                                                                    56
+保护区滞留大量河水和雨水，对保障周边地区的生态安全、补充地下
+水资源、维护生态平衡起着积极作用。湿地保护区内主要动物有 80
+余种，主要植物 120 余种。湿地多样复杂的环境类型，为野生动物尤
+其是鸟类的栖息繁殖提供了理想场所。从已发现的，属国家一、二级
+保护的有 40 余种，其中被列为世界濒危鸟类的有近 10 种之多，以鹤
+类为例子，全世界鹤类种类共 15 种，在我国记载有 9 种，东北地区
+仅有 6 种，而在通辽市湿地保护区发现的就达 4 种，分别为丹顶鹤、
+白鹤、灰鹤和蓑羽鹤。此外，大天鹅、白鹳、大鸨、草原雕等在湿地
+保护区有较大的种群分布。
+
+                                                                    57
+                   表 3-12 通辽市湿地自然保护区情况一览表
+
+序   湿地自然保护区名称            行政区     面积   等级   类型         主要保护对象
+号                      扎鲁特旗   （万亩）
+                   科尔沁左翼后旗
+1 内蒙古荷叶花湿地水禽自然保护区  科尔沁左翼后旗        79  自治区 内陆湿地和水域生 丹顶鹤、白鹤、大鸨
+                       科尔沁区       43
+                       科尔沁区        5  级    态系统        及沼泽湿地
+                   科尔沁左翼后旗        18
+2   内蒙古双合尔湿地自然保护区  科尔沁左翼后旗         3  自治区 内陆湿地和水域生 湿地水生动植物及沼
+                   科尔沁左翼后旗
+                                      级    态系统        泽湿地
+
+3   内蒙古莲花吐自然保护区                       市级  内陆湿地和水域生 湿地水生动植物及沼
+
+                                           态系统        泽湿地
+
+4   内蒙古莫力庙水库自然保护区                     市级  内陆湿地和水域生 湿地水生动植物及沼
+
+                                           态系统        泽湿地
+
+5   内蒙古小塔子水库自然保护区                     县级  内陆湿地和水域生 湿地水生动植物及沼
+
+                                           态系统        泽湿地
+
+6   内蒙古巴湖塔湿地自然保护区             15      县级 湿地生态系统 湿地、草原、鸟类
+
+7   内蒙古巴雅斯古楞自然保护区             30      县级  内陆湿地和水域生 湿地水生动植物及沼
+
+                                           态系统        泽湿地
+
+8   内蒙古八大莲池自然保护区              1       县级 湿地生态系统       湿地草原、鸟类
+
+9   内蒙古金宝屯湿地保护区    科尔沁左翼后旗    5       县级 湿地生态系统       湿地草原、鸟类
+                   科尔沁左翼后旗
+10  内蒙古布日很湿地保护区    科尔沁左翼中旗    8       县级  内陆湿地和水域生    沼泽湿地
+                                                 态系统
+
+11  内蒙古海力锦湿地自然保护区             20      县级  内陆湿地和水域生 湿地水生动植物及沼
+
+                                           态系统        泽湿地
+
+                   58
+序   湿地自然保护区名称       行政区             面积    等级  类型          主要保护对象
+号                   库伦旗          （万亩）
+
+12  内蒙古荷花湖自然保护区                       5   县级  内陆湿地和水域生    沼泽湿地
+                                     12   县级         态系统
+                                     10   县级
+13  库伦五星水库湿地保护区     库伦旗              13   县级  内陆湿地和水域生 湿地水生动植物及沼
+                                     30   县级
+                                     0.9  县级  态系统         泽湿地
+
+14  内蒙古舍利虎水库自然保护区   柰曼旗                       内陆湿地和水域生 湿地水生动植物及沼
+
+                                              态系统         泽湿地
+
+15  内蒙古孟家段水库自然保护区   柰曼旗                       内陆湿地和水域生 湿地水生动植物及沼
+
+                                              态系统         泽湿地
+
+16  内蒙古塔拉干水库自然保护区   开鲁县                       内陆湿地和水域生 湿地水生动植物及沼
+
+                                              态系统         泽湿地
+
+17 内蒙古胡力斯台淖尔国家湿地公园  科尔沁左翼后旗                   内陆湿地和水域生    国家湿地公园
+                                                     态系统
+
+    资料来源：林草局《湿地保护与恢复十三五规划》。
+
+                             59
+      2.时空分布
+      从 2015 年和 2019 年两次调查数据可以看出，湿地面积大幅度减
+少，虽然存在统计口径等技术问题，但近几年湿地面积减少的趋势并
+未改变。通辽市近几年干旱少雨，随着人口增长、工业化发展迅速、
+城市不断扩张、农村居民生产、生活方式逐渐转变，对湿地开发利用
+强度不断加大，特别是河流干涸后的耕种，使湿地丧失，对湿地生态
+系统造成不可逆转的影响。
+      从空间分布看，全市范围内科尔沁左翼中旗和扎鲁特旗两个旗的
+湿地面积最大，约占到全市湿地总面积的 70%，其他旗县由零星分布。
+从湿地类型看，类型多样，但类型分布不均，沼泽草地和内陆滩涂两
+类湿地面积最大，约占湿地总面积的 96%，这与通辽市自然地理条件
+分布相符。
+
+                                                                    60
+           表 3-13 通辽市湿地面积汇总表(2019)                 单位：公顷、%
+
+                    第三次国土资源调查数据(2019)                           第二次湿地调查数据(2015)
+
+行政区域   森林  灌丛沼泽  沼泽草地      内陆滩涂         沼泽地    小计        比重(%)  小计         比重(%)
+       沼泽
+科尔沁区
+科左翼旗   0   0     0         1864.48      0      1864.48   2.7    16003.60   8.8
+科左后旗
+ 开鲁县   0 16.98 36945.91 2186.97         739.25 39889.11  56.7   97326.26   53.6
+ 库伦旗
+ 奈曼旗   0   0     3968.73 1969.55        0      5938.28   8.4    18540.52   10.2
+扎鲁特旗
+霍林郭勒   0   0     0         2513.05      10.71  2523.76   3.6    8682.21    4.8
+
+   小计  0   0     0         2626.56      0      2626.56   3.7    3848.15    2.1
+
+       0   0     17.22     2563.03      0      2580.25   3.7    10225.93   5.6
+
+       9.23 945.67 384.23  11716.53 1094.57 14150.23     20.1   26162.14   14.4
+
+       0   0     218       566.61       0      784.61    1.1    658.03     0.4
+
+       9.23 962.65 41534.09 26006.78 1844.53 70357.3     100    187160.33  100
+
+                                    61
+                     图 3-13 通辽市湿地分布图(2019)
+
+      3.利用特点
+      通辽市政府调整了土地和禁垦禁牧政策，对湿地保护区缓冲区和
+试验区内的所有耕地实施退耕还林工程，湿地保护区内的有林面积大
+幅增加，保护区内及四周的林木列入国家公益林，得到了严格保护。
+一些保护区如荷叶花湿地水禽、库伦旗荷花湖湿地等保护区全部实行
+机械围栏。各湿地保护区全面实施了禁猎措施，严禁捕猎各种野生动
+物及鸟类，在珍禽常出没的区域设立瞭望塔，加强巡查瞭望。林业执
+法部门对保护区内的乱挖滥采进行打击治理，加强了干旱年份湿地退
+水后形成的大面积草场的防火工作。
+
+                                                                    62
+      4.存在问题
+      由于全球气候变暖造成的持续干旱和人为活动加剧的综合影响，
+湿地资源出现源头水量减少，面积萎缩，生物资源及其多样性减少，
+生态系统恶化加剧等问题。目前，通辽的湿地仍然面临以下问题：
+      （1）湿地面积不断萎缩，资源总量锐减
+      近年来，由于连年降水量减少，工农业用水量加大，超采使地下
+水位持续下降等原因，境内西辽河、新开河、教来河、老哈河等主要
+外来河流常年断流，湿地外来水资源锐减，湿地数量和水资源总量急
+剧下降，生物多样性锐减。而且，由于一些水库和排水干渠等水利基
+础设施不够完善，造成管理缺失，全市每年都有大量的河水和自然降
+雨等水资源流向外省，对于水资源相对匮乏的通辽市来说是非常大的
+浪费。
+      （2）湿地生态保护与利用的矛盾突出
+      通辽市湿地资源相对丰富，但经济比较落后，因此对湿地资源开
+发利用的需求非常迫切，但是由于人类的过度开发，造成湿地资源严
+重退化。湿地保护与开发利用之间的矛盾日益尖锐，首先是放牧与湿
+地保护的矛盾，由于气候干旱和超载放牧的双重作用，可利用草场日
+趋萎缩，导致大量的畜群涌入湿地，湿地负担过重，大量湿地严重退
+化成沙地；其次是农业与湿地保护的矛盾，由于自然和人为因素，一
+些湿地干旱，面积逐渐缩小，进而被当作农田种植农作物，使湿地遭
+受破坏难以恢复。
+      （3）湿地保护管理机构不健全，各部门缺乏协调运行机制
+      旗县级湿地保护机构不健全，有的地方虽然成立了保护管理机构，
+但没有专职人员、没有经费保障，野外巡护、资源监测等工作开展不
+起来，多数仍停留在”守摊子”上；严重制约了湿地保护管理工作的
+有效开展。另外，在湿地管理上还是多头管理，林业、环保、水利等
+
+                                                                    63
+部门都有对湿地的一定管理权限，没有统一的、行之有效的管理机构。
+致使湿地保护管理、开发利用牵扯面广，造成湿地保护缺乏综合协调、
+管理和利用监督机制，很多工作开展困难或无法开展，影响了对湿地
+及湿地生物多样性的全面保护。
+
+      （4）人们对湿地保护存在认识误区和认识盲区
+      由于历史原因，多数湿地保护区内的土地使用权归农牧民所有，
+保护区的建立已经直接影响当地依靠放牧、耕种、渔业为主要生产性
+收入的群众的利益。大多数群众对湿地的概念比较模糊，没有认识到
+湿地的生态功能是与森林和海洋的生态功能并重，没有意识到湿地这
+种生态功能与人类生存和生活息息相关，对湿地保护作用的发挥没有
+正确的认识，对保护工作不关心、不支持，致使湿地保护工作受到很
+大影响。
+      （5）法律法规不健全，执法力度不够
+      目前全市乃至全区还没有一部关于湿地保护与合理利用的专门
+法律法规，已有的相关法规虽然比较多，但有关湿地保护的条款比较
+分散，且不成系统，无法可依或法条相互交叉、重复的情况并存，在
+具体管理中产生许多困难，难以发挥应有的作用。导致湿地保护执法
+过程中仍存在执法不力、执法不畅和执法水平不高等问题。
+      （6）资金缺乏、湿地保护投入不足
+      湿地资源重点分布地区和生态建设区大多地处贫困地区，地方财
+政困难，在保护区建设、湿地监测研究及执法手段与队伍建设等方面
+都缺乏专门的资金支持。用于湿地保护工程资金和管理经费严重不足
+是湿地保护管理面临的主要问题。大部分自然保护区因缺乏资金投入
+建设工程不能实施，自然保护区生存和发展进退两难。由于资金短缺，
+使许多湿地保护项目和措施难以实施，已建立的湿地自然保护区不能
+
+                                                                    64
+发挥其正常的保护功能。
+    （六）能矿资源
+
+      1.现状情况
+      通辽地区跨越华北板块的华北陆块和华北北部古生代陆源增生
+带两个二级构造单元；中生代时期又有滨太平洋构造域叠加，构成大
+兴安岭火山—岩浆岩带；新生代在大兴安岭东侧形成巨大松辽断陷盆
+地，突泉—林西、乌拉山—集宁—阜新、开鲁盆地三个重要的成矿带
+贯穿，被国家和内蒙古自治区列为区域重点勘査区。
+      截至 2017 年底，通辽已探明煤炭、石油、硅砂等矿藏 60 种（含
+亚种），列入《内蒙古自治区储量表》的矿种 27 种。铸型用砂、玻璃
+用砂、水泥配料板岩等 12 个矿种保有资源储量列自治区矿产资源储
+量表首位；煤、油页岩、钨、铌、水泥灰岩等 5 个矿种保有资源储量
+排名自治区前 5 位；麦饭石为自治区唯一产地，未上储量表的矿种为
+石油、铀、叶腊石、麦饭石、磷灰石、矿泉水、地热等。煤炭保有量
+113 亿吨，霍林河煤矿是中国五大露天煤矿之一和国家重点规划建设
+的 13 个亿吨级大型煤炭基地之一；天然硅砂保有储量 1.34 亿吨，储
+量居全国之首；“八〇一”稀有稀土矿为世界特大型矿床，被称为“冶
+炼之宝”的石墨储量也很可观，功能神奇的中华麦饭石蜚声海内外。
+通辽市矿产地 85 处，包含能源矿产地 26 处，金属矿产 27 处，非金
+属矿产地 32 处，其中大中型矿区（床）30 处；未上储量表的矿种为
+石油、铀、叶腊石、麦饭石、磷灰石、矿泉水、地热等，涉及矿产地
+353 处。
+      通辽市清洁能源发展迅猛，已形成风电装机 401 万千瓦、光伏装
+机 53 万千瓦，扎鲁特至青州±800 千伏特高压直流输电工程全面开工
+建设，实现“煤从空中走、风从天传输、光从地上传”。
+
+                                                                    65
+        表 3-14 通辽市主要矿产保有资源储量情况
+
+序号 矿产名称          矿区数         单位 资源储量 在自治区位次
+
+1       煤        24          千吨 11333065     4
+
+2   油页岩          2           千吨 459460       2
+
+3   铁矿        6 伴生矿产 1 千吨 17747              10
+
+4   铜矿        3  共生矿产 5      铜吨     115514   8
+                 伴生矿产 4
+
+5   铅矿           共生矿产 4                      7
+              6 伴生矿产 1 铅吨           409998
+
+6   锌矿        4  共生矿产 7      锌吨     756329   6
+                 伴生矿产 2
+
+7   钨矿           3           WO3 吨  597      7
+
+8   钼矿           1           钼吨     7457     8
+
+9   金矿           1           金千克 0.225       10
+
+10  银矿        2  共生矿产 2      银千克    0.946    6
+                 伴生矿产 8
+
+11 稀 铌矿          伴生矿产 1 Nb2O 5 吨 309113      2
+
+12 有、 钽矿         伴生矿产 1 Ta2O5 吨 20369        1
+       稀土
+13 和分 铍矿         伴生矿产 1      BeO 吨 64050     1
+
+14 散元 锆矿         伴生矿产 1      ZrO2 吨 3718792  1
+
+    素矿                       Y2O3 吨 784379
+15 产 褐帘石 主要矿产 1                              2
+
+16 普通萤石          2           千吨     88       7
+
+17 铸型用砂          3           千吨     3775     1
+
+18 玻璃用砂          6           千吨 79321        1
+
+19  脉石英          2           千吨     753      3
+
+20  泥炭           5           千吨     9441     2
+
+21 隐晶质石墨         3           千吨 14131        1
+
+22 水泥用灰岩         5           千吨 688557       3
+
+23  高岭土          1           千吨     409      6
+
+24  叶腊石          1           千吨     2810     1
+
+25  水泥配料用板       1           千吨 78854        1
+           岩
+
+26 建筑用砂          1           千立方    10180    1
+                                米
+
+27  粘土矿          2           千吨     8160     1
+
+    资料来源：自然资源局《通辽市矿山地质环境调查报告》。
+
+                         66
+      2.时空分布
+      通辽市矿产资源分布分为三个成矿带，分别是北部成矿带、中部
+成矿带和西南部成矿带。
+      北部大兴安岭成矿带（霍林郭勒市-扎鲁特旗），以煤、隐晶质石
+墨、铜、铅、锌、金、银为主，煤炭资源丰富，为东北地区重要的能
+源开发基地，有特大型稀有稀土矿产地 1 处。资源产地包括：霍林河
+煤田矿区（床）（褐煤、长焰煤）、巨力黑、联合屯、黄花山等煤炭矿
+区（床）（无烟煤）；“八〇一”稀有稀土矿区（床）；罕山叶蜡石矿区
+（床）；塔拉营子一带隐晶质石墨矿区（床）10 处；扎鲁特旗水泉铜
+铅锌矿、敖林达铅锌银矿区（床）9 处，其中 8 处有银伴生。
+      中部成矿带（奈曼旗-开鲁县-科左后旗），以长焰煤、铀、石油、
+油页岩、玻璃用砂、铸型用砂为主，为中国北方重要的铀矿勘查开发
+基地。资源产地包括：金宝屯、宝龙山、双辽找煤矿区，科左后旗吉
+尔嘎朗、散都等煤炭矿区（床）（长焰煤），金宝屯油页岩；开鲁盆地
+交力格油气田，广发、前河、西湖、科尔康油田、高林屯铀矿区（床）；
+白市-大林-甘旗卡、东来-大沁他拉天然石英砂（玻璃用、铸型用）
+矿区（床），麦里等泥炭矿区（床）。开鲁盆地石油勘探中发现厚层油
+页岩和煤，有找矿潜力。
+      西南部成矿带（库伦旗-奈曼旗南部），即辽西山区边缘地带，以
+铁、铜、铅、锌、钨、金、水泥灰岩、麦饭石为主。资源产地包括：
+奈曼旗杨树沟油页岩矿区（床）；奈曼旗青龙山铜钼矿、库伦旗伊河
+沟铁锌、哈拉火烧铁矿矿区（床）；奈曼旗南湾子、恒沟子、四楞山、
+头道沟等铁矿矿区（床）、长岭山铅锌矿区（床）；库伦旗卧力吐锌矿
+（硫化锌矿石）、赵家湾子、大麦地、汤家杖子钨矿矿区（床）；奈曼
+旗石碑、青龙山镇、库伦旗三家子镇、柳树底下水泥用石灰岩；奈曼
+旗南部麦饭石矿等。
+
+                                                                    67
+                       图 3-14 通辽市矿产资源分布图
+      3.开发利用情况
+      截至 2017 年底，通辽市已开发利用铁、铜、铅、锌、金、煤、
+铀、石油、隐晶质石墨、石灰岩、玻璃用砂、铸型用砂、叶腊石、麦
+饭石等 37 种矿产，占已查明矿种的 77%；未利用的矿种有焦煤、油页
+岩、钨、铌、钽、铍、锆、锗、稀土氧化物和泥炭。全市在期采矿权
+单位 395 家，大中型矿山 79 家，占比 20%，其中：一、二类矿产大中
+型矿山 37 家，占矿山总数的 9.37%；砂石土矿大中型矿山 42 家，占
+矿山总数的 10.63%。
+
+                                                                    68
+表 3-15 通辽市主要矿产矿业产值（2017 年）
+
+资源名称       矿山 大中型规 矿业产值          供应方向
+           数量 模数量 （亿元）
+
+煤          20        7   59      本地、黑吉辽电厂
+
+铁          5         1   0.2542
+
+有色金属（伴生贵金属） 8        2   14.94
+
+隐晶质石墨      10        10  0.5141
+
+水泥用石灰岩     13        3   4.15    本级及周边
+
+天然石英砂（玻璃）  7         3   1.75    本地、河北、吉林
+
+天然石英砂（铸型） 34         5   0.9467  本地、一汽、黑龙江、
+                                             辽宁
+
+砂石土        272       42  1.9     本地
+
+小计         369       73  83.455
+
+资料来源：自然资源局。
+
+矿产资源利用方面，依托褐煤资源，积极探索褐煤综合利用途径，
+
+走出一条以低热值煤发电、以电炼铝、以铝做深加工的路子，形成煤
+
+电铝联营发展资源综合利用的产业格局。硅砂加工 360 万吨，通辽市
+
+大林型砂有限公司是中国最大的铸造用天然硅砂生产基地，是铸造用
+
+硅砂以及标准砂唯一定点生产单位。通辽拥有火力发电厂 15 座（包
+
+含 6 座自备电厂），风力发电厂 34 座，光伏电站 16 座，风光互补发
+
+电 2 座，全年发电量 339.1 亿千瓦时，城市、农网用户供电可考虑分
+
+别完成 99.95%和 99.71%。
+
+      4.存在问题
+      通辽市矿产资源丰富，目前的勘查开发相对滞后，不能满足需要，
+亟需进行规划研究，指导整个地区矿产资源开发活动。通辽市矿山规
+模普遍偏下，小型矿山占矿山总数的 80%，且多数达不到最低开采规
+模，缺少大中型矿山支撑。稀有稀土矿产、油页岩、地热等优势矿产
+资源尚未开发利用，煤炭、石英砂、铁、有色金属以及非金属等主要
+矿产资源仍以粗加工为主，造成大量伴生矿物资源浪费和地质环境破
+
+                     69
+坏。矿产资源开发全面节约与高效利用的绿色开发模式还没有形成，
+集群化、规模化产业链条还没有构筑。
+
+      随着矿业开发的不断深入，矿山占用破坏土地资源与地貌、矿业
+开发引发地质灾害、对水资源的影响及破坏、地裂缝、沉降等一系列
+地质环境问题逐渐增多。截至 2017 年底，全市矿业开发占用土地总
+面积 216.79 平方公里，破坏土地面积 69.35 平方公里，矿业开发破
+坏土地面积 106.92 平方公里，恢复治理面积 29.08 平方公里，治理
+率约 27.20％。历史遗留矿山总面积 3.53 平方公里，治理面积 1.12
+平方公里，治理率为 32%。矿山地质环境治理还需进一步加强。
+
+      通辽市新能源发展迅速，新能源资源富集，但伴随着经济增长由
+高速转为中高速，新能源市场需求有限，受负荷及送出条件限制，可
+能面临消纳难问题，随着地区风电装机容量的增加，电网限电弃风的
+情况也可能更加严重。通辽市风机单机容量小，较兆瓦机组的发电能
+力低，发电竞争能力较差，短期内新能源产业也难以进入新能源产业
+链的高技术、高利润环节，新能源企业自主创新力不足，设备运行维
+护成本上升，还需要通过技术改造优化新能源产业结构布局。
+
+四、本底评价结果
+    （一）生态保护重要性
+
+      1.生态系统服务功能重要性评价
+      生态系统服务功能是生态系统与生态过程所形成及所维持的人
+类赖以生存和发展的自然环境条件与效用，支撑与维持了地球的生命
+支持系统。生态系统服务功能重要性是评价区域内不同地区生态系统
+提供各项服务功能的能力及其对区域内人类生存的自然生态环境条
+件和社会经济发展的重要性，明确每一类别服务功能重要性的空间分
+布情况，进行生态系统服务功能重要性综合评价，提出综合生态服务
+
+                                                                    70
+功能重要性分区。
+      通辽市生态系统服务功能重要性评价分别从生物多样性维护、水
+
+源涵养、水土保持、防风固沙方面评价其系统服务功能的重要性，取
+各结果最高等级作为生态系统服务功能重要性等级。
+
+      （1）生物多样性维护功能重要性
+      生物多样性维护功能是生态系统在维持物种、遗传资源和基因
+多样性中发挥的作用，通过该项指标的评价，识别通辽市现状和未
+来可以承担区域生物多样性维护功能的重点区域。该指标可在物
+种、遗传资源与生态系统三个层次进行评价。
+      通辽市为典型森林—草原过渡地带，拥有极具代表性的森林、
+草原、平原、草甸及湿地相间分布的生态系统，生物多样性特征突
+出。
+      通辽横跨我国东北、华北地区，科尔沁沙地 60%在通辽境内，生
+态地位重要，但生态环境脆弱，作为构筑我国北方生态安全屏障的重
+要组成部分，生态战略地位极为重要。市域内生态类型与物种丰富，
+存在一定地域特点，具有较大的生物多样性保护与利用价值。
+      在生态系统层次，根据三调地类转换得到通辽市生态系统，结合
+林草类型及质量数据优化生态系统。通辽市生态系统可分为森林生态
+系统、草原生态系统、荒漠生态系统、湿地生态系统以及农田生态系
+统。通辽市生态系统种类多样，并以南、北部森林、草地生态系统、
+中部农田生态系统为主。之后将原真性和完整性高、需优先保护的森
+林、灌丛、草地、内陆湿地、荒漠等生态系统评定为生物多样性维护
+极重要区（具体优先保护生态系统名录列表见《资源环境承载力和国
+土开发适宜性评价指南（试行）附表 A-1》），通辽市优先保护生态系
+统名录主要集中于扎鲁特旗南部及科左中旗北部；其他需保护的生态
+
+                                                                    71
+系统评定为生物多样性维护重要区。
+
+                           图 4-1 生态系统分布情况
+      在遗传资源层次，将重要野生的农作物、水产、畜牧等种质资源
+的主要天然分布区域，确定为生物多样性维护极重要区。
+      在物种层次，生物多样性维护功能的极重要区包括了敖伦国家森
+林公园，罕山国家级自然保护区、荷叶花湿地水禽自治区级自然保护
+区、胡力斯台淖尔国家湿地公园、花胡硕天然榆树疏林草原国家草原
+公园、北图国家沙漠公园等以保护珍稀濒危野生动植物种群、原始古
+老的自然地貌、稀有多样物种为主要保护对象的保护区 56 处。其中，
+大青沟自然保护区是一处保存完好的古代残遗森林植物群落，地处科
+尔沁左翼后旗甘旗卡镇西南 25 公里处，是一条南北走向的绿色深谷，
+
+                                                                    72
+与沟外的沙化现象形成了鲜明的对比。乌斯吐自然保护区位于科尔沁
+沙地腹地，是科尔沁沙地生物资源和景观的缩影，物种资源丰富，是
+一个难得的野生物种资源基因库。孟家段湿地地处科尔沁沙地腹地、
+西辽河上游，大面积的湿地水域和林草植被，是为西辽河上游挡风抑
+沙、抵抗环境恶化和生态退化的重要生态屏障之一，且处在东亚—澳
+大利西亚鸟类迁徙路线上，为丹顶鹤、灰鹤、蓑羽鹤、白琵鹭、大天
+鹅、小天鹅、疣鼻天鹅等珍稀候鸟提供了停歇地和生态踏脚石。
+
+                           图 4-2 通辽市生态功能区
+      综合遗传资源、物种及生态系统层次的生物多样性维护功能重要
+性分布情况，划分通辽生物多样性维护功能重要性等级。
+      通辽市生物多样性维护功能极重要区域主要位于扎鲁特旗鲁，罕
+
+                                                                    73
+山自然保护区、格日朝鲁苏木、阿日昆都楞镇、霍林郭勒市山地草原
+
+和矿区及包头市大青山保护区。
+
+结果表明，全域生物多样性维护功能重要类型以重要为主，占全
+
+市总面积的 75.18%，主要分布在科尔沁区、开鲁县、奈曼旗、科左后
+
+旗和库伦旗；生态多样性维护功能极重要区域分别占全市总面积的
+
+24.82%，主要分布在扎鲁特旗南部，科尔沁左翼后旗中部。该区域生
+
+物多样性维护功能相对较高，涵盖了大青沟国家级自然保护区、内蒙
+
+古罕山自然保护区、扎鲁特旗荷叶花湿地水禽自治区级自然保护区等
+
+多个自然保护区。
+
+表 4-1 生物多样性维护功能评估结果 单位：公顷、%
+
+  区域  生物多样性维护功能重要区       生物多样性维护功能极重要区
+
+科尔沁区  面积          比重     面积          比重
+霍林郭勒
+科左后旗  320812.87   91.25  30756.74    8.75
+科左中旗
+ 开鲁县  33860.87    57.92  24605.20    42.08
+ 库伦旗
+ 奈曼旗  1010683.34  87.89  139263.30   12.11
+扎鲁特旗
+      601082.97   62.79  356161.17   37.21
+  小计
+      395868.95   90.92  39557.97    9.08
+
+      410373.69   87.15  60529.06    12.85
+
+      738507.00   90.78  75026.63    9.22
+
+      913959.28   55.42  735189.15   44.58
+
+      4425148.96  75.18  1461089.23  24.82
+
+                  74
+                 图 4-3 生物多样性维护功能重要性等级
+      （2）水源涵养功能重要性
+      水源涵养是指森林、灌木、草丛、湿地等生态系统通过其特有的
+结构与水相互作用，对降水进行拦截、蓄积，并通过蒸散发实现对水
+流、水循环的控制。通过该项指标评价区域，识别通辽市现状和未来
+可以承担水源涵养功能的重点区域。
+      通辽市是我国北方重要的生态功能区，其包含的典型生态系统具
+有独特的水源涵养功能，在防洪减灾、保障生态安全和人民安全中发
+挥着关键作用。
+      通过降水量减去蒸散量和地表径流量得到的水源涵养量，评价通
+辽市生态系统水源涵养功能的相对重要程度。以水源涵养量作为衡量
+
+                                                                    75
+指标，考虑大江大河源头区、饮用水水源地等因子适当修正评价结果，
+具体计算公式如下：
+
+                               ������������ = ������������ − ������������������ − ������������
+      式中，WR 为总水源涵养量（������3），������������为降雨量（������������），������������������为蒸
+散量（������������），������������为地表径流（������������）。
+      多年平均降水量（������������）根据通辽 11 个国家基本站点 2006 年-2019
+年气象站点实测降雨量数据通过空间插值求得。总体上呈现市域中部
+向南北逐渐递增的态势，南北部多，中部少，且高值中心位于南部的
+库伦、奈曼旗。降雨量的季节分配因受到季风的影响很不均衡，雨量
+主要集中在夏季，约占年降水量的 70%以上。由于西北部的大兴安岭
+南部山地影响，扎鲁特旗降水量有所增加。
+
+                            图 4-4 降水量分布情况
+
+                                                                    76
+      地表径流量（������������），降雨量乘以地表径流系数获得，计算公式如
+下：
+
+                                     ������������ = ������ × ������
+      式中，������������ 为地表径流量（mm），P 为多年平均降雨量（mm），α为
+平均地表径流系数。各生态系统类型平均地表径流系数见《资源环境
+承载力和国土开发适宜性评价指南（试行）表 A2》。
+      通辽市位于内蒙古自治区东部，与松辽平原西部相邻，地处北方
+半干旱气候区，属温带大陆性气候。区域农牧业发达，工业集中，耗
+水量大，然而存在降水量小、年内分配不均，蒸发量大，作物水分缺
+量大等特点。地表径流量的空间分布整体上与降雨量空间分布规律基
+本一致。
+
+                         图 4-5 地表径流量分布情况
+
+                                                                    77
+      地表蒸散量（������������������ ）包括土壤和植物表面的水分蒸发和冰雪表面
+升华，也包括通过植物表面和植物体内的水分蒸腾。地表蒸散过程是
+土壤–植物–大气系统中水分运动的重要过程。通辽市蒸散量数据来
+源于“一带一路”及其毗邻区域地表蒸散发数据集(2015)。通辽市蒸
+散量与降水量分布趋势相似，基本分布特征为南多北少，随着纬度的
+增加，蒸散量递减的特征越来越明显。中部科尔沁区森林、草地与农
+田相间分布，且科尔沁草原地区又多湿地和草地，土壤蓄水能力较弱，
+容易产生地表径流。
+
+                            图 4-6 蒸散量分布情况
+      根据降雨量、地表径流量、蒸散量结果，按照公式计算得出各栅
+格单元水源涵养量评价值，并对评价值大小进行降序排列。降雨量大
+
+                                                                    78
+于蒸散量较多，且地表径流量相对较小的区域，水源涵养功能重要性
+较高。森林、灌丛、草地和湿地生态系统质量较高的区域，由于地表
+径流小，水源涵养功能相对较高。一般地，将累计水源涵养地最高的
+前 50%区域确定为水源涵养极重要区。在此基础上，将重要饮用水源
+地补充纳入水源涵养功能极重要区，完善重要性等级结果。补充的水
+源地主要有：莫力庙水库备用水源地、三义堂水厂水源地。
+
+结果表明，通辽市水源涵养功能重要类型以一般重要为主，占比
+
+78.24%，主要分布在开鲁县、霍林郭勒、科尔沁区和科尔沁左翼中旗；
+
+极重要区占比21.76%，主要分布在扎鲁特旗、库伦旗和奈曼旗。扎鲁
+
+特旗是通辽市北部天然绿色屏障，是嫩江水系和辽河水系的重要发源
+
+地和水源涵养地。
+        表 4-2 水源涵养评估功能服务结果 单位：公顷、%
+
+  区域  水源涵养功能重要区          水源涵养功能极重要区
+
+科尔沁区  面积          比重     面积          比重
+霍林郭勒
+科左后旗  327649.50   93.20  23920.11    6.80
+科左中旗
+ 开鲁县  57227.48    97.88  1238.59     2.12
+ 库伦旗
+ 奈曼旗  947387.85   82.39  202558.79   17.61
+扎鲁特旗
+      862156.54   90.07  95087.60    9.93
+  小计
+      433140.90   99.47  2286.02     0.53
+
+      159430.16   33.86  311472.59   66.14
+
+      583471.88   71.72  230061.75   28.28
+
+      1235133.42  74.90  414015.01   25.10
+
+      4605597.73  78.24  1280640.46  21.76
+
+                  79
+                   图 4-7 水源涵养功能重要性评价等级
+      （3）水土保持功能重要性
+      水土保持服务是指生态系统通过其结构与过程减少由于水蚀所
+导致的土壤侵蚀作用，主要表现为植被根系能够固定土壤，减少地表
+土壤随降水流失进入沟壑的能力，是生态系统提供的重要调解服务之
+一。
+      通辽市降水集中且土层较薄，土壤抗蚀力差，保水保肥能力低，
+属于国家水土保持重点治理区。近年来为减轻当地水土流失状况并改
+善农业生产条件，保障区域内生态环境和促进经济持续健康发展，水
+
+                                                                    80
+土保持部门陆续开展了水土流失治理、坡耕地改造等水土保持工程。
+      通过生态系统类型、植被覆盖度和地形特征差异来实现对通辽水
+
+土保持服务重要性的评价，评判通辽市生态系统土壤保持功能的重要
+程度。
+
+      通辽市蒙古高原和东北平原的交汇处，地处大兴安岭南部山地、
+西辽河平原、辽西黄土丘陵区的连接带，全市绝大部分地区位于科尔
+沁沙地的腹地。独特的地理位置，复杂的地形、地貌和鲜明的南北温
+差，使得通辽市生态系统复杂多样。其主要生态系统有森林生态系统、
+草地生态系统、农田生态系统、荒漠生态系统、湿地生态系统。榆树
+疏林草原为其原始景观，占主导的植被为草原，次主导植被为森林。
+干旱草原类型和旱生草本植物等为通辽市主要植被类型。可以归属于
+三大景观生态功能区: 中温型大兴安岭南部山地森林-草原生态系统、
+辽河平原沙地生态系统、黄土丘陵沟壑区暖温性草原生态系统。
+
+                                                                    81
+                           图 4-8 生态系统类型分布
+      全市地势南北高、中间低，呈马鞍型。全域除西北方向的霍林郭
+勒市和扎鲁特旗坡度起伏较大以外，整体坡度较为平坦。
+      北部为大兴安岭南麓余脉的石质山地丘陵；南部为辽西山地边缘
+的浅山、黄土丘陵区；中部为西辽河流域沙质冲击平原。其中在西辽
+河流域冲击平原与山地、丘陵之间的过度地带分布着起伏不平的沙地
+和沙丘。地形、地貌复杂多样。
+
+                                                                    82
+                              图 4-9 坡度分级情况
+      植被覆盖因子（C）是植被覆盖和人类活动两部分的综合影响，
+能够反映水土保持措施的差异。植被覆盖度信息提取是在对光谱信号
+进行分析的基础上，通过建立归一化植被指数与植被覆盖度的转换信
+息，直接提取植被覆盖度信息。
+
+                    C=(NDVI-������������������������������������������������)/(������������������������������������������ − ������������������������������������������������)
+      式中：������������������������������������������为完全植被覆盖地表所贡献的信息，������������������������������������������������为无
+植被覆盖地表所贡献的信息。
+      从空间分布上看，通辽市全域整体植被覆盖度偏低，由中间向四
+
+                                                                    83
+周呈现低-高-低的趋势，奈曼、库伦境内植被覆盖度较低，植被覆盖
+度较高区域主要集中在扎鲁特旗北部山区，中部平原以及南部浅山丘
+陵区。通辽市植被覆盖空间分布与水系、河网的分布有高度的一致性，
+河网越密集，植被覆盖度越好，越能够在一定程度上缓阻水土流失。
+
+                        图 4-10 植被覆盖度分级情况
+      根据生态类型、植被覆盖度和地形特征综合判断区域水土保持功
+能重要性，将通辽市水土保持功能性评估分为一般重要、重要、极重
+要三个等级。
+      一般地，森林、灌丛、草地生态系统土壤保持功能相对较高，植
+
+                                                                    84
+被覆盖度越高、坡度越大的区域，土壤保持功能重要性越高。将坡度
+
+不大于20度且植被覆盖度不小于80%的森林、灌丛和草地确定为水土
+
+保持极重要区；在此范围外，将坡度不小于15度且植被覆盖度不小于
+
+60%的森林、灌丛和草地确定为水土保持重要区。同时结合专项成果，
+
+对水土保持结果进行适当修正。
+
+结果表明，全域水土保持功能重要类型以一般重要为主，在本市
+
+各旗县均有分布，占比达96.51%；其次为水土保持功能重要区，占比
+
+2.57%，主要分布在扎鲁特旗、霍林郭勒市和库伦旗；水土保持功能
+
+极重要区占比0.92%，主要分布在扎鲁特旗。
+
+表 4-3 水土保持服务功能评估结果 单位：公顷、%
+
+      水土保持功能一般重  水土保持功能重要 水土保持功能极重要
+
+ 区域   要区             区                      区
+
+科尔沁   面积  比重     面积     比重  面积                 比重
+   区
+      350359.32 99.66 1059.02 0.30 151.27      0.04
+霍林郭
+   勒  55897.71 95.61 2351.28 4.02 217.09       0.37
+
+科左后   1147337.14 99.77 2307.97 0.20 301.53     0.03
+   旗
+      953899.21 99.65 2704.01 0.28 640.92      0.07
+科左中
+   旗  431751.40 99.16 2973.10 0.68 702.42      0.16
+
+开鲁县   464156.66 98.57 6438.93 1.37 307.16      0.07
+库伦旗
+奈曼旗   804885.34 98.94 7635.03 0.94 1013.26 0.12
+扎鲁特
+      1472635.95 89.30 125905.39 7.63 50607.09 3.07
+   旗
+ 小计   5680922.73 96.51 151374.71 2.57 53940.75 0.92
+
+                 85
+                  图 4-11 水土保持功能重要性评价等级
+      （4）防风固沙功能重要性
+      防风固沙是生态系统（如森林、草地等）通过其结构与过程减少
+由于风蚀所导致的土壤侵蚀的作用，通过该项指标评价，识别通辽市
+现状和未来承担防风固沙功能的重点区域。
+      通辽市地处大风入侵我国华北的主通道上，已经成为影响我国华
+北地区的重要沙尘源之一。防风固沙量的多少直接能反映防风固沙能
+力的强弱。防风固沙功能是风蚀地区自然生态系统重要的生态服务功
+能之一，生态系统植被对风沙的抑制和固定作用，为区域生产生活可
+
+                                                                    86
+持续发展创造了条件。
+      通辽市地带性土壤为栗钙土，其余土壤主要有风沙土，灰色草
+
+甸土等十个种类，以风沙土为主，占总面积的 43.5%。通辽市位于
+科尔沁沙地腹地，沙地面积约 2724000 hm²，占通辽市土地总面积
+的 45.4%，占科尔沁沙地面积 52.7%，是科尔沁沙地的主体地区。通
+辽市土壤含砂量占比高，主要集中在南部四大沙带及周边沙化土地
+“防风固沙”功能区。沙地分为三类，包括流动沙地、固定、半固
+定沙地、潜在沙漠化沙地。具体土壤含沙量分布图如图所示。
+
+                         图 4-12 土壤砂粒含量分布图
+      通辽市属干旱、半干旱地区，年平均气温0-6℃，年平均日照时
+
+                                                                    87
+数3000小时左右，≥10℃积温3000-3200℃，无霜期140-160天，年平
+均降水量350-400mm，最大年降水量802mm，最小年降水量165.3mm,降
+水集中在7、8月份，多以暴雨形式出现，年内、年际分布不均。蒸发
+量是降水量的5倍左右，年平均风速3-4.4m/s，全年8级以上大风日数
+20-30天，春季干旱多风，常常出现沙尘暴和扬沙天气。由于地理位
+置和地形条件不同，气温差异较为显著。大风天数分布大致由南向北
+递增，最北部的霍林郭勒与扎鲁特旗北部大风天数高于其余旗县。
+
+                            图 4-13 大风天数分布图
+      植被作为一种重要的自然资源，具有明显的防风固沙功能。植被
+是遏制土壤风蚀最敏感的因素，在一定程度上起着削弱气候驱动力、
+
+                                                                    88
+保护表层土壤免受吹蚀，改变土壤底层的物质成分，促进土壤团聚体
+形成等作用，从而达到减少土壤风蚀的目的。根据被覆盖度的变化趋
+势将植被覆盖度变化程度分为 3 类。通辽市全域植被覆盖度均在 15%
+以上。奈曼旗及库伦旗村庄部分区域因土地沙化程度高，导致其植被
+覆盖度较低。
+
+                          图 4-14 植被覆盖度分级图
+      根据土壤砂粒含量、大风天数、植被覆盖度的结果，评价通辽市
+生态系统防风固沙功能的相对重要程度。一般地，森林、灌丛、草地
+生态系统防风固沙功能相对较高，大风天数较多、植被覆盖度较高、
+土壤砂粒含量高的区域，防风固沙功能重要性较高。
+      结果表明，全域防风固沙功能重要性等级类型以一般重要为主，
+
+                                                                    89
+占 71.41%。主要分布在扎鲁特旗、开鲁县、科尔沁区、科左中旗。其
+
+次为防风固沙功能重要区，占比 28.59%，主要分布在科左后旗、库伦
+
+旗和奈曼旗；不存在防风固沙功能极重要区。空间分布上，不同级别
+
+防风固沙功能重要性区域连续分布，以科尔沁区为分界线，以北的霍
+
+林郭勒、扎鲁特旗、开鲁县和科左中旗的防风固沙重要区比重低；以
+
+南的奈曼旗、库伦旗以及科左后旗防风固沙能力需要加强，建议通过
+
+保护天然植被或建立人工植被提高区域生态系统整体的防风固沙能
+
+力。
+
+    表 4-4 防风固沙服务功能评估结果 单位：公顷、%
+
+  区域  防风固沙功能一般重要区        防风固沙功能重要区
+
+科尔沁区  面积          比重     面积          比重
+霍林郭勒
+科左后旗  302548.51   86.06  49021.10    13.94
+科左中旗
+ 开鲁县  29901.55    51.14  28564.52    48.86
+ 库伦旗
+ 奈曼旗  407262.34   35.42  742684.30   64.58
+扎鲁特旗
+      698409.94   72.96  258834.20   27.04
+  小计
+      408086.86   93.72  27340.06    6.28
+
+      299194.28   63.54  171708.47   36.46
+
+      572507.42   70.37  241026.21   29.63
+
+      1485665.80  90.09  163482.63   9.91
+
+      4203576.71  71.41  1682661.48  28.59
+
+                  90
+                   图 4-15 防风固沙功能重要性评价等级
+      （5）生态功能重要性评估集成
+      根据通辽市实际情况和生态环境特点，确定主要生态系统服务功
+能包括水源涵养、水土保持、生物多样性和防风固沙，分析评价通辽
+市生态系统服务功能的相对重要程度。
+      结果表明，全域生态系统服务重要性等级以重要为主，占全域总
+面积的 56.90%，主要分布在通辽市域的中部平原区，集中在开鲁县、
+科尔沁区、科左后旗和奈曼旗北部等，这些地区主要以地形开阔平坦
+的耕地、草地为主，生态系统相对简单但也较为薄弱。极重要区占全
+域总面积的 43.10%，主要分布在市域的北部和西部地区，南部地区
+也有零星分布，大多是自然保护区的分布区域。这些区域是保障通辽
+
+                                                                    91
+市生态安全的关键。
+
+表 4-5 生态功能重要性评估结果        单位：公顷、%
+
+  区域  生态系统服务重要区          生态系统服务极重要区
+
+科尔沁区  面积          比重     面积                     比重
+霍林郭勒
+科左后旗  297465.48   84.61  54104.13               15.39
+科左中旗
+ 开鲁县  33657.26    57.57  24808.81               42.43
+ 库伦旗
+ 奈曼旗  834397.83   72.56  315548.81              27.44
+扎鲁特旗
+      526139.70   54.96  431104.44              45.04
+  小计
+      395102.84   90.74  40324.08               9.26
+
+      127968.16   27.18  342934.59              72.82
+
+      518126.29   63.69  295407.34              36.31
+
+      616260.95   37.37  1032887.48             62.63
+
+      3349118.52  56.90  2537119.67             43.10
+
+      图 4-16 生态系统服务重要性评价等级
+
+                                            92
+      2.生态脆弱性评价
+      生态敏感性是指生态系统抵抗人类活动干扰和环境变化的响应
+程度和在发生生态退化时自我修复的能力，敏感性的高低反映了该区
+域在受到外界影响时，发生生态问题的可能性大小。生态环境脆弱性
+评价就是评价在不损失或不降低环境质量的情况下，生态因子对外界
+压力或外界干扰适应的能力。脆弱性高的区域容易产生生态环境问题，
+是生态环境保护与恢复的重点。
+      通辽市生态环境脆弱性评价分别从水土流失脆弱性、沙化脆弱性
+两方面评价其生态环境脆弱性的等级，分别划分为极脆弱、脆弱和一
+般脆弱 3 个等级，取各项结果的最高等级作为生态脆弱性等级。同时，
+利用水土流失、土地沙化专项调查监测的最新成果，对生态脆弱性进
+行完善修正。
+      （1）水土流失脆弱性
+      水土流失脆弱性是指在自然状态下发生土壤侵蚀可能性的大小。
+对水土流失脆弱性评价，不仅有助于识别容易形成土壤侵蚀的区域，
+评价土壤侵蚀对人类活动的敏感程度，而且还能为区域生态环境保护，
+生态环境规划和管理提供科学依据。
+      通辽市水土流失脆弱性评估参照国家环保总局发布的《生态功能
+区划暂行规程》，以水动力为主的水土流失脆弱性进行评估。根据水
+土流失方程的基本原理，选取降水侵蚀力，土壤可蚀性、坡度坡长和
+地表植被覆盖等指标，进行量化分析，反映各因素对水土流失脆弱性
+的单因子评估数据，用地理信息系统技术进行乘积运算，公式如下：
+
+                                                                    93
+            水土流失脆弱性=4√������ × ������ × ������������ × ������
+
+式中，R、K、LS 和 C 分别为降雨侵蚀力因子、土质类型因子、地
+
+形起伏度因子和植被覆盖因子的脆弱性分级值，各因子赋值方法见下
+
+表。
+
+      表 4-6 水土流失脆弱性的评估指标及分级
+
+指标    降雨侵       土壤质地           地形起                      分
+       蚀力                       伏度         植被覆 级
+                                            盖度 赋
+一般脆   ＜100   沙、粗砂土、细沙土、粘土       0-50
+   弱                                                    值
+            面砂土、壤土、沙壤土、粉粘
+                        土、壤粘土              ≥0.6 1
+                      粉砂土、粉土
+脆弱 100-600                     50-300 0.2-0.6 3
+                               ＞300 ≤0.2 5
+极脆弱 ＞600
+
+将最终的脆弱性分值划为 3 级，极脆弱（>4.0），脆弱（2.1-4.0），
+
+一般脆弱（1.0-4.0）。
+
+降雨是影响土壤侵蚀的主要气候要素，是形成水土流失的物质基
+
+础。降雨侵蚀力是指由降雨所引起的水土流失的潜力能力，它是引起
+
+水土流失的主要动力因素，反映了降雨条件下对土壤剥离、搬移、冲
+
+刷能力的大小。
+
+降雨侵蚀力，通过西北农林科技大学王万忠教授等利用降水资料
+
+计算的中国 100 多个城市的 R 值，用 ArcGIS 软件，采用空间插值方
+
+法绘制。基本通辽全域降雨侵蚀力因子偏高，整体敏感性偏高。
+
+                94
+                    图 4-17 降雨侵蚀力脆弱性分别情况
+      植被覆盖因子和地形起伏度因子在上文中已有计算结果。
+      全域整体植被覆盖度脆弱性一般，由中间向四周呈现低-高-低的
+趋势，能够在一定程度上缓阻水土流失。
+
+                                                                    95
+                  图 4-18 地表植被覆盖脆弱性分布情况
+      全域除西北方向的霍林郭勒市和扎鲁特旗坡度起伏较大，地形起
+伏度脆弱性高以外，整体坡度较为平坦，脆弱性一般。
+
+                                                                    96
+                    图 4-19 地形起伏度脆弱性分布情况
+      土壤质地根据农牧局提供的通辽土壤质地数据生成。不同的土壤
+颗粒具有不同的抗侵蚀能力，并且存在明显差异。主要表现在以下几
+个特点：第一,粘质土壤可快速形成团粒结构,使其抵抗侵蚀的能力增
+强；第二,当粒径完全一致时,沙质和壤质土壤相比,土壤质地为沙质
+的沙尘飞起的几率较大；第三，当砾质、沙化与半沙化的土地和沙地
+土壤比较时，沙地土壤的受大风侵蚀的速率明显高于其他两个；第四，
+基岩质土壤的形成沙化土地的概率非常低，故抗蚀力比较强，受风蚀
+影响较小。通过通辽市土壤质地情况，得出土壤质地脆弱性分布图，
+
+                                                                    97
+整体较为脆弱。
+
+                     图 4-20 土壤质地脆弱性分布情况
+      根据植被覆盖度因子、降雨侵蚀力因子、地形因子和土壤质地等
+各因子分级结果，根据公式计算得出各栅格单元水土流失脆弱性评价
+值，将通辽市水土流失脆弱性评估分为一般脆弱、脆弱、极脆弱三个
+等级。
+      结果表明，经过多年水土保持综合治理，通辽市水土流失得到明
+显控制。从全域水土流失脆弱性空间分布分析，水土流失脆弱性以一
+般脆弱为主，占全市总面积的 52.56%，主要分布在扎鲁特旗、奈曼旗、
+科左中旗、科左后旗和库伦旗；水土流失脆弱区占全市总面积的
+
+                                                                    98
+47.44%，主要分布在扎鲁特旗、霍林郭勒市、库伦旗、奈曼旗等南北
+
+山区。
+
+     表 4-7 水土流失脆弱性评估结果 单位：公顷、%
+
+  区域  水土流失一般脆弱区          水土流失脆弱区
+
+科尔沁区  面积          比重     面积          比重
+霍林郭勒
+科左后旗  303599.76   86.36  47969.85    13.64
+科左中旗
+ 开鲁县  23113.93    39.53  35352.14    60.47
+ 库伦旗
+ 奈曼旗  654346.49   56.90  495600.15   43.10
+扎鲁特旗
+      647262.91   67.62  309981.23   32.38
+  小计
+      316848.26   72.77  118578.66   27.23
+
+      200605.00   42.60  270297.75   57.40
+
+      370561.96   45.55  442971.67   54.45
+
+      577390.68   35.01  1071757.75  64.99
+
+      3093729.00  52.56  2792509.19  47.44
+
+                  99
+                     图 4-21 水土流失脆弱性评价等级
+      （2）土地沙化脆弱性
+      土地沙化是指在干旱、半干旱地区由于气候异常或人类不合理利
+用等因素造成的土地植被覆盖度降低，草地生产力下降，地表呈现出
+类似沙漠景观的现象。造成土地沙化主要是由于气候干旱，再加上人
+类不断向脆弱的生态系统迁移并过度利用土地，比如，超载过牧、过
+度开采地下水和地下矿产资源，使土壤贫瘠，保水性下降，土壤有机
+质含量下降，使植被破坏，不断的危及土地保护伞，最终导致土地沙
+化。
+
+                                                                   100
+通辽市作为我国北方主要的绿色生态环境屏障区，处于干旱半干
+
+旱地区。气候较干燥，生态环境原本比较脆弱，对自然环境的变化比
+
+较敏感。
+
+参照《生态功能区划暂行规程》，选取干燥度指数、起沙风天数、
+
+土壤质地、植被覆盖度等指标。利用地理信息系统的空间分析功能，
+
+将各单因子脆弱性影响分布图进行乘积运算，得到评估区的土地沙化
+
+脆弱性分布，公式如下：
+
+       土地沙化脆弱性 = 4√������������ × ������������ × ������������ × ������������
+
+式中：������������ 、������������ 、������������ 、������������ 分别为评估区域干燥度指数、起沙风天数、
+
+土壤质地和植被覆盖的脆弱性等级值。各因子赋值方法见下表。
+
+       表 4-8 土地沙化脆弱性的评估指标及分级
+
+                                                     分
+
+指标 干燥度指数 ≥6m/s 起沙风天数          土壤质地            植被覆盖度  级
+                                                     赋
+                             基质、粘质
+                             砾质、壤质                   值
+
+一般脆弱    ≤1.5     ≤10             沙质           ≥0.6   1
+   脆弱  1.5-16.0  10-30
+ 极脆弱   ≥16.0     ≥30                          0.2-0.6 3
+
+                                              ≤0.2   5
+
+将最终的脆弱性分值划为 3 级，极脆弱（>4.0），脆弱（2.1-4.0），
+
+一般脆弱（1.0-4.0）。
+
+     干燥度指数（������������）是指描述某一个地区的干燥和湿润程度的指标,
+它反映了当地在某一时间段,水分的收支情况,通常采用修正后的谢
+
+良尼诺夫公式计算烦躁度指数。它是影响土地沙化脆弱性的一个重要
+
+因子,干燥度指数越大,越容易发生土地沙漠化。反之，越不容易发生
+
+土地沙漠化。其公式如下：
+
+                        101
+                                           全年 ≥ 100������的积温
+                           ������������ = 0.16 全年 ≥ 100������期间的降水量
+
+      在Excel中计算出区域所有气象站点全年≥10℃的积温和全年
+≥10℃期间的降雨量，然后利用下述干燥度指数公式计算干燥度指数，
+将这些值根据ArcGIS中的反距离权重插值方法得到干燥度指数栅格
+图。
+
+      通辽市大部分处于干旱和半干旱气候区，境内受蒙古高原气流影
+响，春季干旱大风多，夏季炎热降雨集中，秋季凉爽短促，冬季漫长
+干冷降水少。全域整体干燥度指数较高，只有扎鲁特旗部分地区的干
+燥度指数脆弱性较低。
+
+                    图 4-22 干燥度指数脆弱性分布情况
+      当风搬移土壤颗粒时，风力的大小是一项很重要的因素。已有研
+
+                                                                   102
+究资料表明，砂质壤土、壤质砂土和固定风砂土的起动风速分别为
+6.0m/s,6.6m/s和5.1m/s。选用冬春季节大于6m/s起沙风天数指标评
+估土地沙化脆弱性。根据通辽研究区各气象站点的气象数据以及经纬
+度信息，将这些值根据ArcGIS中的插值方法得到起沙风天数栅格图。
+
+      受整体气候条件和土壤沙化情况的影响，整体来看，全域发生土
+地沙漠化程度为极脆弱，仅扎鲁特旗和科尔沁区有少部分区域为脆弱
+和一般脆弱。
+
+                    图 4-23 起沙风天数脆弱性分布情况
+      植被覆盖度是影响土地沙化的一个重要因素。一般情况下，生态
+
+                                                                   103
+环境适宜，水热条件好的区域，植被生长茂盛，植被覆盖度高，这些
+植被覆盖度高的地区能有效降低风力和降水对地球表层土壤的侵蚀，
+而且其植物根系也能有效固定住底下的土壤，从而能预防土地沙化。
+
+                  图 4-24 地表植被覆盖脆弱性分布情况
+      土壤质地因子在上一节中已有计算结果，这里不再诉述。
+      根据干燥度指数因子、起沙风天数因子、土壤质地因子、植被覆
+盖度因子等指标各因子结果，根据公式计算得出各栅格单元土地沙化
+脆弱性评价值，分别将通辽市土地沙化脆弱性重要性评估分为一般脆
+弱、脆弱、极脆弱三个等级。
+      结果表明，通辽市土地沙化脆弱性以脆弱区为主，占全市总面积
+
+                                                                   104
+的 95.15%；土地沙化极脆弱区占全市总面积的 4.39%，主要分布在霍
+林郭勒、奈曼旗和库伦旗；土地沙化一般脆弱区占全市总面积的 0.47%，
+主要分布在扎鲁特旗和科左后旗。
+
+              表 4-9 土地沙化脆弱性评估结果 单位：公顷、%
+
+      土地沙化一般脆弱区   土地沙化脆弱区 土地沙化极脆弱区
+
+区域
+
+      面积      比重       面积  比重      面积    比重
+
+科尔沁区 1063.26 0.30 350506.35 99.70  0.00  0.00
+
+霍林郭勒  0.00    0.00 49616.18 84.86 8849.89 15.14
+
+科左后旗 6080.44 0.53 1099682.55 95.63 44183.65 3.84
+
+科左中旗 1147.26 0.12 926087.37 96.75 30009.51 3.13
+
+开鲁县   323.95  0.07 433903.24 99.65 1199.73 0.28
+
+库伦旗   0.00    0.00 418146.43 88.80 52756.32 11.20
+
+奈曼旗   1.06    0.00 698707.27 85.89 114825.30 14.11
+
+扎鲁特旗 18907.72 1.15 1623879.46 98.47 6361.26 0.39
+
+小计    27523.70 0.47 5600528.84 95.15 258185.65 4.39
+
+                  105
+                     图 4-25 土地沙化脆弱性评价等级
+      （3）生态脆弱性评估集成
+      生态环境脆弱性评价实质就是在不考虑人类活动影响的前提下，
+评价具体的生态过程中自然状况下潜在的产生生态环境问题的可能
+性。通过对水土流失和土地沙化等状况分析，得出通辽市全域对生态
+环境脆弱程度的不同等级。取各项结果的最高等级作为通辽市生态环
+境脆弱性等级。
+      结果表明，全域以脆弱性为主，占比 95.15%。在空间上分布上，
+生态环境敏感区域呈块状连续分布，极敏感性区域相对集中，主要位
+于南部四大沙带周边沙化土地区。通辽市为科尔沁沙地主体区域，属
+于典型生态脆弱带，是中国实施退耕还林（草）工程的重点区域之一。
+
+                                                                   106
+近年来，通辽大力实施退耕还林还草工程建设,取得初步成效，通过
+调整土地利用结构和景观格局来遏制重点地区的土地沙化、荒漠化问
+题，生态环境质量不断提升。
+
+            表 4-10 生态环境脆弱性性评估结果 单位：公顷、%
+
+      生态环境一般脆弱区   生态环境脆弱区  生态环境极脆弱区
+
+区域
+
+      面积      比重  面积   比重  面积           比重
+
+科尔沁区 1063.26 0.30 350506.35 99.70 0.00  0.00
+
+霍林郭勒  0.00    0.00 49616.18 84.86 8849.89 15.14
+
+科左后旗 6080.44 0.53 1099682.55 95.63 44183.65 3.84
+
+科左中旗 1147.26 0.12 926087.37 96.75 30009.51 3.13
+
+开鲁县   323.95  0.07 433903.24 99.65 1199.73 0.28
+
+库伦旗   0.00    0.00 418146.43 88.80 52756.32 11.20
+
+奈曼旗   1.06    0.00 698707.27 85.89 114825.30 14.11
+
+扎鲁特旗 18907.72 1.15 1623879.46 98.47 6361.26 0.39
+
+小计    27523.70 0.47 5600528.84 95.15 258185.65 4.39
+
+                  107
+                     图 4-26 生态环境脆弱性评价等级
+      3.生态保护重要性评估结果
+      生态保护重要性是表征区域生态系统结构和功能重要性程度的
+综合指标。涵盖生态脆弱性和生态服务功能两部分评估生态保护功能
+重要性。取生态系统服务功能重要性和生态脆弱性评价结果的较高等
+级，作为生态保护重要性等级的初判结果。生态系统服务功能极重要
+区和生态极脆弱区加总确定为生态保护极重要区，其余重要区和脆弱
+区加总确定为生态保护重要区。
+      生态保护极重要区占市域面积约1/2，面积2917104.31公顷，占全
+
+                                                                   108
+市总面积的49.56%。总体呈现出团块状连续分布，主要集中在扎鲁特
+
+旗鲁北以北，罕山自然保护区、霍林郭勒市山地草原和矿区以及南部
+
+四大沙带周边。生态保护重要性重要区域主要集中在中部平原以及南
+
+部浅山丘陵区，面积2969133.88公顷。          单位公顷、%
+            表 4-11 生态保护重要性评估结果
+
+  区域  生态保护重要区                   生态保护极重要区
+
+科尔沁区  面积          比重            面积          比重
+霍林郭勒
+科左后旗  283066.52   80.52         68503.09    19.48
+科左中旗
+ 开鲁县  25017.06    42.79         33449.01    57.21
+ 库伦旗
+ 奈曼旗  786937.53   68.43         363009.11   31.57
+扎鲁特旗
+      483106.55   50.47         474137.59   49.53
+  小计
+      393767.06   90.43         41659.86    9.57
+
+      82198.95    17.46         388703.80   82.54
+
+      404525.99   49.72         409007.64   50.28
+
+      510514.21   30.96         1138634.22  69.04
+
+      2969133.88  50.44         2917104.31  49.56
+
+                  109
+                      图 4-27 生态保护功能重要性评价
+    （二）农业生产适宜性与承载规模
+
+      1.农业生产适宜性单项评价
+      （1）土地资源评价
+      农业生产适宜性中土地资源评价包括两个方面，一是地形坡度评
+价，二是土壤粉砂含量评价。评价时扣除河流、湖泊及水库水面区域。
+      ①地形坡度评价
+     利用全域 DEM 数据计算地形坡度，按≤2°、2~6°、6~15°、
+15~25°、>25°划分为高（平地）、较高（平坡地）、中等（缓坡地）、
+较低（缓陡坡地）、低（陡坡地）5 个等级，生成坡度分级图。
+
+                                                                   110
+      结果表明，全域地形坡度较为平缓，小于 6°的面积占比达到
+65.23%，而地形坡度大于 15°的面积占比只有 4.76%，主要分布在扎
+鲁特旗。全市地形坡度情况整体有利于农业生产。
+
+                              图 4-28 农业坡度分级图
+
+                                                                   111
+                        表 4-12 农业坡度分级表            单位：公顷、%
+
+           ≤2°              2~6°           6~15°  15~25°                           >25°
+
+   区域  面积         比重    面积        比重       面积 比重 面积 比重 面积                                比重
+
+科尔沁区   53128.93   15.14 202887.23 57.84 91719.66 26.14 2978.68 0.85 118.43               0.03
+霍林郭勒
+科左后旗   4601.18    7.98  23908.28 41.44 25069.23 43.46 3719.81 6.45 383.88                0.67
+科左中旗
+ 开鲁县   189669.79  16.64 701721.93 61.54 242843.55 21.30 5710.35 0.50 174.09              0.02
+ 库伦旗
+ 奈曼旗   156125.07  16.36 571648.95 59.92 218993.23 22.95 6854.13 0.72 468.44              0.05
+扎鲁特旗
+       55954.95   12.85 239982.11 55.11 132053.27 30.33 6911.62 1.59 519.65              0.12
+   小计
+       48556.63   10.37 233576.52 49.89 172252.75 36.80 12677.78 2.71 1077.73            0.23
+
+       118699.37  14.67 458150.32 56.60 216834.28 26.80 13968.19 1.73 1589.17            0.20
+
+       134234.81  8.18 626307.49 38.20 657385.57 40.10 181311.27 11.06 40309.23          2.46
+
+       760970.73  13.00 3058182.83 52.23 1757151.54 30.01 234131.83 4.00 44640.62        0.76
+
+                                      112
+      ②土壤粉砂含量评价
+      农业生产适宜性评价与土壤质地密切相关，根据土壤粉砂含量数
+据，按照土壤粉砂含量≤60%、60%≤粉砂含量＜80%、粉砂含量≥80%
+划分为三个等级。
+      科尔沁沙地在通辽市内面积 4085 万亩，占全市总面积的 46%，
+主要分布在西辽河的两岸，因此造成通辽市南部地区土壤沙化现象显
+著。根据通辽市土壤粉砂含量矢量数据对全市土壤粉砂含量进行分级，
+结果显示，全市土壤粉砂含量≤60%的区域面积占比为 67.77%，主要
+分布在市域中部和北部；粉砂含量＞60%的区域面积占比达 32.23%，
+主要分布在市域南部的科左后旗、库伦旗和奈曼旗。
+
+             表 4-13 农业土壤粉砂含量分级表 单位：公顷、%
+
+      粉砂含量≤60% 60%≤粉砂含量＜80% 粉砂含量≥80%
+
+区域
+
+      面积 比重 面积  比重                     面积 比重
+
+科尔沁区  298539.29 85.09 52299.83 14.91   0  0
+
+霍林郭勒  27643.07 47.92 30037.71 52.08    0  0
+
+科左后旗  361546.82 31.71 778468.98 68.29  0  0
+
+科左中旗  680699.87 71.35 246593.18 25.85 26796.67 2.81
+
+开鲁县   406101.21 93.27 29322.90 6.73    0  0
+
+库伦旗   247468.74 52.89 220439.11 47.11  0  0
+
+奈曼旗   474021.36 58.58 335131.37 41.42  0  0
+
+扎鲁特旗 1470635.56 89.77 163028.03 9.95 4597.14 0.28
+
+小计    3966655.92 67.77 1855321.11 31.70 31393.80 0.54
+
+      113
+                        图 4-29 农业土壤粉砂含量分级图
+      ③土地资源评价
+      以坡度分级结果为基础，结合土壤质地，将农业生产土地资源划
+分为高、较高、中等、较低、低 5 个等级。土壤粉砂含量≥80%的区
+域，土地资源直接取最低等；60%≤粉砂含量＜80%的区域，将坡度分
+级降 1 级作为土地资源等级。计算得出农业土地资源分级情况，总体
+来看，通辽市农业土地资源评价较好，评价等级高和较高的面积占全
+市总面积的 48.98%，主要分布在市域中部偏北区域；评价等级中等
+的面积占全市总面积的 40.66%，主要分布在市域南部的科尔沁沙地
+腹地；评价等级较低和低的面积占全市总面积的 10.37%，主要分布
+在西北部山区。
+
+                                                                   114
+                      表 4-14 农业土地资源分级表         单位：公顷、%
+
+           高              较高               中等          较低                低
+
+   区域  面积       比重    面积      比重       面积      比重  面积          比重    面积     比重
+
+科尔沁区   50825.67 14.49 189372.58 53.98 100703.04 28.70 9789.83  2.79  141.82 0.04
+霍林郭勒
+科左后旗   2980.54  5.17  15850.82 27.48 22032.65 38.20 14260.19 24.72 2558.18 4.43
+科左中旗
+ 开鲁县   65723.42 5.76 374355.72 32.83 569573.74 49.96 128401.27 11.26 2065.55 0.18
+ 库伦旗
+ 奈曼旗   122398.33 12.83 469813.89 49.24 292285.27 30.63 41788.44 4.38 27803.88 2.91
+扎鲁特旗
+       58518.87 13.44 240945.15 55.34 127169.36 29.21 8440.65  1.94  347.56 0.08
+   小计
+       20502.20 4.38 144284.63 30.82 245774.25 52.50 56345.98 12.04 1234.36 0.26
+
+       63573.21 7.86 333521.20 41.21 357745.62 44.21 52772.19 6.52 1629.11 0.20
+
+       126607.02 7.72 588478.12 35.89 665139.09 40.57 213209.78 13.00 46114.35 2.81
+
+       511129.26 8.73 2356622.11 40.25 2380423.03 40.66 525008.33 8.97 81894.81 1.40
+
+                                  115
+                           图 4-30 农业土地资源分级图
+      （2）水资源评价
+      基于区域内及邻近地区气象站点长时间序列降水观测资料，通过
+空间插值得到多年平均降水量分布图层，降水量按照≥1200mm、
+800~1200mm、400~800mm、200~400mm、<200mm 分为好（很湿润）、
+较好（湿润）、一般（半湿润）、较差（半干旱）、差（干旱）5 个等级。
+根据通辽市气象站点的多年平均降雨量数据计算显示，通辽市整体处
+于半干旱地区，仅有市域南部部分区域降雨量稍高，处于半湿润区域。
+
+                                                                   116
+             表 4-15 农业水资源分级表            单位：公顷、%
+
+       好（很湿润） 较好（湿润）  一般（半湿润）           较差（半干旱）            差（干旱）
+
+   区域  面积 比重 面积 比重    面积         比重     面积          比重     面积 比重
+
+科尔沁区   0  0  0  0     0          0      351569.61   100    0  0
+霍林郭勒
+科左后旗   0  0  0  0     0          0      58466.07    100    0  0
+科左中旗
+ 开鲁县   0  0  0  0     0          0      1149946.64  100    0  0
+ 库伦旗
+ 奈曼旗   0  0  0  0     0          0      957244.14   100    0  0
+扎鲁特旗
+       0  0  0  0     0          0      435426.92   100    0  0
+   小计
+       0  0  0  0     199874.65  42.44  271028.10   57.56  0  0
+
+       0  0  0  0     135294.21  16.63  678239.42   83.37  0  0
+
+       0  0  0  0     0          0      1649148.43  100    0  0
+
+       0  0  0  0     335168.86  5.69   5551069.33  94.31  0  0
+
+                         117
+                             图 4-31 农业水资源分级图
+      （3）气候评价
+      通过≥0℃活动积温等指标反映区域光热条件。基于区域内及邻
+近地区气象站点长时间序列气温观测资料，统计各气象台站≥0℃活
+动积温，进行空间插值，并结合海拔校正后（以海拔高度每上升 100m
+气温降低 0.6℃的温度递减率为依据）得到活动积温图层，按≥7600°、
+5800~7600°、4000~5800°、1500~4000°、<1500°、划分为好（一年三
+熟有余）、较好（一年三熟）、一般（一年两熟或两年三熟）、较差（一
+年一熟）、差（一年一熟不足）5 级。结果显示，通辽市光热条件整体
+处于较差等级，农作物一年一熟；市域西北部山区稳光热条件为差，
+农作物一年一熟不足，不适合农作物的种植。
+
+                                                                   118
+                 表 4-16 光热条件分级表         单位：公顷、%
+
+      好（一年三熟有    较好（一年三熟）  一般（一年两熟或两    较差（一年一熟）          差（一年一熟不足）
+             余）                   年三熟）
+  区域
+      面积 比重 面积 比重          面积    比重     面积         比重     面积        比重
+科尔沁区
+霍林郭勒  0  0       0  0      5.07  0.001  351564.54 99.999  0         0
+科左后旗
+科左中旗  0  0       0  0      0     0      0          0      58466.07  100
+ 开鲁县
+ 库伦旗  0  0       0  0      0     0      1149946.64 100    0         0
+ 奈曼旗
+扎鲁特旗  0  0       0  0      0     0      957244.14  100    0         0
+
+  小计  0  0       0  0      2.19  0.001  435424.73 99.999  0         0
+
+      0  0       0  0      0     0      470902.75  100    0         0
+
+      0  0       0  0      0     0      813533.63  100    0         0
+
+      0  0       0  0      0     0      1363336.63 82.67 285811.80 17.33
+
+      0  0       0  0      7.26  0      5541953.06 94.15 344277.87 5.85
+
+                           119
+                              图 4-32 光热条件分级图
+      （4）环境评价
+      整理区域内及周边地区土壤污染状况详细调查等成果，进行各
+点位主要污染物含量分析，通过空间插值得到土壤污染物含量分布
+图层，依据《土壤环境质量农用地土壤污染风险管控标准（试行）》
+（GB 15618-2018），当土壤中污染物含量低于或等于风险筛选值、
+大于风险筛选值但小于等于风险管制值、大于风险管制值时，将土
+壤环境容量相应划分为高、中、低 3 个等级，生成土壤环境容量分
+级图。
+      鉴于尚无土壤污染物相关资料及数据，该部分内容待数据收集后
+进行补充完善。
+
+                                                                   120
+      （5）灾害评价
+      选择对当地农业生产有重要影响的气象灾种，包括干旱、雨涝、
+高温热害、低温冷害、大风灾害等。
+      收集整理各类气候要素和气象灾害历史资料，根据单项气象灾害
+指标每年发生情况，统计发生频率，然后进行危险性分级，一般按照
+气象灾害的发生频率≤20%、20～40%、40～60%、60～80%、＞80%,
+将气象灾害危险性划分为低、较低、中等、较高和高 5 级。结果显示，
+通辽市农业气象灾害发生较少，整体处于低和较低的等级。
+
+                           图 4-33 农业气象灾害分级图
+
+                                                                   121
+                       表 4-17 农业气象灾害分级表                单位：公顷、%
+
+                    低                   较低                中等        较高        高
+           面积
+   区域  331789.03       比重     面积               比重      面积 比重 面积 比重 面积 比重
+
+科尔沁区         0         94.37  19780.58         5.63    0      0  0      0  0     0
+霍林郭勒   361174.39
+科左后旗   498999.10       0      58466.07         100.00  0      0  0      0  0     0
+科左中旗   306413.20
+ 开鲁县   370156.13       31.41  788772.25        68.59   0      0  0      0  0     0
+ 库伦旗   546718.55
+ 奈曼旗   683357.54       52.13  458245.04        47.87   0      0  0      0  0     0
+扎鲁特旗   3098607.94
+                       70.37  129013.72        29.63   0      0  0      0  0     0
+   小计
+                       78.61  100746.62        21.39   0      0  0      0  0     0
+
+                       67.20  266815.08        32.80   0      0  0      0  0     0
+
+                       41.44  965790.89        58.56   0      0  0      0  0     0
+
+                       52.64  2787630.25       47.36   0      0  0      0  0     0
+
+                                          122
+      （6）生态评价
+      土壤盐渍化脆弱性评价方法参见《生态保护红线划定指南》，将
+最终的脆弱性值分为 5 级，高（>7.0），较高（6.1~7.0），中等（5.1~6.0），
+较低（3.1~5.0）和低（1.0~3.0）。结果显示，通辽市土壤盐渍化脆弱
+度整体等级为低，较低和中等等级有少量分布。
+
+                        图 4-34 土壤盐渍化脆弱性分级图
+      2.农业生产适宜性集成评价
+      在生态保护极重要区以外的区域，开展种植业、畜牧业等农业生
+产适宜性评价，识别农业生产适宜区和不适宜区。
+
+                                                                   123
+（1）种植业生产适宜性
+
+以水、土、光热组合条件为基础，结合土壤环境质量、气象灾害
+
+等因素，评价种植业生产适宜程度。
+
+      表 4-18 农业生产的水土资源基础判别矩阵
+
+水资源            土地资源   高                                                 较高  中等  较低 低
+
+       好              好                                                  好  较好  一般 差
+      较好              好                                                  好  较好
+      一般              好                                                 较好  一般  较差 差
+      较差             较好                                                 一般  较差
+       差              差                                                  差   差  较差 差
+
+                                                                                差  差
+
+                                                                                差  差
+
+          表 4-19 农业生产条件等级
+
+      水土资源基础         好                                                  较好  一般  较差 差
+
+光热条件
+
+      好              高                                                  高   较高  一般 低
+
+      较好             高                                                  较高  较高  较低 低
+
+      一般             高                                                  较高  一般  较低 低
+
+      较差             较高 一般 较低                                                   低  低
+
+      差              低                                                  低   低   低  低
+
+对于土壤环境容量评价结果为最低值的，将初步评价结果调整为
+
+低等级，土壤环境容量评价结果为中等级的，将初步评价结果下降一
+
+个级别；对于盐渍化脆弱性高的区域，将初步评价结果下降一个级别；
+
+对于气象灾害风险性高的区域，将初步评价结果为高的调整为较高等
+
+级。通辽市暂无土壤环境数据，也无盐渍化脆弱性和气象灾害风险性
+
+高的区域，故通辽市种植业生产适宜性结果无需修正。
+
+评价结果显示，通辽市种植业生产适宜区面积 2402.69 万亩，占
+
+总面积的 27.21%；不适宜区（包括生态保护极重要区和水系）面积
+
+6426.66 万亩，占总面积的 72.79%。种植业生产适宜区主要分布在市
+
+域中部，包括科尔沁区、开鲁县、科尔沁左翼中旗、奈曼旗北部、科
+
+尔沁左翼后旗和扎鲁特旗部分区域，霍林郭勒市和库伦旗不适宜种植
+
+业生产。
+
+                                                                   124
+表 4-20 通辽市种植业生产适宜性评价等级表 单位：万亩、%
+
+   区域           适宜                           不适宜
+
+科尔沁区   面积           比重      面积                    比重
+霍林郭勒
+科左后旗   305.33       57.90%  222.03                42.10%
+科左中旗
+ 开鲁县   0.00         0.00%   87.70            100.00%
+ 库伦旗
+ 奈曼旗   467.43       27.10%  1257.49               72.90%
+扎鲁特旗
+       478.99       33.36%  956.88                66.64%
+   小计
+       406.50       62.24%  246.64                37.76%
+
+       38.36        5.43%   667.99                94.57%
+
+       340.51       27.90%  879.79                72.10%
+
+       365.57       14.78%  2108.15               85.22%
+
+       2402.69      27.21%  6426.66               72.79%
+
+       图 4-35 种植业生产适宜性等级图
+
+                                        125
+      （2）畜牧业生产适宜性
+      畜牧业分为放牧为主的牧区畜牧业和舍饲为主的农区畜牧业。年
+降水量 400mm 等值线或 10℃以上积温 3200℃等值线是牧区和农区
+的分界线。根据当地自然地理条件，确定其畜牧业类型并开展适宜性
+评价。
+
+                           图 4-36 畜牧业分区图
+      牧区畜牧业主要分布在干旱、半干旱地区，受自然条件约束大。
+一般地，草原饲草生产能力越高（优质草原），雪灾、风灾等气象灾
+害风险越低，地势越平坦和相对集中连片，越适宜牧区畜牧业生产。
+      农区畜牧业主要分布在湿润、半湿润地区，受自然条件约束相对
+较小，主要制约因素是饲养供给能力、环境容量等。一般地，可将农
+
+                                                                   126
+区内种植业生产适宜区全部确定为畜牧业适宜区。
+      ①大风灾害
+      某日出现瞬时风速达到或超过 17.0m/s 为大风日，瞬时风速达到
+
+或超过 24.5m/s 为狂风日。当一年中出现 30 天大风日或一个狂风日
+为一个风灾年。
+
+      根据通辽各气象站点风灾每年发生情况，统计发生频率，按照发
+生频率≤20%、20～40%、40～60%、60～80%、＞80%，将大风灾害
+危险性划分为低、较低、中等、较高和高 5 级。结果显示，通辽市大
+风灾害风险大部分处于中等以下的等级，只有 8.64%的面积处于较高
+和高风险等级，全部分布在扎鲁特旗。
+
+                           图 4-37 大风灾害分级图
+
+                                                                   127
+                        表 4-21 大风灾害分级表             单位：公顷、%
+
+             低                较低                   中等              较高        高
+
+   区域  面积       比重      面积        比重         面积        比重    面积        比重    面积 比重
+
+科尔沁区   325209.47 92.50  26360.14  7.50       0.00      0.00  0.00      0.00  0.00 0.00
+霍林郭勒
+科左后旗   0.00     0.00    0.00      0.00 58466.07 100.00       0.00      0.00  0.00 0.00
+科左中旗
+ 开鲁县   329125.02 28.62 820821.62 71.38       0.00      0.00  0.00      0.00  0.00 0.00
+ 库伦旗
+ 奈曼旗   467980.44 48.89 279706.29 29.22 209557.41 21.89       0.00      0.00  0.00 0.00
+扎鲁特旗
+       235740.87 54.14 199686.05 45.86       0.00      0.00  0.00      0.00  0.00 0.00
+   小计
+       399686.73 84.88  66676.65 14.16 4539.37         0.96  0.00      0.00  0.00 0.00
+
+       527247.86 64.81 227894.21 28.01 58391.56 7.18         0.00      0.00  0.00 0.00
+
+       649552.03 39.39 195837.22 11.88 295555.00 17.92 413139.40 25.05 95064.79 5.76
+
+       2934542.41 49.85 1816982.18 30.87 626509.41 10.64 413139.40 7.02 95064.79 1.62
+
+                                        128
+      ②雪灾
+      根据相关文献定义内蒙古分地区任意一个气象测点的实测气温
+稳定持续在 0℃以下的月份内每 24h 降水量≥8mm 的降水过程为雪灾。
+根据通辽各气象站点雪灾每年发生情况，统计发生频率，按照发生频
+率≤20%、20～40%、40～60%、60～80%、＞80%，将雪灾危险性划分为
+低、较低、中等、较高和高 5 级。结果显示，通辽市大雪灾害风险大
+部分处于低和较低的等级，只有 3.16%的面积处于中等等级，全部分
+布在库伦旗和奈曼旗。
+
+                              图 4-38 雪灾分级图
+
+                                                                   129
+                           表 4-22 雪灾分级表          单位：公顷、%
+
+              低                  较低              中等               较高  高
+
+    区域  面积       比重        面积        比重    面积        比重     面积        比重 面积 比重
+
+ 科尔沁区   349476.48 99.40    2093.13   0.60  0.00      0.00   0.00      0.00 0.00 0.00
+霍林郭勒市
+        58466.07 100.00    0.00      0.00  0.00      0.00   0.00      0.00 0.00 0.00
+ 科左后旗
+ 科左中旗   455228.81 39.59 694717.83 60.41    0.00      0.00   0.00      0.00 0.00 0.00
+   开鲁县
+   库伦旗  957244.14 100.00   0.00      0.00  0.00      0.00   0.00      0.00 0.00 0.00
+   奈曼旗
+ 扎鲁特旗   229934.87 52.81 205492.05 47.19    0.00      0.00   0.00      0.00 0.00 0.00
+
+    合计  0.00     0.00      429575.12 91.22 41327.63  8.78   0.00      0.00 0.00 0.00
+
+        0.00     0.00      668893.06 82.22 144640.57 17.78  0.00      0.00 0.00 0.00
+
+        1649148.43 100.00  0.00      0.00  0.00      0.00   0.00      0.00 0.00 0.00
+
+        3699498.80 62.85 2000771.18 33.99 185968.21 3.16    0.00      0.00 0.00 0.00
+
+                                     130
+      ③集成评价
+      根据单项评价结果，通辽无雪灾高风险区域，故以地形坡度为基
+础，结合风灾等因素，评价牧区畜牧业生产适宜程度。采用全国生态
+状况遥感调查与评估成果中 2019 年植被净初级生产力数据（������������������）
+代替草原饲草生产能力，由图可知牧区 NPP 值最高，故牧区畜牧业评
+价结果无需修正。农区畜牧业直接引用种植业生产适宜性评价结果。
+
+                     图 4-39 植被净初级生产力分布情况
+      评价结果显示，通辽市畜牧业生产适宜区面积 2796.60 万亩，占
+全市总面积的 31.67%；不适宜区（包括生态保护极重要区和水系）面
+积 6032.76 万亩，占全市总面积的 68.33%。畜牧业生产适宜区主要分
+布在科尔沁区、开鲁县、科尔沁左翼中旗、扎鲁特旗南部、霍林郭勒
+
+                                                                   131
+市等区域，从空间上看，分为市域北部牧区畜牧业生产适宜区和市域
+中部农区畜牧业生产适宜区。
+
+                        图 4-40 畜牧业生产适宜性等级图
+
+                                                                   132
+      表 4-23 通辽市畜牧业生产适宜性评价结果汇总表 单位：万亩、%
+
+                       适宜                             不适宜
+
+  区域  农区畜牧业面积  牧区畜牧业面积      总面积      比重      面积            比重
+
+科尔沁区  305.33   0.00         305.33   57.90%  222.03        42.10%
+霍林郭勒
+科左后旗  0.00     43.11        43.11    49.16%  44.59         50.84%
+科左中旗
+ 开鲁县  467.43   0.00         467.43   27.10%  1257.49       72.90%
+ 库伦旗
+ 奈曼旗  478.99   0.00         478.99   33.36%  956.88        66.64%
+扎鲁特旗
+      406.50   0.00         406.50   62.24%  246.64        37.76%
+  小计
+      38.36    0.00         38.36    5.43%   667.99        94.57%
+
+      340.51   0.00         340.51   27.90%  879.79        72.10%
+
+      262.20   454.17       716.37   28.96%  1757.35       71.04%
+
+      2299.32  497.28       2796.60  31.67%  6032.76       68.33%
+
+                       133
+3.农业生产承载规模预测
+（1）耕地承载规模
+从水资源的角度，可承载的耕地规模包括可承载的灌溉耕地面积
+
+和单纯以天然降水为水源的耕地面积（雨养耕地面积）。可承载的灌
+
+溉耕地面积等于一定条件下灌溉可用水量和农田综合灌溉定额的比
+
+值。根据相关文献研究，中国东北地区广义农业水资源量中 61.2%来
+源于耕地有效降水，38.8%来源于耕地灌溉，本研究中雨养耕地面积
+采用占比参数和通辽市实际情况估算，预估雨养耕地面积为灌溉耕地
+
+面积的 1.8 倍。
+      通辽地区中心城区地下水超采严重，自治区积极推进引水工程建
+
+设，部分缓解通辽市特别是科尔沁区水资源短缺的问题，其中引绰济
+
+辽工程（通辽段）向通辽市年供水 2.87 亿立方米，辽西北供水通辽支
+线工程向通辽市年供水 1.08 亿立方米。根据《内蒙古自治区国土空
+间规划（2020-2035 年）征求意见稿》规划指标体系中的水资源平衡
+表，通辽市农业可用水量定为 24.30 亿立方米，本次评价综合自治区
+报告数据、《水资源公报》用水结构数据、水务局 2030 年水资源优化
+配置成果及用水结构变化分析数据，通辽市总供水量增加但用水结构
+
+将从现状的农业供水为主逐渐转变为工业供水为主，确定农田灌溉可
+
+用水量占农业可用水量的 70%，得到通辽市 2035 年农业用水总量可
+以达到 17.01 亿立方米。
+
+   表 4-24 水资源约束下通辽市可承载耕地规模评价结果汇总表
+
+    农业用    亩均耕地         可承载的耕地规模
+     水量    灌溉用水
+区域  (亿立    量(立方米   合计(万   其中：灌   其中：雨   现状耕
+    方米)               亩)  溉耕地面   养耕地面   地面积
+              /亩)         积(万亩)  积(万亩)  (万亩)
+
+科尔沁区 2.84  208     382.69 136.67 246.01 363.16
+
+                   134
+       农业用    亩均耕地             可承载的耕地规模
+        水量    灌溉用水
+区域     (亿立    量(立方米   合计(万     其中：灌     其中：雨   现状耕
+       方米)               亩)    溉耕地面     养耕地面   地面积
+                 /亩)           积(万亩)    积(万亩)  (万亩)
+
+霍林郭勒 0.00             0.00     0.00      0.00  4.10
+
+科左后旗 1.97             265.85 94.95       170.90 686.24
+
+科左中旗 3.48             468.82 167.44 301.38 673.05
+
+开鲁县    3.44           463.52 165.54 297.98 433.51
+
+库伦旗    0.34           45.61    16.29     29.32 266.21
+
+奈曼旗    3.15           424.63 151.65 272.97 473.55
+
+扎鲁特旗 1.77             238.69 85.25       153.45 435.27
+
+合计     17.01          2289.81 817.79 1472.02 3335.09
+
+注：亩均耕地灌溉用水量采用水资源公报中农田灌溉定额，包含用水损耗，故不考虑农田灌
+
+溉水有效利用系数；现状耕地面积采用三调数据。
+
+从空间约束的角度，将生态保护极重要区和种植业生产不适宜区
+
+以外区域的规模，作为空间约束下耕地的最大承载规模。
+
+表 4-25 土地资源约束下通辽市可承载耕地规模评价结果汇总表
+
+   区域         可承载耕地规模                 现状耕地面积
+
+科尔沁区   (平方千米)         (万亩)     (平方千米)          (万亩)
+霍林郭勒
+科左后旗   2035.51        305.33   2421.05         363.16
+科左中旗
+ 开鲁县          0.00    0.00     27.30           4.10
+ 库伦旗
+ 奈曼旗   3116.20        467.43   4574.93         686.24
+扎鲁特旗
+       3193.24        478.99   4487.01         673.05
+   小计
+       2709.99        406.50   2890.05         433.51
+
+       255.76         38.36    1774.71         266.21
+
+       2270.09        340.51   3157.03         473.55
+
+       2437.16        365.57   2901.83         435.27
+
+       16017.95       2402.69  22233.92        3335.09
+
+                      135
+                 图 4-41 空间约束下通辽市可承载耕地分布图
+      本次评价从土地资源约束和水资源约束判别通辽市可承载耕地
+的规模，按照短板原理，取上述约束条件下的最小值，作为耕地承载
+的最大合理规模。因此，在耕地资源适宜性和水资源双重约束下，通
+辽市可承载的耕地规模为 2064.06 万亩，为现状 3335.09 万亩的耕地
+面积的 61.89%，按照“三调”普查结果，通辽市耕地超载现象严重。
+      通辽市地下水过度开采，尤其是科尔沁区形成了严重超采区，必
+须开展地下水超采区治理工作，加强取用地下水管理。严禁农业新增
+取用地下水，积极推广农业节水灌溉技术，实施农业节水工程；加快
+推进引绰济辽工程及 LXB 供水通辽支线工程的建设，为沿线通辽市旗
+县提供用水，减缓用水紧张；针对现状耕地超载严重且不适宜种植的
+
+                                                                   136
+地区，如科尔沁左翼后旗、库伦旗和扎鲁特旗等旗县，可有计划的对
+
+农田实施退耕还林还草等工程。
+
+表 4-26 通辽市可承载耕地规模评价结果汇总表 单位：万亩、%
+
+区域    行政区      现状耕     土地资      水资源      可承载      发展空      可承载
+      域总面      地面积     源约束      约束下      耕地规         间     耕地规
+                                                           模占现
+         积                下                 模              状耕地
+                                                            比例
+科尔沁   527.35   363.16  305.33   382.69   305.33   -57.83   84.08%
+   区    87.7    4.09
+      1724.92  686.24      0        0        0     -4.09   0.00%
+霍林郭   1435.87  673.05
+   勒                   467.43   265.85   265.85   -420.39  38.74%
+
+科左后                    478.99   468.82   468.82   -204.23  69.66%
+   旗                    406.5   463.52    406.5   -27.01
+                        38.36    45.61    38.36   -227.85  93.77%
+科左中                    340.51   424.63   340.51   -133.04  14.41%
+   旗                   365.57   238.69   238.69   -196.58  71.91%
+                       2402.69  2289.81  2064.06  -271.03
+开鲁县 653.14 433.51                                          54.84%
+
+库伦旗 706.35 266.21                                          61.89%
+
+奈曼旗 1220.3 473.55
+
+扎鲁特
+   旗 2473.72 435.27
+
+合计 8829.36 3335.09
+
+（2）牲畜承载规模
+
+①牧区畜牧业
+
+针对通辽市牧区畜牧业，通过测算草地资源的可持续饲养生产能
+
+力，确定草原合理载畜量（以标准羊计）。通辽市草食畜禽养殖，饲
+
+草料主要包括草牧场饲和秸秆“三化两贮”饲料，本次通辽市草原合
+
+理载畜量的测算，仅以牧草地草产量为饲草料。依据《天然草地合理
+
+载畜量的计算》，计算方法如下：
+
+草地全年合理载畜量：A=F/(I*D)
+
+其中：F 可利用标准干草量，
+
+      I 一个羊单位日食量 1.8kg/（羊单位·日），
+
+      D 放牧天数。
+
+                             137
+根据以上测算方法，假设农区畜牧业也全部发展牧区畜牧业，根
+
+据畜牧业适宜性评价结果，测算通辽市草原合理载畜最大规模为
+
+872.74 万个羊单位。
+
+    表 4-27 通辽市草原合理载畜量汇总表
+
+    畜牧业适宜区       干草产草量                 区域草地全年合理载畜
+                                                    量
+
+                                                   合理
+
+行政    面积         干草单产量     干草总产        1 个羊  单位羊   载畜
+ 区  （hm²）        （kg/hm²）  量（吨）        单位日   出栏消    量
+                                        食量   耗干草   （万
+                                       （kg）        个羊
+                                                量   单
+                                             （kg）
+
+                                                   位）
+
+科尔  203551.3134            154359.07               95.28
+沁区
+
+霍林  28742.70047            21796.45                13.45
+郭勒
+
+科左  311620.2702            236311.00               145.87
+后旗
+
+科左  319323.7065            242152.75               149.48
+中旗
+
+开鲁  270999.4054  758.33 205506.98 1.8        162 126.86
+ 县
+
+库伦  25575.5885             19394.74                11.97
+ 旗
+
+奈曼  227009.2935            172147.96               106.26
+ 旗
+
+扎鲁  477578.5864            362162.17               223.56
+特旗
+
+合计 1864400.864             1413831.11              872.74
+
+注：通辽市干草单产量来源于文献；放牧天数取值 90 天。
+
+②农区畜牧业
+
+针对通辽市农区畜牧业，通过测算农区养殖粪肥养分需求量和供
+
+给量，确定农区合理载畜量（以猪当量计）。本次测算按照磷养分需
+
+求量，计算相应的畜禽合理承载规模。依据《畜禽粪污土地承载力测
+
+算技术指南》，计算方法如下：
+
+区域植物养分需求量=∑（每种植物总产量*单位产量养分需求），
+
+                                                          138
+本次测算农作物总产量取近五年粮食产量平均值，粮食作物主要为玉
+
+米，故取玉米形成 100kg 产量的磷养分需求量 0.3kg 作为单位产量养
+
+分需求。
+
+植物粪肥养分需求量=区域植物养分需求量*施肥供给养分占比*
+
+粪肥占施肥比例/粪肥当季利用率。依据《畜禽粪污土地承载力测算
+
+技术指南》施肥供给养分占比为 55%，粪肥当季利用率取值 30%。合
+
+理的施肥策略，有机肥与化肥的施用比例为 1：1，本次测算粪肥占施
+
+肥比例取值 50%。
+
+畜禽合理承载规模=植物粪肥养分需求量/单位猪当量粪肥养分
+
+供给量。单位猪当量氮养分供给量为 7.0kg，磷养分供给量为 1.2kg。
+
+根据以上测算方法，得出通辽市农区合理载畜量汇总表，测算通
+
+辽市农区合理载畜规模为 1657.47 万个猪单位。
+
+      表 4-28 通辽市农区合理载畜量汇总表
+
+                        植物粪肥磷养分需求       畜禽合
+                                        理承载
+行政区   农作物产   区域植   磷施   粪肥    当季  植物粪    规模
+       量（万   物养分   肥供   占施    利用  肥养分   （万单
+         吨）  需求量   给养   肥比        需求量   位猪）
+                   分占          率
+                         例
+                    比
+
+科尔沁区 120.25 0.36                  0.33 275.56
+
+霍林郭勒 1.36    0.00                 0.00  3.12
+
+科左后旗 108.46 0.33                  0.30 248.54
+
+科左中旗 185.82 0.56                  0.51 425.85
+
+开鲁县 112.09 0.34 55% 50% 30% 0.31 256.88
+
+库伦旗   53.06  0.16                 0.15 121.60
+
+奈曼旗   87.20  0.26                 0.24 199.84
+
+扎鲁特旗 55.01   0.17                 0.15 126.07
+
+合计    723.26 2.17                 1.99 1657.47
+
+注：据农业部农技推广中心的数据称，有机肥在肥料总投入量中的比例由 1949 年的 99.9%
+
+下降至 2017 年的不足 20%，并持续下降。通过提高作物秸秆与畜禽粪便资源的利用率，有
+
+机肥与化肥形成 1：1 的施用比例，实现合理的施肥策略。
+
+                   139
+    （三）城镇建设适宜性与承载规模
+      1.城镇适宜性单项评价
+      （1）土地资源评价
+      城镇建设适宜性中土地资源评价包括三个方面，一是地形坡度评
+
+价，二是高程评价，三是地形起伏度评价。评价时需扣除河流、湖泊
+及水库水面区域。
+
+      ①地形坡度评价
+      利 用全 域 DEM 计算 地形坡 度，按≤ 3 °、3~8°、 8~15 °、
+15~25°、>25°生成坡度分级图，将城镇建设土地资源划分为高、较
+高、中等、较低、低 5 级。
+      结果表明，全域地形坡度较为平缓，小于 8°的面积占比达到
+79.31%，而地形坡度大于 15°的面积占比只有 4.76%，主要分布在扎
+鲁特旗。全市地形坡度情况整体有利于城镇建设。
+
+                                                                   140
+图 4-42 坡度等级图
+
+                   141
+                        表 4-29 地形坡度分级表                    单位：公顷、%
+
+      ≤3°                   3~8°                   8~15°           15~25°          >25°
+
+  区域  面积         比重     面积         比重          面积         比重       面积        比重    面积      比重
+
+科尔沁区  108167.96  30.83  197395.85  56.26       42172.01   12.02    2978.68   0.85  118.43  0.03
+霍林郭勒
+科左后旗  9685.20    16.79  28912.56   50.12       14980.93   25.97    3719.81   6.45  383.88  0.67
+科左中旗
+ 开鲁县  388667.78  34.09  644999.37  56.57       100568.12  8.82     5710.35   0.50  174.09  0.02
+ 库伦旗
+ 奈曼旗  317443.09  33.27  534315.56  56.00       95008.60   9.96     6854.13   0.72  468.44  0.05
+扎鲁特旗
+      115999.61  26.64  247211.97  56.78       64778.75   14.88    6911.62   1.59  519.65  0.12
+  合计
+      101480.45  21.68  260831.62  55.72       92073.83   19.67    12677.78  2.71  1077.73 0.23
+
+      243985.45  30.15  444238.19  54.90       105460.33  13.03    13968.19  1.73  1589.17 0.20
+
+      278795.43  17.00  721303.49  43.99       417828.95  25.48  181311.27 11.06 40309.23 2.46
+
+      1564224.97 26.72 3079208.61  52.59       932871.52  15.93  234131.83   4.00 44640.62 0.76
+
+                                          142
+②高程评价
+
+对于高程≥5000m 的区域，土地资源等级直接取最低等；高程在
+
+3500~5000m 之间的，将坡度分级降 1 级作为土地资源等级。通辽市
+
+全域高程在 2000m 以下，坡度分级不需要降低。
+
+③地形起伏度评价
+
+计算地形起伏度。邻域范围通常采用 20 公顷左右（如 50m×50m
+
+栅格建议采用 9×9 邻域，30m×30m 栅格建议采用 15×15 邻域）。经
+
+计算，通辽市地形起伏度在 0-259m 之间，对于地形起伏度>200m 的
+
+区域，将初步评价结果降 2 级，地形起伏度在 100~200m 之间的，将
+
+初步评价结果降 1 级作为城镇土地资源等级。
+
+结果表明，通辽市地形起伏度总体小于 100 米，占全市总面积的
+
+98.87%；西北部山区有部分地区地形起伏度为 100-200 米。
+
+表 4-30 地形起伏度分级表              单位：公顷、%
+
+   区域      >200m      100~200m     ＜100m
+       面积 比重        面积 比重
+科尔沁区                               面积     比重
+霍林郭勒
+科左后旗   0  0         38.21 0.01     350800.89 99.99
+科左中旗
+ 开鲁县   0  0         249.71 0.43    57432.51 99.57
+ 库伦旗
+ 奈曼旗   0  0         0.00  0        1140016.11 100
+扎鲁特旗
+       0  0         6.69 0.001     954083.13 99.999
+   合计
+       0  0         85.65 0.02     435338.46 99.98
+
+       0  0         622.41 0.13    467286.40 99.87
+
+       0  0         1347.26 0.17   807808.50 99.83
+
+       61.48 0.004  63630.37 3.88  1574577.95 96.11
+
+       61.48 0.001  65980.30 1.13  5787343.95 98.87
+
+                    143
+                          图 4-43 地形起伏度等级图
+      ④土地资源评价
+      对城镇建设土地资源等级进行初判，将高程≥5000m 的区域，土
+地资源等级直接取最低等；高程在 3500-5000m 之间的，将坡度等级
+降一级作为土地资源等级。通辽市的高程均在 2000m 以下，故土地资
+源等级与高程等级一致。
+      经过对城镇建设土地资源等级修正，将地形起伏度＞200m 的区
+域，将初步评价结果降 2 级；地形起伏度在 100-200m 之间的，将初
+步评价结果降 1 级作为城镇土地资源等级。得到城镇建设土地资源等
+级图。结果显示，通辽市城镇土地资源评价以较高和高两个等级为主，
+占全市总面积的 76.75%，主要分布在市域中部和南部区域；城镇土地
+
+                                                                   144
+资源中等级面积占全市总面积的 17.69%，主要分布在扎鲁特旗中北
+部、库伦旗和奈曼旗南部等；城镇土地资源评价等级较低和低两个等
+级面积较小，占全市总面积的 5.56%，主要分布在扎鲁特旗北部山区。
+
+              图 4-44 城镇建设适宜性土地资源评价等级图
+
+                                                                   145
+                          表 4-31 城镇建设土地资源等级表                 单位：公顷、%
+
+                 低            较低              中等                 较高                    高
+                                                                                面积
+   区域  面积           比重    面积       比重     面积          比重     面积          比重                 比重
+
+科尔沁区   162.27       0.05  4503.07  1.28   50307.56    14.34  200006.65   57.01  95859.55    27.32
+霍林郭勒
+科左后旗   584.41       1.01  4238.29  7.35   16033.94    27.80  28141.09    48.79  8684.49     15.06
+科左中旗
+ 开鲁县   229.87       0.02  8203.75  0.72   122324.96   10.73  664178.17   58.26  345079.36   30.27
+ 库伦旗
+ 奈曼旗   621.54       0.07  9633.60  1.01   114645.55   12.02  547367.83   57.37  281821.30   29.54
+扎鲁特旗
+       740.07       0.17  9648.69  2.22   75859.19    17.42  247239.67   56.78  101936.49   23.41
+   合计
+       1458.93      0.31  16291.68 3.48   103250.39   22.07  256992.20   54.92  89915.61    19.22
+
+       2474.74      0.31  17690.63 2.19   122667.78   15.16  450981.81   55.74  215340.80   26.61
+
+       73723.68     4.50 175170.47 10.69  430299.65   26.27  709848.45   43.33  249227.55   15.21
+
+       79995.51     1.37 245380.18 4.19   1035389.02  17.69  3104755.87  53.04  1387865.15  23.71
+
+                                          146
+（2）水资源评价
+
+通辽市以县级行政区为评价单元进行水资源总量评价，按照水资
+
+源总量模数≥50 万 m3/km2、20~50 万 m3/km2、10~20 万 m3/km2、5~10 万
+
+m3/km2、<5 万 m3/km2 划分为好、较好、一般、较差、差 5 个等级。
+
+基于水资源总量模数分析，通辽市多年平均水资源总量 37.47 亿
+
+立方米，主要以地下水为主，水资源总体紧张。从水资源总量模数判
+
+断，扎鲁特旗城镇用水条件较差；通辽市其他地区城镇用水条件为差。
+
+表 4-32 通辽市各县级行政区水资源总量模数分析
+
+ 行政区  行政区面积     水资源总量      产水模数（万      等级条件
+       （km2）                 m3/km2）
+科尔沁区      3212     25899         8.06     较差
+科左中旗      9811     60801          6.2     较差
+科左后旗     11476     58552          5.1     较差
+ 开鲁县      4488     35937         8.01     较差
+ 库伦旗      4650     40212         8.65     较差
+ 奈曼旗      8120     67534         8.32     较差
+扎鲁特旗     17193     82654         4.81      差
+霍林郭勒       585      3190         5.45     较差
+         59535     374688        6.29     较差
+  小计
+
+                147
+                图 4-45 城镇建设适宜性水资源评价等级图
+      （3）气候评价
+      舒适度采用温湿指数表征，计算公式为：
+
+                       THI=T–0.55×(1-f)×(T–58)(D-1)
+      式中：THI 为温湿指数，T 为月均温度(华氏温度)，f 是月均空气
+相对湿度(%)。可根据气象站点数据，分别计算各站点 12 个月多年平
+均的月均温度和月均空气相对湿度；通过空间插值（温度差值需结合
+海拔校正，具体方法与积温差值部分相同）得到格网尺度的月均温度
+和月均空气相对湿度。根据公式 D-1，计算出 12 个月格网尺度的温
+湿指数；温湿指数按照下表，划分舒适度等级，取 12 个月舒适度等
+级的众数作为该区舒适度。
+
+                                                                   148
+表 4-33 舒适度分级标准
+
+分级标准                   舒适度等级
+
+61-65                  7（很舒适）
+
+56~60 或 65~70          6
+
+51~55 或 71~75          5
+
+46~50 或 76~80          4
+
+41~45 或 81~85          3
+
+32~40 或 86~90          2
+
+＜32 或＞90               1（很不舒适）
+
+通辽市夏季多年平均气温为 23.3℃，冬季多年平均气温为-
+
+14.5℃，气候条件整体较为舒适。只有西北部霍林格勒市和扎鲁特旗
+
+山区由于冬季严寒，舒适度等级变为 2 级。
+
+图 4-46 通辽市城镇建设适宜性气候评价等级图
+
+                                               149
+（4）环境评价
+
+城镇建设环境评价包括大气环境容量和水环境容量评价。
+
+大气环境容量采用以下简化方法：统计区域及周边地区气象台站
+
+多年静风日数（日最大风速低于 3m/s 的日数）和多年平均风速，通
+
+过空间插值分别得到 1km×1km 的静风日数和平均风速图层，按静风
+
+日数占比≤5%、5~10%、10~20%、20~30%、>30%生成静风日数分级图，
+
+按平均风速>5m/s、3~5m/s、2~3m/s、1~2m/s、≤1m/s 生成平均风速
+
+分级图。取静风日数、平均风速两项指标中相对较低的结果，将大气
+
+环境容量指数划分为高、较高、一般、较低、低 5 级。结果表明，通
+
+辽市大气环境容量综合等级主要为一般和较高 2 个等级，主要与全市
+
+静风天数较少、大风天较多有关，总体上有利于污染物的扩散。
+
+      表 4-34 通辽市大气环境容量等级划分表
+
+气象站点  静风日数     静风日数     平均风速     静风日数   平均风  大气环境
+霍林郭勒   （天）       占比%    （m/s）    占比等级   速等级  容量综合
+
+         2.44     0.67     3.36      高   较高     等级
+
+                                                较高
+
+巴雅尔吐胡硕 2.00    0.55     3.10     高      较高 较高
+
+扎鲁特   28.44    7.79     2.24     较高 一般 一般
+
+舍伯吐   15.67    4.29     2.95     高      一般 一般
+
+科左中旗  17.89    4.90     2.98     高      一般 一般
+
+青龙山   5.67     1.55     2.95     高      一般 一般
+
+开鲁    11.78    3.23     3.14     高      较高 较高
+
+通辽    20.78    5.69     2.58     较高 一般 一般
+
+奈曼    16.22    4.44     2.89     高      一般 一般
+
+科左后旗  12.44    3.41     3.32     高      较高 较高
+
+库伦    6.44     1.77     3.07     高      较高 较高
+
+注：数据来源于国家气象中心，静风日数、平均风速为 2011-2019 年的多年平均值。
+
+水环境容量计算选择化学需氧量(������������������)、氨氮((������������3-������))作为评
+
+价对象来确定主要污染物，根据现有水功能区水质目标取均值来确定
+
+评价单元年均水质目标浓度（水质标准参照《地表水环境质量标准》
+
+                        150
+(GB3838-2002)执行）。根据数据分布特征，将水环境容量各项评价指
+
+标划分为高、较高、一般、较低、低 5 个等级，取各项评价指标中的
+
+最低值，作为评价单元水环境容量等级划分结果。结果表明，通辽市
+
+水环境容量综合等级为低或较低，主要原因是通辽市地表水资源总量
+
+较少，不利于污染物的扩散。
+
+      表 4-35 通辽市水环境容量等级划分表
+
+      地表水资源量取 2013-2018 年平均值
+
+行政区    环境容量     环境容量      COD 环境容  NH3-N 环境  水环境容量
+          COD      NH3-N    量等级     容量等级      综合等级
+
+      （t/k ㎡）  （t/k ㎡）
+
+科尔沁区  0.000    0.000       低       低         低
+
+霍林郭勒市 1.315    0.061       较低      较低        较低
+
+科左后旗  0.006    0.000       低       低         低
+
+科左中期  0.004    0.000       低       低         低
+
+开鲁县   0.000    0.000       低       低         低
+
+库伦旗   0.507    0.022       低       低         低
+
+奈曼旗   0.312    0.014       低       低         低
+
+扎鲁特旗  0.464    0.021       低       低         低
+
+      地表水资源量取 2013-2018 年最大值
+
+行政区    环境容量     环境容量      COD 环境容  NH3-N 环境  水环境容量
+          COD      NH3-N    量等级     容量等级      综合等级
+
+      （t/k ㎡）  （t/k ㎡）
+
+科尔沁区  0.000    0.000       低       低         低
+
+霍林郭勒市 2.428    0.113       较低      较低        较低
+
+科左后旗  0.026    0.001       低       低         低
+
+科左中期  0.016    0.001       低       低         低
+
+开鲁县   0.000    0.000       低       低         低
+
+库伦旗   0.901    0.039       较低      低         低
+
+奈曼旗   0.495    0.023       低       低         低
+
+扎鲁特旗  0.628    0.029       低       低         低
+
+注：数据来源于通辽市水利局《2013-2018 年水资源公报》。
+
+（5）灾害评价
+
+城镇建设灾害评价主要为地质灾害危险性评价。
+
+                      151
+地质灾害危险性评价以活动断层危险性为基础，结合地震动峰值
+
+加速度确定地震危险性等级。按照活动断层距离划分为低、中、较高、
+
+高、极高 5 级。其中，省级评价活动断层（12 万年以来），市县级评
+
+价全新世（1.17 万年以来）活动断层。
+
+        表 4-36 活动断层或地裂缝安全距离分级表
+
+    等级    稳定     次稳定       次不稳定       不稳定       极不稳定
+距断裂距离   单侧 400  单侧 200-  单侧 200-100  单侧 30-  单侧 30 米以内
+危险性等级    米以外                          100 米
+                  400 米         米                  极高
+            低       中         较高         高
+
+                            图 4-47 地质灾害分区等级图
+      依据《中国地震动参数区划图》（GB18306-2015）和《建筑抗震设
+计规范》（GB50011-2010），确定地震动峰值加速度，分为低、中、较
+
+                                                                   152
+高和高 4 个等级。对于地震动峰值加速度为较高的区域，将活动断层
+危险性提高 1 级；地震动峰值加速度为高的区域，将活动断层危险性
+提高 2 级。
+
+                     表 4-37 地震动峰值加速度分级表
+
+地震设防烈度  6  7  8  9
+
+地震动峰值加速度（g） 0.05g 0.10（0.15）g 0.20（0.30）g 0.40g
+
+             图 4-48 城镇建设适宜性评价地震动峰值等级图
+      崩塌、滑坡、泥石流易发性评价参照《地质灾害调查技术要求
+（1:50000）》，将易发性分为不易发、低、中、高、极高 5 个等级。
+其中，极高易发区为按照《地质灾害危险性评估规范》，确定的崩塌、
+滑坡、泥石流危险性大的区域。
+
+                                                                   153
+地面沉降易发性评价。利用地面沉降累计沉降量或年沉降速率确
+
+定易发性等级，按照就高不就低原则划分等级。
+
+            表 4-38 地面沉降分级表
+
+       等级   不易发    低易发      中易发       高易发      极高易发
+累计沉降量(mm)    <100  100-200  200-800  800-1600    >1600
+沉降速率(mm/a)     <5            10-30                >50
+                     5-10              30-50
+
+                   图 4-49 城镇建设适宜性活动断层分级图
+      地面塌陷易发性评价。充分利用矿山地质环境、城市地质、岩溶
+塌陷等调查监测和评价成果，将地面塌陷易发性划分不易发、低易发、
+中易发、高易发、极高易发 5 个等级。按照《地质灾害危险性评估规
+范》，将地面塌陷危险性大的区域划分为极高易发区。
+
+                                                                   154
+      取活动断层、崩塌、滑坡、泥石流、地面沉降及地面塌陷中的最
+高等级，作为地质灾害危险性等级，划分为低、中、较高、高和极高
+5 个等级。从城镇建设适宜性角度的地质灾害危险性评价结果显示，
+通辽市整体处于低和中等两个等级。
+
+            图 4-50 城镇建设适宜性地质灾害危险性评价等级图
+      （6）区位优势度评价
+      区位条件为交通干线可达性、中心城区可达性、交通枢纽可达
+性三个指标项的加权求和集成。评价各行政单元交通干线可达性和
+中心城区可达性，交通干线以一级公路、二级公路、三级公路与四
+级公路为评价因子；中心城区可达性以通辽各旗县中心城区的几何
+中心为源点，形成等时圈。根据通辽市及周边城市主要的交通枢纽
+
+                                                                   155
+位置，对机场、铁路站点、高速出入口以及公路枢纽可达性进行叠
+加分析，得到通辽市交通枢纽可达性评价。
+
+           图 4-51 城镇建设适宜性交通区位条件评价等级图
+      将公路网作为交通网络密度评价主体，采用线密度分析方法，对
+通辽市交通网络密度进行评价。基于区位条件和交通网络密度评价结
+果，确定区位优势度评价结果，将区位优势度划分为好、较好、一般、
+较差、差 5 个等级。
+
+                                                                   156
+            图 4-52 城镇建设适宜性区位优势度评价等级图
+
+      2.城镇建设适宜性集成评价
+      （1）初判城镇建设条件等级
+      基于土地资源和水资源评价结果，确定城镇建设的水土资源基础，
+作为城镇建设条件等级的初步结果。
+
+               表 4-39 城镇建设的水土资源基础参考判别矩阵
+
+       土地资源   高  较高   中等  较低  低
+水资源          适宜  适宜   较高
+             适宜  适宜   较高  一般适宜 不适宜
+        好                    较低 不适宜
+
+      较好
+
+                 157
+       土地资源  高     较高     中等      较低     低
+水资源
+                                  较低  不适宜
+一般           适宜       较高  一般适宜   不适宜  不适宜
+                      较高  一般适宜   不适宜  不适宜
+较差           较高    一般适宜
+                             较低
+差            一般适宜
+
+                  图 4-53 城镇建设条件评价等级初判图
+      （2）修正城镇建设条件等级
+      对于地质灾害危险性评价结果为极高等级的，将初步评价结果调
+整为低等级；为高等级的，将初步评价结果下降两个级别；为较高等
+级的，将初步评价结果下降一个级别。对风暴潮灾害危险性为高的，
+将初步评价结果下降一个级别。通辽市地质灾害危险性均为低和较低，
+
+                                                                   158
+对评价结果无影响。
+
+对于大气环境容量和水环境容量均为最低值的，将初步评价结果
+
+下降两个级别；将大气环境容量或水环境容量为最低值的，将初步评
+
+价结果下降一个级别。对于舒适度等级为很不舒适的，将初步评价结
+
+果下降一个级别。其中，通辽市大气环境容量以及舒适度等级无最低
+
+值，对评价结果没有影响。通辽市地表水资源较少，主要以利用地下
+
+水为主，因此，虽然地表水环境容量为低等级的地区较多，但由于通
+
+辽市对地表水源利用率较低，所以本次评价不作为下降一级处理。
+
+（3）城镇建设适宜性划分
+
+对生态保护极重要区以外的区域，开展城镇适宜性评价，着重识
+
+别不适宜城镇建设的区域。一般的，将水资源短缺，地形坡度大于 25
+
+度，海拔过高，地质灾害危险性极高的区域，确定为城镇建设的不适
+
+宜区。本次评价首先将生态保护极重要区作为城镇建设不适宜区，其
+
+他区域中将城镇建设条件等级为高、较高、一般以及较低的划为适宜，
+
+将城镇建设条件等级为低的划为不适宜。
+
+对适宜性划分结果进行专家校验，综合判断评价结果与实际状况
+
+的相符性。对明显不符合实际的，将开展必要的现场核查校验与优化。
+
+评价结果显示，通辽市城镇建设适宜区达 33886.32 平方公里，占全
+
+市总面积的 57.57%；城镇建设不适宜区 24976.06 平方公里，占全市
+
+总面积的 43.43%。
+
+       表 4-40 城镇建设适宜性划分表                        单位：公顷、%
+
+   区域                   适宜区          不适宜区
+
+科尔沁区          面积             比重      面积         比重
+霍林郭勒
+科左后旗          280933.74      79.91%  70635.87   20.09%
+科左中旗
+              25384.66       43.42%  33081.41   56.58%
+
+              804755.11      69.98%  345191.53  30.02%
+
+              511431.62      53.43%  445812.52  46.57%
+
+                             159
+   区域      适宜区             不适宜区
+
+ 开鲁县   面积          比重      面积          比重
+ 库伦旗
+ 奈曼旗   386000.65   88.65%  49426.27    11.35%
+扎鲁特旗
+       123485.89   26.22%  347416.86   73.78%
+   小计
+       448474.56   55.13%  365059.07   44.87%
+
+       534195.27   32.39%  1114953.16  67.61%
+
+       3114661.49  52.91%  2771576.70  47.09%
+
+                    图 4-54 城镇建设适宜性评价等级图
+
+      3.城镇建设承载规模预测
+      （1）水资源约束下城镇建设承载规模
+      水资源对城镇规模的约束主要表现在水资源可利用量上的约束，
+针对通辽市用水现状，以水资源承载力分析为导向，对城镇人口规模
+
+                                                                   160
+与用地规模进行测算。
+
+      表 4-41 通辽市用水情况一览表（2014-2018）
+
+用水类别       单位  2014     2015     2016    2017    2018
+                                 5098    5654    5806
+生活用   城镇   万吨  4868     5022     4301    4301    4590
+   水  农村   万吨  4277     4439     9399    9955   10396
+      小计   万吨  9145     9461    233867  230863  217859
+                                22897   17875    8445
+第一产业用水 万吨 237975 231800          3102    3395    4131
+                                 4891    3592    4260
+第二产业用水 万吨 26764 26613           274156  265680  245091
+                                148.55  151.93  154.87
+第三产业用水 万吨      2698     2900    163.93  160.94  158.45
+                                312.48  312.87  313.32
+生态用水       万吨  4027     3044     98.6    109.3   112.2
+                                 71.9    73.2    79.4
+小计         万吨 280609 273818      82.4    87.2    90.9
+
+      城镇 万人 141.71 144.64       31097   26924   18382
+
+人口 农村 万人 170.69 167.44          573.53  485.52  325.19
+
+      小计 万人 312.40 312.08
+
+人均生 城镇 L/人·d 94.1       97.1
+
+活用水 农村 L/人·d 68.6       72.6
+
+量 总平均 L/人·d 80.2        83.1
+
+城镇生产生活用    万吨  34330    34535
+       水量               654.15
+
+城镇人均生产生
+
+活可用水量（二 L/人·d 663.71
+产+三产＋生活）
+
+资料来源：2014-2018 年水资源公报。
+
+2014-2018 年通辽市城镇人均生产生活用水量从 663.71 L/人·d
+
+下降到 325.19 L/人·d，用水量下降了 51%，近五年平均值为 540.42
+
+L/人·d。近五年城镇人均用水量下降的主要原因是工业用水量的显
+
+著降低。
+
+随着生活水平的提高和城镇人口的增加，未来通辽市人均城镇生
+
+活用水将进一步增加，但是生产用水方面，随着节水工艺和器具的普
+及，以及不断提升的中水回用率等，用水量将会不断下降。根据相关
+
+文献和通辽市的经济社会发展水平，预测城镇人均生产生活可用水量
+
+控制在 300 L/人·d。另外，根据《内蒙古自治区国土空间规划（2020-
+
+                                                                   161
+2035 年）征求意见稿》规划指标体系中的水资源平衡表，确定通辽市
+
+2035 年城镇可用水量为 7.58 亿立方米，预测 2035 年通辽市城镇可
+
+承载人口达 692.24 万人。
+
+以集约高效利用国土空间为基本原则，基于现状和节约集约发展
+
+要求，在不同发展阶段、经济技术水平和生产生活方式情景下，设定
+人均城镇建设用地（150m2/人），得出水资源约束条件下通辽市可承载
+
+的城镇建设用地规模为 1038.36 平方千米。
+
+     表 4-42 通辽市及各旗县城镇需水量和可承载人口
+
+行政区名   城镇可用   城镇人均   可载城镇    人均城镇        可承载城   现状城镇
+    称     水量   需水量   人口规模    建设用地        镇建设用   建设用地
+              （立方米   （万人）    （平方米         地规模   规模（平
+       （亿立方     /年）                      （平方千   方千米）
+          米）                   /人）
+                                            米）
+
+科尔沁区 3.26            297.30              445.94 131.18
+
+霍林郭勒 0.61            56.09               84.14  97.96
+
+科左后旗 0.59            54.11               81.17  56.14
+
+科左中旗 0.71            64.70               97.05  60.03
+
+开鲁县    0.67   109.5  60.85          150  91.28  52.96
+
+库伦旗    0.29          26.46               39.70  26.02
+
+奈曼旗    0.75          68.23               102.34 53.62
+
+扎鲁特旗 0.71            64.49               96.74 101.38
+
+通辽市    7.58          692.24              1038.36 579.28
+
+（2）空间约束下城镇建设承载规模
+
+将生态保护极重要区和城镇建设不适宜区以外区域的规模，作为
+
+空间约束下城镇建设的最大规模。
+
+表 4-43 土地资源约束下通辽市城镇建设承载规模 单位：平方千米
+
+行政区名称                可承载建设规模             现状城镇建设用地面积
+ 科尔沁区                      2809.34
+ 霍林郭勒                       253.85                    131.18
+ 科左后旗                      8047.55                    97.96
+ 科左中旗                      5114.32                    56.14
+                                                      60.03
+
+                     162
+行政区名称   可承载建设规模        现状城镇建设用地面积
+   开鲁县        3860.01
+   库伦旗        1234.86               52.96
+   奈曼旗        4484.75               26.02
+ 扎鲁特旗         5341.95               53.62
+    小计       31146.61               101.38
+                                    579.28
+
+           图 4-55 空间约束下通辽市可承载建设用地分布图
+      从水资源和土地资源资源约束下的城镇建设用地承载规模可以
+看出，霍林郭勒市和扎鲁特旗现状建设用地已超载，还需加强集约节
+约土地利用，其他旗县有一定的发展空间，科尔沁区有较高的发展空
+间。目前，通辽市城镇建设用地集约节约利用率不高，未来即使在进
+一步城镇化和人口增加的情况下，水资源约束下的城镇建设用地承载
+
+                                                                   163
+规模也能满足通辽市城镇建设发展的需要。
+
+表 4-44 通辽市可承载建设规模评价结果汇总表 单位：平方千米
+
+   区域   行政区域       现状城      土地资      水资源      可承载      发展空
+         总面积       镇建设      源约束      约束下      建设规         间
+科尔沁区               用地面
+霍林郭勒   3515.6961               下     445.94      模     314.76
+科左后旗    584.6607      积               84.14            -13.82
+科左中旗   11499.4664  131.18  2809.34    81.17   445.94    25.03
+ 开鲁县   9572.4414    97.96   253.85    97.05    84.14    37.02
+ 库伦旗   4354.2692    56.14  8047.55    91.28    81.17    38.32
+ 奈曼旗   4709.0275    60.03  5114.32     39.7    97.05    13.68
+扎鲁特旗   8135.3363    52.96  3860.01   102.34    91.28    48.72
+       16491.4843   26.02  1234.86    96.74     39.7    -4.64
+   小计  58862.3819   53.62  4484.75   1038.36  102.34   459.08
+                   101.38  5341.95             96.74
+                   579.28  31146.61           1038.36
+
+五、现状问题和风险
+
+      1.农业种植用地（耕地、园地）、建设用地在生态保护极重要
+区空间分布和规模
+
+      生态保护重要性评价结果与土地利用现状的空间冲突主要为生
+态保护极重要区中现状农业种植用地，即耕地（水田、旱地、水浇地）、
+园地（果园、其他园地）和建设用地（包含农村建设用地）等人类活
+动区域的空间分布。
+
+      （1）耕地分布情况
+      生态保护极重要区内约有耕地 1237.24 万亩，占全市耕地总面积
+的 37.10%；其中科左中旗耕地在生态极重要区内面积最大，达到
+302.05 万亩，占生态极重要区内耕地面积的 24.41%；其次是扎鲁特
+旗、库伦旗、奈曼旗和科左后旗，4 个旗县在生态极重要区内耕地面
+积占生态极重要区耕地总面积的 67.14%；冲突最小的在霍林郭勒市，
+
+                                                                   164
+冲突面积仅 1.29 万亩。                                  单位：万亩、%
+                        表 5-1 耕地分布情况统计表
+
+   旗县  生态极重要内区耕地 比重 生态重要区内耕地 比重
+霍林郭勒
+ 开鲁县   1.29     0.10                     4.031716  0.16
+科尔沁区
+科左后旗   42.72    3.45                     404.6644  15.79
+科左中旗
+ 库伦旗   60.54    4.89                     343.0035  13.39
+ 奈曼旗
+扎鲁特旗   160.20   12.95                    559.5225  21.84
+
+   小计  302.05   24.41                    581.5702  22.70
+
+       226.19   18.28                    50.73791  1.98
+
+       180.33   14.58                    289.0404  11.28
+
+       263.92   21.33                    329.5756  12.86
+
+       1237.24  100.00                   2562.146  100.00
+
+       图 5-1 耕地在生态极重要区分布情况
+
+                                           165
+（2）园地分布情况
+
+生态保护极重要区内约有园地 3.13 万亩，占通辽市园地总面积
+
+的 52.47%；其中扎鲁特旗、科尔沁区、科左中旗和奈曼旗生态极重要
+
+区内园地面积较大，二者在生态保护极重要区内园地面积占极重要区
+
+园地总面积的 85.86%，其他旗县生态极重要区内园地分布面积较少。
+
+       表 5-2 园地分布情况统计表                单位：亩、%
+
+   旗县  生态极重要内区园地 比重 生态重要区内园地 比重
+霍林郭勒
+ 开鲁县   179.44         0.57    900.50    1.42
+科尔沁区
+科左后旗   1077.82        3.45    10941.94  17.28
+科左中旗
+ 库伦旗   5482.58        17.52   16782.86  26.51
+ 奈曼旗
+扎鲁特旗   1444.09        4.62    3424.21   5.41
+
+   小计  4704.77        15.04   7888.11   12.46
+
+       1723.71        5.51    24.73     0.04
+
+       3880.87        12.40   11145.45  17.61
+
+       12792.85       40.89   12196.36  19.27
+
+       31286.14       100.00  63304.15  100.00
+
+                 166
+                   图 5-2 园地在生态极重要区分布情况
+      （3）建设用地分布情况
+      生态保护极重要区内约有建设用地（不包括水工建筑和空闲地）
+152.93 万亩，占现状建设用地总量的 1.60%。从总体分布上看，扎鲁
+特旗在生态保护极重要区内建设用地面积最大，达 42.43 万亩，占冲
+突总面积的 27.75%；其次生态保护极重要区内建设用地面积较大的
+是科左中旗、奈曼旗、库伦旗和霍林郭勒市，冲突面积分别为 24.28
+万亩、19.95 万亩、19.87 万亩和 17.94 万亩占冲突总面积的 15.88%、
+13.05%、12.99%和 11.73%；生态保护极重要区内建设用地面积最小
+
+                                                                   167
+的旗县为开鲁县，冲突面积只有 4.52 万亩，占冲突总面积的 2.95%。
+
+                图 5-3 建设用地在生态极重要区分布情况
+
+                                                                   168
+       表 5-3 生态保护极重要内建设用地情况统计表               单位：万亩、%
+
+   旗县                                      建设用地类型  小计       比重
+       商服用地 工矿用地 住宅用地 公服用地 特殊用地 交通用地
+霍林郭勒                                                       11.73
+ 开鲁县   0.48  14.27  1.13   0.44  0.07  1.55        17.94    2.95
+科尔沁区                                                        5.93
+科左后旗   0.27  0.36   1.88   0.17  0.03  1.81        4.52     9.72
+科左中旗                                                       15.88
+ 库伦旗   0.68  1.16   2.45   0.59  0.09  4.09        9.07    12.99
+ 奈曼旗                                                       13.05
+扎鲁特旗   0.48  0.95   5.18   0.75  0.09  7.43        14.87   27.75
+   小计                                                      100.00
+   比重  0.41  0.64   7.40   0.91  0.21  14.72       24.28     —
+
+       0.25  1.36   8.34   0.78  0.17  8.97        19.87
+
+       0.46  1.99   8.24   0.50  0.26  8.50        19.95
+
+       0.60  13.75  7.21   0.87  0.15  19.85       42.43
+
+       3.64  34.47  41.83  5.01  1.06  66.91       152.93
+
+       2.38  22.54  27.35  3.28  0.70  43.75       100.00
+
+                           169
+从用地类型看，冲突用地类型主要表现为工矿用地、住宅用地和
+
+交通运输用地。其中，交通运输用地在生态保护极重要区内面积最大，
+
+面积为 66.91 万亩，占冲突总面积的 43.75%。村庄分布在生态保护极
+
+重要区内，要加强村庄的管理，减少村庄日常的生产生活对周边区域
+
+的破坏，对于自然保护区、湿地保护区等重要生态脆弱区内村庄，可
+
+采取生态搬迁等相关措施。工矿用地在生态保护极重要区内面积为
+
+34.47 万亩，占冲突总面积的 22.54%。冲突面积最小的为特殊用地，
+
+面积 1.06 万亩，占比 0.7%。
+
+综上所述，生态保护极重要区域与耕地、园地、建设用地的冲突
+
+情况中，与耕地冲突时最大，其次是建设用地和园地的冲突。从冲突
+
+的面积大小来看，扎鲁特旗和库伦为最大者，霍林郭勒市冲突面积最
+
+小。
+
+    表 5-4 生态极重要区冲突情况汇总表            单位：万亩、%
+
+  区域  耕地冲突        冲突类型             小计        占比
+         1.29   园地冲突 建设用地冲突
+霍林郭勒    42.72                                1.38
+ 开鲁县    60.54   0.02       17.94   19.25     3.40
+科尔沁区                                         5.04
+科左后旗   160.20   0.11       4.52    47.35    12.58
+科左中旗   302.05                               23.46
+ 库伦旗   226.19   0.55       9.07    70.16    17.67
+ 奈曼旗   180.33                               14.40
+扎鲁特旗   263.92   0.14       14.87   175.22   22.08
+  小计   1237.24                              100.00
+  占比    88.80   0.47       24.28   326.80    ——
+
+                0.17       19.87   246.23
+
+                0.39       19.95   200.67
+
+                1.28       42.43   307.63
+
+                3.13       152.93  1393.30
+
+                0.22       10.98   100.00
+
+                      170
+2.永久基本农田及储备区在生态保护极重要区中分布情况
+
+生态保护极重要区内约有永久基本农田及储备区 546.92 万亩，
+
+占全市永久基本农田及储备区总面积的 0.02%；其中科左中旗永久基
+
+本农田及储备区在生态极重要区内面积最大，达到 159.53 万亩，占生
+
+态极重要区内永久基本农田及储备区面积的 29.17%；其次是库伦旗、
+
+扎鲁特旗、奈曼旗和科左后旗，4 个旗县在生态极重要区内永久基本
+
+农田及储备区面积占总冲突面积的 64.26%；霍林郭勒市生态保护极
+
+重要与永久基本农田及储备区没有冲突。               单位：万亩、%
+ 表 5-5 永久基本农田及储备区分布情况统计表
+
+   旗县  永久基本农田及储备区内   永久基本农田及储备区外
+
+霍林郭勒   面积      比重    面积          比重
+ 开鲁县
+科尔沁区   0.00    0.00  68503.09    100.00
+科左后旗
+科左中旗   17.40   0.05  33431.61    99.95
+ 库伦旗
+ 奈曼旗   18.54   0.01  362990.57   99.99
+扎鲁特旗
+   合计  58.17   0.01  474079.42   99.99
+
+       159.53  0.38  41500.34    99.62
+
+       116.31  0.03  388587.49   99.97
+
+       68.47   0.02  408939.16   99.98
+
+       108.51  0.01  1138525.72  99.99
+
+       546.92  0.02  2916557.39  99.98
+
+               171
+ 图 5-4 永久基本农田及储备区在生态极重要区分布情况
+对位于生态保护极重要区内的基本农田实际地类进行分析，发现
+
+基本农田中存在 28.29 万亩的不实耕地，其中有 2.80%（15.34 万亩）
+为林地、1.63%（8.91 万亩）为交通运输用地、0.34%（1.87 万亩）为
+草地、0.24%（1.34 万亩）为水域及水利设施用地，此外还有少量的
+商服用地、住宅用地、湿地等。
+
+表 5-6 生态保护极重要区内基本农田现状用地类型统计表
+
+永久基本农田及储备区内现状用地        生态保护极重要区内永久基本农田及储
+                   类型                        备区
+
+                   湿地       面积（万亩）  占比（%）
+                   耕地
+                            0.24    0.00
+
+                            518.63  94.83
+
+                       172
+永久基本农田及储备区内现状用地        生态保护极重要区内永久基本农田及储
+                   类型                        备区
+
+                   园地       面积（万亩）  占比（%）
+                   林地
+                   草地       0.15    0.03
+                商服用地
+                工矿用地        15.34   2.80
+                住宅用地
+                公服用地        1.87    0.34
+                特殊用地
+             交通运输用地         0.00    0.00
+         水域及水利设施用地
+                其他土地        0.03    0.01
+                   总计
+                            0.13    0.02
+
+                            0.01    0.00
+
+                            0.09    0.02
+
+                            8.91    1.63
+
+                            1.34    0.24
+
+                            0.16    0.03
+
+                            546.92  100.00
+
+3. 现状耕地、永久基本农田在种植业生产不适宜区中分布情况
+
+（1）现状耕地在种植业生产不适宜区中分布情况
+
+      种植业生产不适宜区内现状耕地达 866.74 万亩，占现状耕地总
+面积的 25.99%，通辽市现状耕地分布在种植业不适宜区面积较大。
+其中霍林郭勒市 69.23%的耕地分布在种植业不适宜区，其他旗县约
+20%左右的耕地分布在种植业不适宜区，科左后旗和科左中旗现状耕
+地分布在种植业不适宜区的面积达 441.00 万亩，占不适宜区耕地总
+面积的 50.88%。
+表 5-7 种植业不适宜区内现状耕地分布结果汇总表 单位：万亩、%
+
+    区域  现状耕地面积              种植业不适宜区内现状耕地
+
+ 科尔沁区       363.16          面积      比重
+霍林郭勒市         4.09
+ 科左后旗       686.24          85.36   23.51
+ 科左中旗       673.05
+            433.51          2.83    69.23
+   开鲁县
+                            292.72  42.66
+
+                            148.28  22.03
+
+                            117.45  27.09
+
+                       173
+   区域  现状耕地面积       种植业不适宜区内现状耕地
+
+ 库伦旗       266.21   面积      比重
+ 奈曼旗       473.55
+扎鲁特旗       435.27   38.22   14.36
+   合计      3335.09
+                    126.07  26.62
+
+                    55.81   12.82
+
+                    866.74  25.99
+
+             图 5-5 种植业生产不适宜区内现状耕地分布图
+      （2）永久基本农田在种植业生产不适宜区中分布情况
+      种植业生产不适宜区内永久基本农田及储备区达 372.14 万亩，
+占现状耕地总面积的 11.16%，冲突面积较大。其中霍林郭勒市种植业
+不适宜区内无永久基本农田及储备区分布，库伦旗和扎鲁特旗约 5%
+左右的永久基本农田及储备区分布在种植业不适宜区，其他旗县 10%
+
+                                                                   174
+以上的冲突。
+
+表 5-8 种植业不适宜区内永久基本农田及储备区分布结果汇总表
+
+                         单位：万亩、%
+
+  区域    现状耕地面积   种植业不适宜区内永久基本农田及储备区
+
+科尔沁区             面积      比重
+霍林郭勒
+科左后旗    363.16   43.35   11.94
+科左中旗
+ 开鲁县    4.09     0.00    0.00
+ 库伦旗
+ 奈曼旗    686.24   103.92  15.14
+扎鲁特旗
+        673.05   76.65   11.39
+  小计
+        433.51   51.20   11.81
+
+        266.21   11.71   4.40
+
+        473.55   61.75   13.04
+
+        435.27   23.57   5.41
+
+        3335.09  372.14  11.16
+
+图 5-6 种植业生产不适宜区内永久基本农田及储备区分布图
+
+                                                            175
+4.现状城镇用地在城镇建设不适宜区空间分布和规模
+
+现状城镇用地在城镇建设不适宜区内面积约 302.07 公顷，现状
+
+城镇建设用地在不适宜区内面积较小，其中冲突面积最大的为霍林郭
+
+勒市，冲突面积为 111.55 公顷，占城镇建设不适宜区内城镇建设用
+
+地面积的 36.93%；其次为扎鲁特旗，冲突面积为 56.12 公顷，占城镇
+
+建设不适宜区内城镇建设用地面积的 18.58%。
+
+现状区域基础用地（包含铁路用地、轨道交通用地、公路用地、
+
+机场用地和管道运输用地）在城镇建设不适宜区内面积约 250.55 公
+
+顷，其中开鲁县冲突面积为 57.93 公顷，占城镇建设不适宜区内城镇
+
+建设用地面积的 23.12%；其次为奈曼旗，面积为 43.04 公顷，占城镇
+
+建设不适宜区内城镇建设用地面积的 117.18%。
+
+表 5-9 城镇建设用地在城镇建设不适宜区分布汇总统计表
+
+                                     单位：公顷、%
+
+行政区名称   城镇建设用地面积              比重     区域交通用地       比重
+ 科尔沁区           37.71        12.48        20.52   8.19
+ 霍林郭勒           111.55       36.93         9.42   3.76
+ 科左后旗           25.09         8.31        40.08  16.00
+ 科左中旗           14.56         4.82        36.71  14.65
+   开鲁县          35.95        11.90        57.93  23.12
+   库伦旗           1.34         0.45         2.50   1.00
+   奈曼旗          19.75         6.54        43.04  17.18
+ 扎鲁特旗           56.12        18.58        40.35  16.10
+    小计         302.07        100.00      250.55  100.00
+
+                        176
+图 5-7 城镇建设用地在城镇不适宜区分布图
+
+      5.村庄用地在生态保护极重要区、地质灾害高风险区的空间分
+布和规模
+
+      村庄用地（包括农村住宅用地和村庄道路用地）在生态保护极重
+
+要区内面积为 102.13 平方公里，其中扎鲁特旗、库伦旗、科尔沁左
+
+翼后旗、科尔沁左翼中旗四个旗县村庄用地在生态保护极重要区的分
+
+布面积较大，约占生态保护极重要区内村庄面积的 66.88%。通辽市没
+
+有地质灾害高风险区，因此村庄用地均处于地质灾害中低风险区。
+
+表 5-10 村庄用地在生态保护极重要区分布汇总表 单位：公顷、%
+
+行政区名称        面积         比重
+ 科尔沁区       1089.11     10.66
+
+       177
+行政区名称     面积       比重
+ 霍林郭勒    738.47    7.23
+ 科左后旗   1426.36   13.97
+ 科左中旗   1344.94   13.17
+   开鲁县   526.56    5.16
+   库伦旗  1620.00   15.86
+   奈曼旗  1028.50   10.07
+ 扎鲁特旗   2439.07   23.88
+    小计  10213.00  100.00
+
+        图 5-8 村庄用地在生态保护极重要区分布图
+6. 主要问题和风险小结
+分类识别生态保护、农业生产、城镇建设三大类三小类空间保护
+
+                                                          178
+和开发现状冲突风险。
+      生态风险需加强防范，生态极重要区冲突规模较大，需要进一步
+
+与生态保护红线及自然保护地、永久基本农田及储备区等相关规划进
+一步分析，合理划定三区三线。
+
+      农业风险主要集中于耕地，严守“总量不减少、质量有提高”的耕
+地保护准则，注重提高土地质量、改善生产条件，促进了农村牧区经
+济发展和生态建设。守住粮食生产“生命线”。
+
+      城镇风险总体可控，主要风险为交通运输用地之间冲突，冲突规
+模较大，各旗县均由一定比例分布。
+
+      针对各种风险，提出如下处理建议。
+
+      （1）生态保护极重要区内存在现状建设用地、农业种植用地（耕
+地、园地）1393.30 万亩、永久基本农田及储备区 546.92 万亩
+
+      按照建设用地、农用地等不同冲突类型，并结合其所处区域协调
+冲突用地。
+
+      ① 现状建设用地冲突处理建议
+      城镇建设用地：毗邻生态保护极重要区的城镇建设用地应严格控
+制其建设规模，已开展城镇建设活动的原则上予以保留，未进行建设
+的应调整其规划对生态极重要区予以避让，同时划定城镇开发边界时
+应尽量注意避让。
+      农村居民点：对确实需要、影响生态保护或存在安全隐患的逐步
+引导搬迁；对于保留村庄，应编制村庄规划，严格控制建设规模，加
+强环境整治。
+      交通运输用地及特殊用地：已建成的线性基础设施可以保留，但
+不应扩大规模，同时不应纳入生态红线范围内；已建成宗教、公墓、
+光伏、风力、污水处理、垃圾填埋等项目严禁扩大规模，对环境有影
+
+                                                                   179
+响的应逐步退出。
+      采矿用地：合法矿业权已到期或灭失的矿山应严格关停退出，由
+
+建设单位实施生态修复，恢复生态功能。位于合法采矿权内的采矿用
+地待开采完毕后也应纳入生态修复空间，恢复生态功能。
+
+      ② 农业种植用地冲突处理建议
+      耕地：与自然保护地核心区存在冲突的耕地，原则上自然保护地
+保护区禁止人为活动，因此核心区内的耕地应当予以退出，并实施退
+田还湖、退耕还林等措施恢复以自然生态功能。同时通辽市正在开展
+生态红线与自然保护地优化评估工作，应与评估结果充分对接，并将
+评估后仍位于自然保护地核心区内的耕地实施退出。
+      种植园地：结合种植园地/人工商品林的经营权进一步核实其合
+规性和边界准确性，不合规的应予以退出，恢复生态林地。
+      ③ 永久基本农田及储备区冲突处理建议
+      根据《自然资源部农业农村部关于加强和改进永久基本农田保护
+工作的通知》：永久基本农田不得种植杨树、桉树、构树等林木，不
+得种植草坪、草皮，不得种植其他破坏耕作层的植物。已经种植的，
+由县级自然资源主管部门和农业农村主管部门根据农业生产现状和
+对耕作层的影响程度组织认定，能恢复粮食作物生产的，5 年内恢复；
+确实不能恢复的，在核实整改工作中调出永久基本农田，并按要求补
+划。据此提出以下处理建议：
+      首先，建议优先种植属性代码标记即可恢复的非耕地复垦为耕地，
+包括林地、园地、草地；
+      其次，通过组织核查种植属性代码未标记可恢复的非耕地，包括
+
+                                                                   180
+林地、园地、草地、其他土地、采矿用地、村庄和城镇建设用地对其
+中满足复垦条件的非耕地恢复为耕地；对其中违法占用基本农田的非
+农建设项目，应拆除复耕，确需保留的必须以增减挂钩或工矿废弃地
+复垦利用的方式补办用地手续。
+
+      （2）种植业不适宜区内存在耕地、永久基本农田及储备区
+3707.23 万亩
+
+      根据《自然资源部农业农村部关于加强和改进永久基本农田保护
+工作的通知》：对不能实现水土保持的 25 度以上的陡坡耕地等，综合
+考虑粮食生产实际种植情况，经国务院同意，结合生态退耕有序退出
+永久基本农田；不得擅自将已实施坡改梯耕地纳入退耕范围。 据此
+提出以下处理建议：
+
+      ① 永久基本农田及储备区：调出不实永久基本农田及储备区并
+         予以补划。将 372.14 万亩不实永久基本农田及储备区调出基
+         本农田范围并予以补划。
+
+      ② 耕地：对 3335.09 万亩耕地实施退耕还林还草，或因地制宜发
+         展特色高效农业。
+
+      （3）城镇建设不适宜区内存在城镇建设用地 302.07 公顷
+      对于城镇建设不适宜区，建议不划入城镇开发边界，严控大规模
+城镇建设；对建成的现状城镇用地， 坚持以存量和减量发展为主。
+      对于重大区域基础设施的建设，允许在不破坏生态环境的基础上
+布局在冲突区域，后续将结合现场校核具体分析冲突原因，制定合理
+的管制措施。
+
+                                                                   181
+六、潜力分析
+    （一）农业生产空间潜力规模评价
+
+      1.可开发为耕地的空间分布和规模
+      根据种植业生产适宜性和承载规模结果，在生态保护极重要区和
+种植业生产不适宜区以外区域，结合土地利用现状，依次扣除现有耕
+
+地、永久基本农田及储备区、林地、草地、湿地、建设用地，形成可
+
+开发为耕地的空间分布图。
+
+分析得出通辽市耕地空间潜力规模约为 138.22 万亩，占可承载
+
+耕地规模的 6.70%，其中科左后旗空间潜力最大，占总潜力面积的
+
+25.98%。
+
+         表 6-1 耕地空间潜力分析汇总表         单位：万亩、%
+
+   区域    可承载耕地规模       耕地空间潜力      占总潜力面积比重
+科尔沁区           305.33       19.25          13.93
+霍林郭勒              0          0.00           0.00
+科左后旗           265.85       35.90          25.98
+科左中旗           468.82       25.92          18.75
+ 开鲁县            406.5       23.63          17.10
+ 库伦旗            38.36        1.47           1.07
+ 奈曼旗           340.51       15.06          10.89
+扎鲁特旗           238.69       16.98          12.28
+              2064.06      138.22          100.00
+   小计
+
+                       182
+                         图 6-1 耕地空间潜力分析图
+
+      2.情景分析
+      2018 年通辽市水资源开发利用率为 65.41%，地下水开采率为
+66.89%，全市水资源总体开发利用程度较高。依靠水资源开发难以支
+撑经济的可持续发展，必须通过提高用水效率缓解用水紧缺问题。
+      （1） 情景一：高效节水灌溉工程模拟
+      根据《通辽市 2018-2020 年高效节水灌溉工程规划》（2017 年），
+计划全市建设 1000 万亩高效节水灌溉工程，2018 年已建设高效节水
+灌溉农田 89.24 万亩，2019 年计划建设高效节水灌溉农田 74.5 万亩、
+实际建成 34.5 万亩。为落实千万亩农业高效节水灌溉工程，打造现
+
+                                                                   183
+代农业示范带，通辽市高效推进建设浅埋滴灌高效节水工程，实现水
+
+资源高效利用、农业增产增效。在此背景下，情景分析设定将现状非
+
+节水灌溉、管灌和渠道衬砌改为滴灌的灌溉方式，并确定农田综合灌
+
+溉定额。
+
+方法一：农田综合灌溉定额采用《内蒙古自治区行业用水定额》
+
+中 85%的灌溉保证率下，采用浅埋滴灌方式的玉米灌溉定额。
+
+方法二：依据《内蒙古自治区行业用水定额》，计算 85%的灌溉保
+
+证率下喷灌和浅埋滴灌两种方式玉米灌溉定额的系数关系,在现状农
+
+田综合灌溉定额的基础上估算浅埋滴灌情景下的灌溉定额。
+
+        表 6-2 农田综合灌溉定额
+
+   行政区  现状农田综合灌           农田综合灌溉定额(m³/亩)
+         溉定额(m³/亩)
+ 科尔沁区                     方法一    方法二
+霍林郭勒市           208
+ 科左后旗                     169.3  170.5
+ 科左中旗                     188.0  179.2
+                          169.3  170.5
+   开鲁县                    169.3  170.5
+   库伦旗                    169.3  170.5
+   奈曼旗                    169.3  170.5
+ 扎鲁特旗                     169.3  170.5
+
+                          188.0  179.2
+
+在农业用水量不变的情况下，采用浅埋滴灌的节水灌溉方式，预
+
+测 2035 年内全市及各旗县可承载耕地面积。按照方法一，估算全市
+可承载耕地面积为 2784.06 万亩；按照方法二，估算全市可承载耕地
+面积为 2779.29 万亩。
+
+                     184
+               表 6-3 水资源约束下通辽市可承载耕地规模情景一分析汇总表
+
+                                             可承载的耕地规模（万亩）
+
+   行政区  农业用水    现状耕地面                方法一                          方法二
+        量(亿立方         积           雨养耕地面                        雨养耕地面
+ 科尔沁区
+霍林郭勒市       米)           可承载的           积             可承载的           积
+ 科左后旗                    灌溉面积                         灌溉面积
+ 科左中旗   2.84    363.16               302.25   合计                  300.12   合计
+                          167.92             470.16    166.73             466.85
+   开鲁县                                                                      0.00
+   库伦旗  0.00    4.1      0.00     0.00       0.00     0.00     0.00       324.32
+   奈曼旗                                                                    571.93
+ 扎鲁特旗   1.97    686.24   116.65   209.97     326.62   115.83   208.49     565.47
+    小计                                                                     55.64
+        3.48    673.05   205.71   370.28     575.99   204.26   367.67     518.02
+                                                                          277.05
+        3.44    433.51   203.38   366.09     569.48   201.95   363.52     2779.29
+
+        0.34    266.21   20.01    36.02      56.04    19.87    35.77
+
+        3.15    473.55   186.32   335.37     521.69   185.01   333.01
+
+        1.77    435.27   94.32    169.77     264.09   98.95    178.11
+
+        17.01   3335.09  994.31   1789.75    2784.06  992.61   1786.69
+
+                                  185
+      （2）情景二：高标准农田建设模拟
+      目前通辽市大力推进高标准农田建设，情景分析设定为规划期内
+通辽市耕地完全建成为高标准农田，在农业用水量不变的情况下，预
+测 2035 年全市及各旗县可承载耕地面积。根据通辽市农牧局数据，
+目前已建成的高标准农田，农田节水灌溉平均用水量为 130-180 立方
+米/亩。
+      高方案：农田综合灌溉定额，取最低值 130 立方米/亩；
+      低方案：农田综合灌溉定额，取最高值 180 立方米/亩。
+      在农业用水量不变的情况下，预测 2035 年内全市及各旗县可承
+载耕地面积。按照高方案，估算全市可承载耕地面积为 3663.69 万亩；
+按照低方案，估算全市可承载耕地面积为 2646.00 万亩。
+
+                                                                   186
+               表 6-4 水资源约束下通辽市可承载耕地规模情景二分析汇总表
+
+                                          可承载的耕地规模（万亩）
+
+ 行政区   农业用水    现状耕地面                高方案                        低方案
+科尔沁区   量(亿立方         积
+                                 雨养耕地面                     雨养耕地面
+           米)           可承载的灌          积           可承载的          积
+                           溉面积                     灌溉面积
+                                          合计                         合计
+                                                                    442.21
+       2.84    363.16   218.68   393.62   612.30   157.93  284.28     0.00
+                                                                    307.21
+霍林郭勒市  0.00    4.1      0.00     0.00     0.00     0.00    0.00     541.75
+                                                                    535.62
+科左后旗   1.97    686.24   151.91   273.45   425.36   109.72  197.49    52.71
+                                                                    490.68
+科左中旗   3.48    673.05   267.90   482.21   750.11   193.48  348.27   275.82
+                                                                    2646.00
+开鲁县    3.44    433.51   264.87   476.76   741.63   191.29  344.33
+
+库伦旗    0.34    266.21   26.06    46.91    72.98    18.82   33.88
+
+奈曼旗    3.15    473.55   242.64   436.76   679.40   175.24  315.44
+
+扎鲁特旗   1.77    435.27   136.40   245.51   381.91   98.51   177.31
+
+小计     17.01   3335.09  1308.46  2355.23  3663.69  945.00  1701.00
+
+                                 187
+      （3）农业生产承载规模提升的发展战略
+      通过高效节水灌溉工程和高标准农田建设的推进，通辽市农业生
+产承载规模能有较大程度的提升，未来通辽市水资源约束下的农业生
+产承载规模能提升 15-60%。从结果可以看出，两种情景下，仅情景
+二中的高方案可承载耕地面积超过“三调”中现状耕地面积。
+      通辽市需运用先进农业生产模式，提高水资源利用效率，推动农
+业增产增效。推进建设浅埋滴灌高效节水工程，提高灌溉效率；推进
+高标准农田建设，提升耕地质量等级；推动科技强农工程，提升单位
+耕地产量；突出抓好种子工程、高效生产管理技术、农机装备、“互
+联网+”现代农牧业和农技队伍建设，提升农牧业标准化、优质化水
+平，促进农业转型升级。从保护通辽市生态环境的角度，将会有一部
+分现状耕地逐步退耕还林还草，农业灌溉用水将大幅减少，对水资源
+涵养和生态环境保护有重要的意义。
+    （二）城镇建设潜力规模评价
+
+1.城镇建设潜力规模
+根据城镇建设适宜性评价结果，对城镇建设适宜区以及生态保护
+
+极重要以外区域，分析土地利用现状结构，依次扣除永久基本农田及
+
+储备区、林地、草地、湿地、现状建设用地，形成城镇建设空间潜力
+
+分析图。
+
+分析得出城镇建设空间潜力规模约为 9408.95 平方千米，占通辽
+
+市国土面积的 15.98%。
+
+       表 6-5 城镇建设空间潜力表               单位：平方千米、%
+
+行政区名称           潜力用地面积               占通辽市国土面积比重
+ 科尔沁区               1185.46                      2.01
+ 霍林郭勒                29.35                       0.05
+ 科左后旗               2587.14                      4.40
+
+                                188
+行政区名称   潜力用地面积       占通辽市国土面积比重
+ 科左中旗       1590.80              2.70
+   开鲁县      1713.75              2.91
+   库伦旗      273.20               0.46
+   奈曼旗      1213.42              2.06
+ 扎鲁特旗       815.83               1.39
+    小计      9408.95             15.98
+
+                         图 6-2 建设空间潜力分析图
+
+      2.城镇建设开发模式
+      城镇建设空间开发潜力可粗略分为两种情况，一是城镇外部增量
+开发，二是城镇内部存量用地调整。对通辽市来说，基于上文城镇建
+
+                                                                   189
+设空间潜力分析结果来看，城镇外部增量可开发较低。通辽市应该针
+对城镇建设适宜区内的建设用地，进行城镇内部存量用地调整，以此
+提高城镇建设空间潜力。
+
+      3.城镇建设用地激发
+      在严格保护生态空间、控制城镇建设规模扩张的基础上，激发城
+镇建设空间潜力，首先要侧重于动态协调城镇内部存量用地的各种要
+素与资源。这就要求整合多主体利益，盘活存量用地规模，优先开发
+低效、闲置用地，针对通辽市现状用地情况的调查与分析，并结合未
+来发展需要，建议对各个不同的地段采取城镇内部用地激发措施。
+      维护保养。对于用地性质和布局适宜、现状建筑使用情况良好的
+新建地段，采取正常的维护保养方式。对生活影响较少、规划保留原
+址的工业生产用地、仓储用地和其它行政商业文化等用地也属于此类。
+      维修改善。维修改善的方式适用于用地性质和布局适宜，但经过
+一段时间使用后，在设施配套或环境质量等方面已经不太适合现代化
+生活要求的地段。这些区段一般在本地段内部采取建筑维修、环境设
+施条件改善以及适当疏解部分人口等措施，但不变更土地使用性质和
+范围。当用地受到局限时，也可根据分区规划要求，在周边地段适当
+进行配套完善。
+      拆除重建。对于用地布局适宜，但现状保有情况很差，已经难以
+适应现代化生活需求的地段，应采取拆除重建的方式，且重建时不得
+改变土地使用性质。
+      更新开发。主要针对用地性质及布局不合理、或者在城市发展的
+进程中需要进一步提高土地使用强度和效率的地段。这些地段一般情
+况下将变更原土地使用性质。
+
+                                                                   190
+七、结论建议
+    （一）国土空间开发保护中的资源环境突出问题和风险
+
+      1.生态环境保护形势严峻
+      通辽市生态环境比较脆弱，生态保护极重要区占全市总面积的
+49.56%，主要包括北部的大兴安岭南麓山地林区和中部、南部防风固
+沙区域。作为科尔沁沙地腹地，由于人为活动和严重的土地沙化，大
+部分旗县的半干旱草原植物被沙生植物所代替，草场面积不断退化，
+生态功能下降，进而导致野生动植物物种区的面积也不同程度减少，
+部分珍稀野生动植物的栖息地环境有所恶化。
+      近年来，通辽市依托“三北”防护林、防沙治沙、退耕还林还草、
+休牧禁牧等一系列国家重点生态建设工程措施，生态环境有了较大的
+改观，但是土地沙化、水土流失、草原退化等生态问题改善有限，生
+态环境保护任务仍十分艰巨。
+
+      2.生态空间与耕地保护空间严重重叠
+      通辽市生态保护极重要区内耕地面积约占耕地总面积的 37.10%
+左右。且部分分布于河道、湖泊防洪泄洪区，部分为农民自行开垦林
+地、草地或湿地，还有部分处于国家、自治区重点生态建设区的荒漠
+化、沙化耕地。这些耕地在空间上与生态保护建设空间高度重合，而
+在国家既有的耕地保护政策下很难实现退耕，亟需在顶层设计上推进
+与生态空间重叠区域的耕地退耕还林还草。
+
+      3.水资源利用问题严重
+      通辽市是严重缺水地区，水资源总量少，境内河流大多数季节性
+断流，水资源利用不合理，地下水集中开采。近年来地下水开采量越
+来越大，地下水位持续下降，区域下降漏斗面积不断扩大，已形成科
+尔沁地下水超采区。另外，由于自然环境、资源开发、经济发展形势
+
+                                                                   191
+等原因，水资源承载力面临较大的压力，地下水漏斗面积较大需要修
+复时间较长，水环境污染待治理，水功能区达标率还需提升。
+
+    （二）各旗县主体功能调整建议
+      根据自治区下发的主体功能分区表，通辽市科尔沁区为农产品主
+
+产区，霍林郭勒市为城市化发展区，科尔沁左翼中旗、科尔沁左翼后
+旗、开鲁县、库伦旗、奈曼旗、扎鲁特旗为重点生态功能区。结合通
+辽市各旗县双评价结果的各类功能指向区域占比，对各旗县生态保护、
+农业生产、城镇建设的主体功能特征进行分析，建议对各旗县的主体
+功能定位调整如下：
+
+      1. 城市化发展区
+      科尔沁区城镇特征显著，生态保护极重要区占比低，建议调整为
+城市化发展区。霍林郭勒市根据实际情况建议保留为城市化发展区，
+但需要对区域内生态保护极重要区加强生态保护修复。
+      2. 农产品主产区
+      开鲁县农业适宜特征最为明显，建议调整为农产品主产区。
+      3. 重点生态功能区
+      库伦旗生态特征显著，科尔沁左翼中旗、科尔沁左翼后旗、奈曼
+旗、扎鲁特旗按照生态优先原则，建议保留为重点生态功能区。
+
+                                                                   192
+               表 7-1 通辽市各旗县主体功能特征对比分析
+
+    （三）规划指标落实建议
+      1. 永久基本农田保护面积
+      依据《通辽市土地利用总体规划（2006-2020 年）调整方案》，通
+
+辽市到 2020 年永久基本农田保护面积为 1383.75 万亩。现状通辽市
+全域划定永久基本农田面积 1397.25 万亩，在完成自治区下达任务的
+基础上，增划了 13.56 万亩的优质耕地作为基本农田。
+
+      全域永久基本农田及储备区有在生态极重要区，待调整优化。
+      2. 耕地保有量
+      依据《通辽市土地利用总体规划（2006-2020 年）调整方案》，通
+辽市到 2020 年耕地保有量为 1713.00 万亩。根据三调通辽市现状耕
+地面积 3335.09 万亩（待根据下发三调数据修正），规模远高于下达任
+务量。耕地大幅增加的主要原因包括：一是三调对城镇村内部土地利
+用进行了细化，将城镇、农村宅基地内部现状为耕地、符合上图标准
+的土地计入耕地，此种情况的耕地面积约为 34.20 万亩；二是部分人
+工牧草地按照国家下发的影像调整为耕地；三是农业开发和农民自主
+开荒播种的土地按照现状调成了耕地；四是调查精度的提高引起的耕
+地变化。
+      根据风险研究和潜力分析，生态保护极重要区内现状耕地有
+
+                                                                   193
+1237.24 万亩，占全市耕地总面积的 37.10%；种植业生产不适宜区内
+现状耕地有 866.74 万亩，占全市耕地总面积的 25.99%；这部分耕地
+建议调出，即现状耕地面积将要减少 2103.98 万亩。耕地空间潜力规
+模约为 138.22 万亩，即开发后备耕地资源面积为 138.22 万亩。通过
+调整优化，通辽市耕地总面积为 1231.11 万亩，比上位划定的耕地保
+有量目标减少 481.89 万亩，后续可结合土地整治工作进一步完善耕
+地格局。耕地保有量和三调数据还待下发最新版，结果有待优化。
+
+      根据耕地承载规模评价，在水土资源约束下，通辽市可承载耕地
+为 2646.00 万亩，高于耕地保有量目标。综上，建议本轮规划确定的
+耕地保有量目标上限不能超过 2646.00 万亩。
+
+      3. 城镇建设用地规模
+      根据城镇建设承载规模评价，在水土资源约束下，通辽市可承载
+城镇建设规模最大值为 9.41 万公顷。根据三调通辽市现状城镇建设
+用地面积 5.09 万公顷，对比承载规模还存在较大发展空间。建议本
+轮规划确定的城镇建设用地规模上限不能超过 9.41 万公顷。
+    （四）支撑“三线”划定
+
+      1. 生态保护红线
+      （1）确保底图底数一致性
+      在现有成果基础上，将生态保护红线划定结果与三调、永久基本
+农田及储备区、城镇开发边界、人工商品林、矿业权等图件数据叠加，
+统计冲突图斑，分析生态保护红线边界划定合理性、从而优化生态红
+线。
+      （2）与相关规划的协调性
+      分析生态保护红线划定过程中与城市总体规划、城镇体系规划、
+城市群发展规划、主体功能区划、生态功能区划、环境保护规划、林
+
+                                                                   194
+地保护利用规划、矿产资源规划、旅游发展规划、基础设施建设规划
+等相关规划的衔接情况。
+
+      （3）应划尽划的完整性
+      将极重要、极脆弱区域结合实际调研将其划入生态红线中。分析
+生态功能极重要区、生态极脆弱区、国家级和省级禁止开发区域以及
+其他有必要实施严格保护的区域划入生态保护红线（包括类型、面积
+和空间分布）合理性，从而优化生态红线。同时，生态红线还需要注
+重生态系统完整性。生态红线是否保证了自然地理单元、地表覆被单
+元和地带性生态系统的完整性，生态保护红线分布与区域生态安全格
+局的相符性等情况。
+      （4）周边风貌协调性
+      综合考虑生态红线所在地陆域生态系统完整性和连通性，衔接城
+乡风貌建设、珍稀物种分布区、自然景观及历史文化遗迹风貌的衔接
+与保护。
+
+      2. 永久基本农田保护红线
+      （1）建议调出自然保护地、生态保护红线和生态保护极重要区
+内的冲突永久基本农田
+      建议在通辽市三区三线划定过程中，对位于自然保护地、生态红
+线和生态保护极重要区内的永久基本农田进行研判，划入自然保护地、
+生态红线和生态保护极重要区内的永久基本农田应逐步有序退出；已
+划入自然保护地一般控制区的，对生态功能造成明显影响的也应逐步
+有序退出。自然保护地、生态红线和三调数据还待下发最新版，结果
+有待优化。
+      （2）建议调出种植业生产不适宜区内的冲突永久基本农田
+      针对分布在种植业生产不适宜区内的 372.14 万亩永久基本农田
+
+                                                                   195
+及储备区，应重点研究这些地块划入永久基本农田保护红线的可行性，
+如果不满足永久基本农田划入标准，建议将这部分地块全部调出永久
+基本农田范围并予以补划。
+
+      （3）永久基本农田调整优化建议
+      首先，建议调出永久基本农田内的水域及水利设施用地、交通运
+输用地、特殊用地和湿地；再次，根据自然资源部和农业农村部相关
+要求，由自然资源主管部门和农业农村主管部门对市域永久基本农田
+内未标记可恢复的非耕地组织核查，根据农业生产现状和对耕作层的
+影响程度进行认定，能恢复粮食作物生产的，5 年内恢复；确实不能
+恢复的，在核实整改工作中调出永久基本农田，并按要求补划。
+
+      3. 城镇开发边界线
+      依据城镇建设适宜性评价结果划定城镇开发边界线，但还需参考
+行政区域和三调成果进行校验和优化调整。
+      （1）控制底线
+      依据生态、农业、城镇评价结果，明确不能划入城镇开发边界线
+内的区域，如生态保护红线、永久基本农田、水源地、灾害易发生区、
+其他各类禁止建设区域等，在适宜进行城镇建设开发的地域空间合理
+划定。
+      （2）初始边界线生产
+      结合城镇定位、发展方向和最大城镇建设用地承载规模，科学研
+判城镇发展合理需求，优化城镇形态和布局，落实上级国土空间规划
+规模指标要求，划定初始的城镇开发边界。
+      （3）边界校核
+      城镇开发边界避让生态保护红线、永久基本农田，协调三条红线
+的矛盾图斑，校核城镇开发边界。
+
+                                                                   196
+    （五）国土空间格局优化建议
+
+      1. 生态空间优化
+      将生态保护红线范围，生态极重要区范围，以及现状林地、草地、
+湿地、水域等生态用地划入生态空间。
+      位于生态极重要区内的农业用地或建设用地，结合整体生态安全
+格局实施退耕还林、土地整治、生态修复等方式恢复生态功能。
+
+      2. 农业空间优化
+      将位于生态保护极重要区和生态保护红线以外的永久基本农田
+划入永久基本农田保护区。
+      依据农业生产适宜性评价结果，将农村居民点、农业生产用地划
+入农业农村发展区，结合土地综合整治工作，优化农业空间格局。
+
+      3. 城镇空间优化
+      依据城镇建设适宜性评价结果，结合新型城镇化体系与空间布局
+研究、城镇用地规模预测、产业布局等研究，划定城镇空间。
+    （六）重大工程安排建议
+
+      1. 生态修复
+      通辽市生态保护极重要区与现状耕地、城镇建设用地的冲突区域，
+建议根据实际情况制定退耕还林和生态修复计划，按时按量实施。
+      生态保护极重要区内生态安全屏障脆弱区进行修复治疗，生态服
+务功能低效区进行提升保护。
+      结合生态环境现状，有针对性地实施矿山环境治理、污染土地治
+理、水土保持与植被修复、沙漠沙地防治、退耕退牧还林还草、三北
+防护林建设、引绰济辽、地下水漏斗修复、水源地治理等重点工程。
+
+                                                                   197
+      2. 土地综合整治
+      通辽市农业生产不适宜性区内耕地和城镇建设不适宜区内的冲
+突地块，建议根据实际情况制定整治计划，按时按量实施。
+      建议以乡镇苏木为单元，针对农业生产效率不高、农村建设用地
+粗放、人居环境不优等问题，有针对性地实施高标准农田建设、城镇
+低效用地在开发、农牧区人居环境整治等整治工程，优化生产、生活、
+生态空间格局。
+    （七）高质量发展引导性建议
+
+      1.以资源承载力为基础，确定城镇发展重点区域，合理调整城镇
+和产业布局
+
+      选择区位条件优越、发展基础好、潜力大的沿重要河流和交通干
+线的城镇作为发展重点区域，形成聚集效益和区域竞争优势。根据水
+资源、矿产资源、土地资源承载力的差异，应及时调整城镇发展布局
+和产业布局，根据资源禀赋实现市域产业结构空间布局调整，引导产
+业升级换代。
+
+      2.改善区域资源环境短板要素，增强生态环境的承载能力
+      当前影响通辽市资源环境承载力的关键因素是水资源和防风固
+沙等生态因素，对经济社会发展造成较大制约。因此，各旗县应从区
+域主要限制性因素出发提升资源环境综合承载力。
+      大力推进水源工程和节水工程建设，尽可能满足经济社会发展用
+水需求。在高效节水、科学用水、区域调水的措施下，狠抓节水工程、
+节水技术、节水制度，大力提高工农业用水的重复利用率。提高区域
+各行业的节水水平，提高水资源利用效率；提高污水的利用率，利用
+中水回用于工业、生态用水等；加大农业节水措施，结余水量用于解
+决新增灌溉面积，同时为建设开发和生态建设提供水资源。加大科尔
+
+                                                                   198
+沁沙地治理，将不适宜耕种的耕地逐步退耕还林还草，加强草场休牧
+禁牧管理力度，逐步改善沙地生态环境。
+
+      3.合理调整农业结构，加强土地整治投入
+      通辽市作为内蒙古自治区的产粮大市，年产粮食约占自治区的
+30%，在满足自治区粮食需求的基础上，能为国家粮食安全做出一定
+的贡献，农牧业在通辽市占有重要的地位。同时，作为北方重要的生
+态屏障，通辽市要加强科尔沁沙地整治，防风固沙的任务责任艰巨。
+因此，由于生态建设的原因，部分质量较低的不稳定耕地应及时退出，
+同时，需进一步提高耕地质量，提升土地资源人口承载能力。
+
+                                                                   199
+

src/assets/font/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/font/demo_index.htm

@@ -0,0 +1,1476 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2744051" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">书</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe602;</span>
+                <div class="name">气 风</div>
+                <div class="code-name">&amp;#xe602;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe603;</span>
+                <div class="name">审核 查找</div>
+                <div class="code-name">&amp;#xe603;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe604;</span>
+                <div class="name">土</div>
+                <div class="code-name">&amp;#xe604;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe605;</span>
+                <div class="name">烧杯</div>
+                <div class="code-name">&amp;#xe605;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe606;</span>
+                <div class="name">数据 饼图</div>
+                <div class="code-name">&amp;#xe606;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe607;</span>
+                <div class="name">锥形瓶</div>
+                <div class="code-name">&amp;#xe607;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe608;</span>
+                <div class="name">噪音</div>
+                <div class="code-name">&amp;#xe608;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe609;</span>
+                <div class="name">注意 预警</div>
+                <div class="code-name">&amp;#xe609;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60a;</span>
+                <div class="name">生态 自然</div>
+                <div class="code-name">&amp;#xe60a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60b;</span>
+                <div class="name">烧瓶</div>
+                <div class="code-name">&amp;#xe60b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60c;</span>
+                <div class="name">分析 预报</div>
+                <div class="code-name">&amp;#xe60c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60d;</span>
+                <div class="name">心 爱</div>
+                <div class="code-name">&amp;#xe60d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60e;</span>
+                <div class="name">地球 环保</div>
+                <div class="code-name">&amp;#xe60e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60f;</span>
+                <div class="name">大气</div>
+                <div class="code-name">&amp;#xe60f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe610;</span>
+                <div class="name">移动监测 车</div>
+                <div class="code-name">&amp;#xe610;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe611;</span>
+                <div class="name">数据 折线图</div>
+                <div class="code-name">&amp;#xe611;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe612;</span>
+                <div class="name">水</div>
+                <div class="code-name">&amp;#xe612;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe613;</span>
+                <div class="name">环境</div>
+                <div class="code-name">&amp;#xe613;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe614;</span>
+                <div class="name">审批 公章 加密</div>
+                <div class="code-name">&amp;#xe614;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe615;</span>
+                <div class="name">目标 旗子</div>
+                <div class="code-name">&amp;#xe615;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe616;</span>
+                <div class="name">轨迹</div>
+                <div class="code-name">&amp;#xe616;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe617;</span>
+                <div class="name">参数 设置</div>
+                <div class="code-name">&amp;#xe617;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe618;</span>
+                <div class="name">任务 清单</div>
+                <div class="code-name">&amp;#xe618;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe619;</span>
+                <div class="name">法规 天平</div>
+                <div class="code-name">&amp;#xe619;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61a;</span>
+                <div class="name">垃圾</div>
+                <div class="code-name">&amp;#xe61a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61b;</span>
+                <div class="name">办公 现场报送</div>
+                <div class="code-name">&amp;#xe61b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61c;</span>
+                <div class="name">在线 仪器</div>
+                <div class="code-name">&amp;#xe61c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61d;</span>
+                <div class="name">第三方 检测机构</div>
+                <div class="code-name">&amp;#xe61d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61e;</span>
+                <div class="name">室内卫生 环境美化</div>
+                <div class="code-name">&amp;#xe61e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61f;</span>
+                <div class="name">文档 信息</div>
+                <div class="code-name">&amp;#xe61f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe620;</span>
+                <div class="name">传递 发送</div>
+                <div class="code-name">&amp;#xe620;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe621;</span>
+                <div class="name">版本 软件</div>
+                <div class="code-name">&amp;#xe621;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe622;</span>
+                <div class="name">单位 建筑</div>
+                <div class="code-name">&amp;#xe622;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe623;</span>
+                <div class="name">监控 监视</div>
+                <div class="code-name">&amp;#xe623;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe624;</span>
+                <div class="name">结构 组织 机构</div>
+                <div class="code-name">&amp;#xe624;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe625;</span>
+                <div class="name">信息采集 人员</div>
+                <div class="code-name">&amp;#xe625;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe626;</span>
+                <div class="name">经济 收益</div>
+                <div class="code-name">&amp;#xe626;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe627;</span>
+                <div class="name">绿色 叶子 节能</div>
+                <div class="code-name">&amp;#xe627;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe628;</span>
+                <div class="name">人员 组织</div>
+                <div class="code-name">&amp;#xe628;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe629;</span>
+                <div class="name">珍稀动物 熊猫</div>
+                <div class="code-name">&amp;#xe629;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62a;</span>
+                <div class="name">金属 晶体</div>
+                <div class="code-name">&amp;#xe62a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62b;</span>
+                <div class="name">未赞 拳</div>
+                <div class="code-name">&amp;#xe62b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62c;</span>
+                <div class="name">扫 二维码</div>
+                <div class="code-name">&amp;#xe62c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62d;</span>
+                <div class="name">赞 手</div>
+                <div class="code-name">&amp;#xe62d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62e;</span>
+                <div class="name">沟通 留言</div>
+                <div class="code-name">&amp;#xe62e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62f;</span>
+                <div class="name">我 人 职工</div>
+                <div class="code-name">&amp;#xe62f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe630;</span>
+                <div class="name">锅 厨余</div>
+                <div class="code-name">&amp;#xe630;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe631;</span>
+                <div class="name">房子 首页</div>
+                <div class="code-name">&amp;#xe631;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe632;</span>
+                <div class="name">咖啡 面谈</div>
+                <div class="code-name">&amp;#xe632;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe633;</span>
+                <div class="name">手机 上传</div>
+                <div class="code-name">&amp;#xe633;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe634;</span>
+                <div class="name">icon_监管任务统计分析</div>
+                <div class="code-name">&amp;#xe634;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe635;</span>
+                <div class="name">icon_环境统计</div>
+                <div class="code-name">&amp;#xe635;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe636;</span>
+                <div class="name">icon_污染源一企一档</div>
+                <div class="code-name">&amp;#xe636;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe637;</span>
+                <div class="name">icon_在线监测-38</div>
+                <div class="code-name">&amp;#xe637;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe638;</span>
+                <div class="name">icon_在线监测-58</div>
+                <div class="code-name">&amp;#xe638;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1628856475701') format('woff2'),
+       url('iconfont.woff?t=1628856475701') format('woff'),
+       url('iconfont.ttf?t=1628856475701') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-"></span>
+            <div class="name">
+              书
+            </div>
+            <div class="code-name">.icon-tubiao-
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-1"></span>
+            <div class="name">
+              气 风
+            </div>
+            <div class="code-name">.icon-tubiao-1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-2"></span>
+            <div class="name">
+              审核 查找
+            </div>
+            <div class="code-name">.icon-tubiao-2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-3"></span>
+            <div class="name">
+              土
+            </div>
+            <div class="code-name">.icon-tubiao-3
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-4"></span>
+            <div class="name">
+              烧杯
+            </div>
+            <div class="code-name">.icon-tubiao-4
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-5"></span>
+            <div class="name">
+              数据 饼图
+            </div>
+            <div class="code-name">.icon-tubiao-5
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-6"></span>
+            <div class="name">
+              锥形瓶
+            </div>
+            <div class="code-name">.icon-tubiao-6
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-7"></span>
+            <div class="name">
+              噪音
+            </div>
+            <div class="code-name">.icon-tubiao-7
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-8"></span>
+            <div class="name">
+              注意 预警
+            </div>
+            <div class="code-name">.icon-tubiao-8
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-9"></span>
+            <div class="name">
+              生态 自然
+            </div>
+            <div class="code-name">.icon-tubiao-9
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-10"></span>
+            <div class="name">
+              烧瓶
+            </div>
+            <div class="code-name">.icon-tubiao-10
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-11"></span>
+            <div class="name">
+              分析 预报
+            </div>
+            <div class="code-name">.icon-tubiao-11
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-12"></span>
+            <div class="name">
+              心 爱
+            </div>
+            <div class="code-name">.icon-tubiao-12
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-13"></span>
+            <div class="name">
+              地球 环保
+            </div>
+            <div class="code-name">.icon-tubiao-13
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-14"></span>
+            <div class="name">
+              大气
+            </div>
+            <div class="code-name">.icon-tubiao-14
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-15"></span>
+            <div class="name">
+              移动监测 车
+            </div>
+            <div class="code-name">.icon-tubiao-15
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-16"></span>
+            <div class="name">
+              数据 折线图
+            </div>
+            <div class="code-name">.icon-tubiao-16
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-17"></span>
+            <div class="name">
+              水
+            </div>
+            <div class="code-name">.icon-tubiao-17
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-18"></span>
+            <div class="name">
+              环境
+            </div>
+            <div class="code-name">.icon-tubiao-18
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-19"></span>
+            <div class="name">
+              审批 公章 加密
+            </div>
+            <div class="code-name">.icon-tubiao-19
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-20"></span>
+            <div class="name">
+              目标 旗子
+            </div>
+            <div class="code-name">.icon-tubiao-20
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-21"></span>
+            <div class="name">
+              轨迹
+            </div>
+            <div class="code-name">.icon-tubiao-21
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-22"></span>
+            <div class="name">
+              参数 设置
+            </div>
+            <div class="code-name">.icon-tubiao-22
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-23"></span>
+            <div class="name">
+              任务 清单
+            </div>
+            <div class="code-name">.icon-tubiao-23
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-24"></span>
+            <div class="name">
+              法规 天平
+            </div>
+            <div class="code-name">.icon-tubiao-24
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-25"></span>
+            <div class="name">
+              垃圾
+            </div>
+            <div class="code-name">.icon-tubiao-25
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-26"></span>
+            <div class="name">
+              办公 现场报送
+            </div>
+            <div class="code-name">.icon-tubiao-26
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-27"></span>
+            <div class="name">
+              在线 仪器
+            </div>
+            <div class="code-name">.icon-tubiao-27
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-28"></span>
+            <div class="name">
+              第三方 检测机构
+            </div>
+            <div class="code-name">.icon-tubiao-28
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-29"></span>
+            <div class="name">
+              室内卫生 环境美化
+            </div>
+            <div class="code-name">.icon-tubiao-29
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-30"></span>
+            <div class="name">
+              文档 信息
+            </div>
+            <div class="code-name">.icon-tubiao-30
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-31"></span>
+            <div class="name">
+              传递 发送
+            </div>
+            <div class="code-name">.icon-tubiao-31
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-32"></span>
+            <div class="name">
+              版本 软件
+            </div>
+            <div class="code-name">.icon-tubiao-32
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-33"></span>
+            <div class="name">
+              单位 建筑
+            </div>
+            <div class="code-name">.icon-tubiao-33
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-34"></span>
+            <div class="name">
+              监控 监视
+            </div>
+            <div class="code-name">.icon-tubiao-34
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-35"></span>
+            <div class="name">
+              结构 组织 机构
+            </div>
+            <div class="code-name">.icon-tubiao-35
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-36"></span>
+            <div class="name">
+              信息采集 人员
+            </div>
+            <div class="code-name">.icon-tubiao-36
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-37"></span>
+            <div class="name">
+              经济 收益
+            </div>
+            <div class="code-name">.icon-tubiao-37
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-38"></span>
+            <div class="name">
+              绿色 叶子 节能
+            </div>
+            <div class="code-name">.icon-tubiao-38
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-39"></span>
+            <div class="name">
+              人员 组织
+            </div>
+            <div class="code-name">.icon-tubiao-39
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-40"></span>
+            <div class="name">
+              珍稀动物 熊猫
+            </div>
+            <div class="code-name">.icon-tubiao-40
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-41"></span>
+            <div class="name">
+              金属 晶体
+            </div>
+            <div class="code-name">.icon-tubiao-41
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-42"></span>
+            <div class="name">
+              未赞 拳
+            </div>
+            <div class="code-name">.icon-tubiao-42
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-43"></span>
+            <div class="name">
+              扫 二维码
+            </div>
+            <div class="code-name">.icon-tubiao-43
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-44"></span>
+            <div class="name">
+              赞 手
+            </div>
+            <div class="code-name">.icon-tubiao-44
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-45"></span>
+            <div class="name">
+              沟通 留言
+            </div>
+            <div class="code-name">.icon-tubiao-45
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-46"></span>
+            <div class="name">
+              我 人 职工
+            </div>
+            <div class="code-name">.icon-tubiao-46
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-47"></span>
+            <div class="name">
+              锅 厨余
+            </div>
+            <div class="code-name">.icon-tubiao-47
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-48"></span>
+            <div class="name">
+              房子 首页
+            </div>
+            <div class="code-name">.icon-tubiao-48
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao-49"></span>
+            <div class="name">
+              咖啡 面谈
+            </div>
+            <div class="code-name">.icon-tubiao-49
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-ziyuan"></span>
+            <div class="name">
+              手机 上传
+            </div>
+            <div class="code-name">.icon-ziyuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-icon_jianguanrenwutongjifenxi"></span>
+            <div class="name">
+              icon_监管任务统计分析
+            </div>
+            <div class="code-name">.icon-icon_jianguanrenwutongjifenxi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-icon_huanjingtongji"></span>
+            <div class="name">
+              icon_环境统计
+            </div>
+            <div class="code-name">.icon-icon_huanjingtongji
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-icon_wuranyuanyiqiyidang"></span>
+            <div class="name">
+              icon_污染源一企一档
+            </div>
+            <div class="code-name">.icon-icon_wuranyuanyiqiyidang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-icon_zaixianjiance-38"></span>
+            <div class="name">
+              icon_在线监测-38
+            </div>
+            <div class="code-name">.icon-icon_zaixianjiance-38
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-icon_zaixianjiance-58"></span>
+            <div class="name">
+              icon_在线监测-58
+            </div>
+            <div class="code-name">.icon-icon_zaixianjiance-58
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-"></use>
+                </svg>
+                <div class="name">书</div>
+                <div class="code-name">#icon-tubiao-</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-1"></use>
+                </svg>
+                <div class="name">气 风</div>
+                <div class="code-name">#icon-tubiao-1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-2"></use>
+                </svg>
+                <div class="name">审核 查找</div>
+                <div class="code-name">#icon-tubiao-2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-3"></use>
+                </svg>
+                <div class="name">土</div>
+                <div class="code-name">#icon-tubiao-3</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-4"></use>
+                </svg>
+                <div class="name">烧杯</div>
+                <div class="code-name">#icon-tubiao-4</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-5"></use>
+                </svg>
+                <div class="name">数据 饼图</div>
+                <div class="code-name">#icon-tubiao-5</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-6"></use>
+                </svg>
+                <div class="name">锥形瓶</div>
+                <div class="code-name">#icon-tubiao-6</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-7"></use>
+                </svg>
+                <div class="name">噪音</div>
+                <div class="code-name">#icon-tubiao-7</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-8"></use>
+                </svg>
+                <div class="name">注意 预警</div>
+                <div class="code-name">#icon-tubiao-8</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-9"></use>
+                </svg>
+                <div class="name">生态 自然</div>
+                <div class="code-name">#icon-tubiao-9</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-10"></use>
+                </svg>
+                <div class="name">烧瓶</div>
+                <div class="code-name">#icon-tubiao-10</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-11"></use>
+                </svg>
+                <div class="name">分析 预报</div>
+                <div class="code-name">#icon-tubiao-11</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-12"></use>
+                </svg>
+                <div class="name">心 爱</div>
+                <div class="code-name">#icon-tubiao-12</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-13"></use>
+                </svg>
+                <div class="name">地球 环保</div>
+                <div class="code-name">#icon-tubiao-13</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-14"></use>
+                </svg>
+                <div class="name">大气</div>
+                <div class="code-name">#icon-tubiao-14</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-15"></use>
+                </svg>
+                <div class="name">移动监测 车</div>
+                <div class="code-name">#icon-tubiao-15</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-16"></use>
+                </svg>
+                <div class="name">数据 折线图</div>
+                <div class="code-name">#icon-tubiao-16</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-17"></use>
+                </svg>
+                <div class="name">水</div>
+                <div class="code-name">#icon-tubiao-17</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-18"></use>
+                </svg>
+                <div class="name">环境</div>
+                <div class="code-name">#icon-tubiao-18</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-19"></use>
+                </svg>
+                <div class="name">审批 公章 加密</div>
+                <div class="code-name">#icon-tubiao-19</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-20"></use>
+                </svg>
+                <div class="name">目标 旗子</div>
+                <div class="code-name">#icon-tubiao-20</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-21"></use>
+                </svg>
+                <div class="name">轨迹</div>
+                <div class="code-name">#icon-tubiao-21</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-22"></use>
+                </svg>
+                <div class="name">参数 设置</div>
+                <div class="code-name">#icon-tubiao-22</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-23"></use>
+                </svg>
+                <div class="name">任务 清单</div>
+                <div class="code-name">#icon-tubiao-23</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-24"></use>
+                </svg>
+                <div class="name">法规 天平</div>
+                <div class="code-name">#icon-tubiao-24</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-25"></use>
+                </svg>
+                <div class="name">垃圾</div>
+                <div class="code-name">#icon-tubiao-25</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-26"></use>
+                </svg>
+                <div class="name">办公 现场报送</div>
+                <div class="code-name">#icon-tubiao-26</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-27"></use>
+                </svg>
+                <div class="name">在线 仪器</div>
+                <div class="code-name">#icon-tubiao-27</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-28"></use>
+                </svg>
+                <div class="name">第三方 检测机构</div>
+                <div class="code-name">#icon-tubiao-28</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-29"></use>
+                </svg>
+                <div class="name">室内卫生 环境美化</div>
+                <div class="code-name">#icon-tubiao-29</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-30"></use>
+                </svg>
+                <div class="name">文档 信息</div>
+                <div class="code-name">#icon-tubiao-30</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-31"></use>
+                </svg>
+                <div class="name">传递 发送</div>
+                <div class="code-name">#icon-tubiao-31</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-32"></use>
+                </svg>
+                <div class="name">版本 软件</div>
+                <div class="code-name">#icon-tubiao-32</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-33"></use>
+                </svg>
+                <div class="name">单位 建筑</div>
+                <div class="code-name">#icon-tubiao-33</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-34"></use>
+                </svg>
+                <div class="name">监控 监视</div>
+                <div class="code-name">#icon-tubiao-34</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-35"></use>
+                </svg>
+                <div class="name">结构 组织 机构</div>
+                <div class="code-name">#icon-tubiao-35</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-36"></use>
+                </svg>
+                <div class="name">信息采集 人员</div>
+                <div class="code-name">#icon-tubiao-36</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-37"></use>
+                </svg>
+                <div class="name">经济 收益</div>
+                <div class="code-name">#icon-tubiao-37</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-38"></use>
+                </svg>
+                <div class="name">绿色 叶子 节能</div>
+                <div class="code-name">#icon-tubiao-38</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-39"></use>
+                </svg>
+                <div class="name">人员 组织</div>
+                <div class="code-name">#icon-tubiao-39</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-40"></use>
+                </svg>
+                <div class="name">珍稀动物 熊猫</div>
+                <div class="code-name">#icon-tubiao-40</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-41"></use>
+                </svg>
+                <div class="name">金属 晶体</div>
+                <div class="code-name">#icon-tubiao-41</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-42"></use>
+                </svg>
+                <div class="name">未赞 拳</div>
+                <div class="code-name">#icon-tubiao-42</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-43"></use>
+                </svg>
+                <div class="name">扫 二维码</div>
+                <div class="code-name">#icon-tubiao-43</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-44"></use>
+                </svg>
+                <div class="name">赞 手</div>
+                <div class="code-name">#icon-tubiao-44</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-45"></use>
+                </svg>
+                <div class="name">沟通 留言</div>
+                <div class="code-name">#icon-tubiao-45</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-46"></use>
+                </svg>
+                <div class="name">我 人 职工</div>
+                <div class="code-name">#icon-tubiao-46</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-47"></use>
+                </svg>
+                <div class="name">锅 厨余</div>
+                <div class="code-name">#icon-tubiao-47</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-48"></use>
+                </svg>
+                <div class="name">房子 首页</div>
+                <div class="code-name">#icon-tubiao-48</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao-49"></use>
+                </svg>
+                <div class="name">咖啡 面谈</div>
+                <div class="code-name">#icon-tubiao-49</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-ziyuan"></use>
+                </svg>
+                <div class="name">手机 上传</div>
+                <div class="code-name">#icon-ziyuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-icon_jianguanrenwutongjifenxi"></use>
+                </svg>
+                <div class="name">icon_监管任务统计分析</div>
+                <div class="code-name">#icon-icon_jianguanrenwutongjifenxi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-icon_huanjingtongji"></use>
+                </svg>
+                <div class="name">icon_环境统计</div>
+                <div class="code-name">#icon-icon_huanjingtongji</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-icon_wuranyuanyiqiyidang"></use>
+                </svg>
+                <div class="name">icon_污染源一企一档</div>
+                <div class="code-name">#icon-icon_wuranyuanyiqiyidang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-icon_zaixianjiance-38"></use>
+                </svg>
+                <div class="name">icon_在线监测-38</div>
+                <div class="code-name">#icon-icon_zaixianjiance-38</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-icon_zaixianjiance-58"></use>
+                </svg>
+                <div class="name">icon_在线监测-58</div>
+                <div class="code-name">#icon-icon_zaixianjiance-58</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

src/assets/font/font.css

@@ -0,0 +1,6 @@
+@font-face {
+    font-family: 'SourceHanSans';
+    src: url('./default.ttf');
+    font-weight: normal;
+    font-style: normal;
+}

src/assets/font/iconfont.css

@@ -0,0 +1,239 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 2744051 */
+  src: url('iconfont.woff2?t=1628856475701') format('woff2'),
+       url('iconfont.woff?t=1628856475701') format('woff'),
+       url('iconfont.ttf?t=1628856475701') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-tubiao-:before {
+  content: "\e601";
+}
+
+.icon-tubiao-1:before {
+  content: "\e602";
+}
+
+.icon-tubiao-2:before {
+  content: "\e603";
+}
+
+.icon-tubiao-3:before {
+  content: "\e604";
+}
+
+.icon-tubiao-4:before {
+  content: "\e605";
+}
+
+.icon-tubiao-5:before {
+  content: "\e606";
+}
+
+.icon-tubiao-6:before {
+  content: "\e607";
+}
+
+.icon-tubiao-7:before {
+  content: "\e608";
+}
+
+.icon-tubiao-8:before {
+  content: "\e609";
+}
+
+.icon-tubiao-9:before {
+  content: "\e60a";
+}
+
+.icon-tubiao-10:before {
+  content: "\e60b";
+}
+
+.icon-tubiao-11:before {
+  content: "\e60c";
+}
+
+.icon-tubiao-12:before {
+  content: "\e60d";
+}
+
+.icon-tubiao-13:before {
+  content: "\e60e";
+}
+
+.icon-tubiao-14:before {
+  content: "\e60f";
+}
+
+.icon-tubiao-15:before {
+  content: "\e610";
+}
+
+.icon-tubiao-16:before {
+  content: "\e611";
+}
+
+.icon-tubiao-17:before {
+  content: "\e612";
+}
+
+.icon-tubiao-18:before {
+  content: "\e613";
+}
+
+.icon-tubiao-19:before {
+  content: "\e614";
+}
+
+.icon-tubiao-20:before {
+  content: "\e615";
+}
+
+.icon-tubiao-21:before {
+  content: "\e616";
+}
+
+.icon-tubiao-22:before {
+  content: "\e617";
+}
+
+.icon-tubiao-23:before {
+  content: "\e618";
+}
+
+.icon-tubiao-24:before {
+  content: "\e619";
+}
+
+.icon-tubiao-25:before {
+  content: "\e61a";
+}
+
+.icon-tubiao-26:before {
+  content: "\e61b";
+}
+
+.icon-tubiao-27:before {
+  content: "\e61c";
+}
+
+.icon-tubiao-28:before {
+  content: "\e61d";
+}
+
+.icon-tubiao-29:before {
+  content: "\e61e";
+}
+
+.icon-tubiao-30:before {
+  content: "\e61f";
+}
+
+.icon-tubiao-31:before {
+  content: "\e620";
+}
+
+.icon-tubiao-32:before {
+  content: "\e621";
+}
+
+.icon-tubiao-33:before {
+  content: "\e622";
+}
+
+.icon-tubiao-34:before {
+  content: "\e623";
+}
+
+.icon-tubiao-35:before {
+  content: "\e624";
+}
+
+.icon-tubiao-36:before {
+  content: "\e625";
+}
+
+.icon-tubiao-37:before {
+  content: "\e626";
+}
+
+.icon-tubiao-38:before {
+  content: "\e627";
+}
+
+.icon-tubiao-39:before {
+  content: "\e628";
+}
+
+.icon-tubiao-40:before {
+  content: "\e629";
+}
+
+.icon-tubiao-41:before {
+  content: "\e62a";
+}
+
+.icon-tubiao-42:before {
+  content: "\e62b";
+}
+
+.icon-tubiao-43:before {
+  content: "\e62c";
+}
+
+.icon-tubiao-44:before {
+  content: "\e62d";
+}
+
+.icon-tubiao-45:before {
+  content: "\e62e";
+}
+
+.icon-tubiao-46:before {
+  content: "\e62f";
+}
+
+.icon-tubiao-47:before {
+  content: "\e630";
+}
+
+.icon-tubiao-48:before {
+  content: "\e631";
+}
+
+.icon-tubiao-49:before {
+  content: "\e632";
+}
+
+.icon-ziyuan:before {
+  content: "\e633";
+}
+
+.icon-icon_jianguanrenwutongjifenxi:before {
+  content: "\e634";
+}
+
+.icon-icon_huanjingtongji:before {
+  content: "\e635";
+}
+
+.icon-icon_wuranyuanyiqiyidang:before {
+  content: "\e636";
+}
+
+.icon-icon_zaixianjiance-38:before {
+  content: "\e637";
+}
+
+.icon-icon_zaixianjiance-58:before {
+  content: "\e638";
+}
+

src/assets/font/iconfont.json

@@ -0,0 +1,401 @@
+{
+  "id": "2744051",
+  "name": "领导驾驶舱",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "11365013",
+      "name": "书",
+      "font_class": "tubiao-",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "11365014",
+      "name": "气 风",
+      "font_class": "tubiao-1",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "11365015",
+      "name": "审核 查找",
+      "font_class": "tubiao-2",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "11365016",
+      "name": "土",
+      "font_class": "tubiao-3",
+      "unicode": "e604",
+      "unicode_decimal": 58884
+    },
+    {
+      "icon_id": "11365017",
+      "name": "烧杯",
+      "font_class": "tubiao-4",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "11365018",
+      "name": "数据 饼图",
+      "font_class": "tubiao-5",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    },
+    {
+      "icon_id": "11365019",
+      "name": "锥形瓶",
+      "font_class": "tubiao-6",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "11365020",
+      "name": "噪音",
+      "font_class": "tubiao-7",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "11365021",
+      "name": "注意 预警",
+      "font_class": "tubiao-8",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    },
+    {
+      "icon_id": "11365022",
+      "name": "生态 自然",
+      "font_class": "tubiao-9",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
+      "icon_id": "11365023",
+      "name": "烧瓶",
+      "font_class": "tubiao-10",
+      "unicode": "e60b",
+      "unicode_decimal": 58891
+    },
+    {
+      "icon_id": "11365024",
+      "name": "分析 预报",
+      "font_class": "tubiao-11",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "11365025",
+      "name": "心 爱",
+      "font_class": "tubiao-12",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
+    {
+      "icon_id": "11365026",
+      "name": "地球 环保",
+      "font_class": "tubiao-13",
+      "unicode": "e60e",
+      "unicode_decimal": 58894
+    },
+    {
+      "icon_id": "11365027",
+      "name": "大气",
+      "font_class": "tubiao-14",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
+    },
+    {
+      "icon_id": "11365028",
+      "name": "移动监测 车",
+      "font_class": "tubiao-15",
+      "unicode": "e610",
+      "unicode_decimal": 58896
+    },
+    {
+      "icon_id": "11365029",
+      "name": "数据 折线图",
+      "font_class": "tubiao-16",
+      "unicode": "e611",
+      "unicode_decimal": 58897
+    },
+    {
+      "icon_id": "11365030",
+      "name": "水",
+      "font_class": "tubiao-17",
+      "unicode": "e612",
+      "unicode_decimal": 58898
+    },
+    {
+      "icon_id": "11365031",
+      "name": "环境",
+      "font_class": "tubiao-18",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
+    {
+      "icon_id": "11366424",
+      "name": "审批 公章 加密",
+      "font_class": "tubiao-19",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "11366425",
+      "name": "目标 旗子",
+      "font_class": "tubiao-20",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "11366426",
+      "name": "轨迹",
+      "font_class": "tubiao-21",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "11366427",
+      "name": "参数 设置",
+      "font_class": "tubiao-22",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
+    {
+      "icon_id": "11366428",
+      "name": "任务 清单",
+      "font_class": "tubiao-23",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    },
+    {
+      "icon_id": "11366429",
+      "name": "法规 天平",
+      "font_class": "tubiao-24",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "11366430",
+      "name": "垃圾",
+      "font_class": "tubiao-25",
+      "unicode": "e61a",
+      "unicode_decimal": 58906
+    },
+    {
+      "icon_id": "11366431",
+      "name": "办公 现场报送",
+      "font_class": "tubiao-26",
+      "unicode": "e61b",
+      "unicode_decimal": 58907
+    },
+    {
+      "icon_id": "11366432",
+      "name": "在线 仪器",
+      "font_class": "tubiao-27",
+      "unicode": "e61c",
+      "unicode_decimal": 58908
+    },
+    {
+      "icon_id": "11366433",
+      "name": "第三方 检测机构",
+      "font_class": "tubiao-28",
+      "unicode": "e61d",
+      "unicode_decimal": 58909
+    },
+    {
+      "icon_id": "11366434",
+      "name": "室内卫生 环境美化",
+      "font_class": "tubiao-29",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "11366435",
+      "name": "文档 信息",
+      "font_class": "tubiao-30",
+      "unicode": "e61f",
+      "unicode_decimal": 58911
+    },
+    {
+      "icon_id": "11366436",
+      "name": "传递 发送",
+      "font_class": "tubiao-31",
+      "unicode": "e620",
+      "unicode_decimal": 58912
+    },
+    {
+      "icon_id": "11366437",
+      "name": "版本 软件",
+      "font_class": "tubiao-32",
+      "unicode": "e621",
+      "unicode_decimal": 58913
+    },
+    {
+      "icon_id": "11366438",
+      "name": "单位 建筑",
+      "font_class": "tubiao-33",
+      "unicode": "e622",
+      "unicode_decimal": 58914
+    },
+    {
+      "icon_id": "11366439",
+      "name": "监控 监视",
+      "font_class": "tubiao-34",
+      "unicode": "e623",
+      "unicode_decimal": 58915
+    },
+    {
+      "icon_id": "11366440",
+      "name": "结构 组织 机构",
+      "font_class": "tubiao-35",
+      "unicode": "e624",
+      "unicode_decimal": 58916
+    },
+    {
+      "icon_id": "11366441",
+      "name": "信息采集 人员",
+      "font_class": "tubiao-36",
+      "unicode": "e625",
+      "unicode_decimal": 58917
+    },
+    {
+      "icon_id": "11366442",
+      "name": "经济 收益",
+      "font_class": "tubiao-37",
+      "unicode": "e626",
+      "unicode_decimal": 58918
+    },
+    {
+      "icon_id": "11366443",
+      "name": "绿色 叶子 节能",
+      "font_class": "tubiao-38",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
+    {
+      "icon_id": "11366444",
+      "name": "人员 组织",
+      "font_class": "tubiao-39",
+      "unicode": "e628",
+      "unicode_decimal": 58920
+    },
+    {
+      "icon_id": "11390279",
+      "name": "珍稀动物 熊猫",
+      "font_class": "tubiao-40",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "11390281",
+      "name": "金属 晶体",
+      "font_class": "tubiao-41",
+      "unicode": "e62a",
+      "unicode_decimal": 58922
+    },
+    {
+      "icon_id": "11391118",
+      "name": "未赞 拳",
+      "font_class": "tubiao-42",
+      "unicode": "e62b",
+      "unicode_decimal": 58923
+    },
+    {
+      "icon_id": "11391119",
+      "name": "扫 二维码",
+      "font_class": "tubiao-43",
+      "unicode": "e62c",
+      "unicode_decimal": 58924
+    },
+    {
+      "icon_id": "11391120",
+      "name": "赞 手",
+      "font_class": "tubiao-44",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
+    },
+    {
+      "icon_id": "11436330",
+      "name": "沟通 留言",
+      "font_class": "tubiao-45",
+      "unicode": "e62e",
+      "unicode_decimal": 58926
+    },
+    {
+      "icon_id": "11436331",
+      "name": "我 人 职工",
+      "font_class": "tubiao-46",
+      "unicode": "e62f",
+      "unicode_decimal": 58927
+    },
+    {
+      "icon_id": "11436332",
+      "name": "锅 厨余",
+      "font_class": "tubiao-47",
+      "unicode": "e630",
+      "unicode_decimal": 58928
+    },
+    {
+      "icon_id": "11436333",
+      "name": "房子 首页",
+      "font_class": "tubiao-48",
+      "unicode": "e631",
+      "unicode_decimal": 58929
+    },
+    {
+      "icon_id": "11436334",
+      "name": "咖啡 面谈",
+      "font_class": "tubiao-49",
+      "unicode": "e632",
+      "unicode_decimal": 58930
+    },
+    {
+      "icon_id": "12561525",
+      "name": "手机 上传",
+      "font_class": "ziyuan",
+      "unicode": "e633",
+      "unicode_decimal": 58931
+    },
+    {
+      "icon_id": "23442208",
+      "name": "icon_监管任务统计分析",
+      "font_class": "icon_jianguanrenwutongjifenxi",
+      "unicode": "e634",
+      "unicode_decimal": 58932
+    },
+    {
+      "icon_id": "23442228",
+      "name": "icon_环境统计",
+      "font_class": "icon_huanjingtongji",
+      "unicode": "e635",
+      "unicode_decimal": 58933
+    },
+    {
+      "icon_id": "23442241",
+      "name": "icon_污染源一企一档",
+      "font_class": "icon_wuranyuanyiqiyidang",
+      "unicode": "e636",
+      "unicode_decimal": 58934
+    },
+    {
+      "icon_id": "23442257",
+      "name": "icon_在线监测-38",
+      "font_class": "icon_zaixianjiance-38",
+      "unicode": "e637",
+      "unicode_decimal": 58935
+    },
+    {
+      "icon_id": "23442258",
+      "name": "icon_在线监测-58",
+      "font_class": "icon_zaixianjiance-58",
+      "unicode": "e638",
+      "unicode_decimal": 58936
+    }
+  ]
+}

src/assets/icon/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/icon/demo_index.html

@@ -0,0 +1,2120 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2669438" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xede8;</span>
+                <div class="name">全球</div>
+                <div class="code-name">&amp;#xede8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xed9a;</span>
+                <div class="name">点</div>
+                <div class="code-name">&amp;#xed9a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xed9c;</span>
+                <div class="name">线</div>
+                <div class="code-name">&amp;#xed9c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xedb0;</span>
+                <div class="name">选线距离</div>
+                <div class="code-name">&amp;#xedb0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe606;</span>
+                <div class="name">测面积</div>
+                <div class="code-name">&amp;#xe606;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe758;</span>
+                <div class="name">信息</div>
+                <div class="code-name">&amp;#xe758;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7dd;</span>
+                <div class="name">对比</div>
+                <div class="code-name">&amp;#xe7dd;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xee26;</span>
+                <div class="name">地图卷帘</div>
+                <div class="code-name">&amp;#xee26;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe618;</span>
+                <div class="name">星星 选中状态</div>
+                <div class="code-name">&amp;#xe618;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68a;</span>
+                <div class="name">023图层</div>
+                <div class="code-name">&amp;#xe68a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7be;</span>
+                <div class="name">042图片</div>
+                <div class="code-name">&amp;#xe7be;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe623;</span>
+                <div class="name">批量框选</div>
+                <div class="code-name">&amp;#xe623;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62c;</span>
+                <div class="name">分析</div>
+                <div class="code-name">&amp;#xe62c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe635;</span>
+                <div class="name">刷新</div>
+                <div class="code-name">&amp;#xe635;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe608;</span>
+                <div class="name">进度追踪</div>
+                <div class="code-name">&amp;#xe608;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe612;</span>
+                <div class="name">智慧规划</div>
+                <div class="code-name">&amp;#xe612;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe613;</span>
+                <div class="name">规划</div>
+                <div class="code-name">&amp;#xe613;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe617;</span>
+                <div class="name">更多</div>
+                <div class="code-name">&amp;#xe617;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe605;</span>
+                <div class="name">测面</div>
+                <div class="code-name">&amp;#xe605;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe637;</span>
+                <div class="name">办公地址</div>
+                <div class="code-name">&amp;#xe637;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe603;</span>
+                <div class="name">103_项目管理</div>
+                <div class="code-name">&amp;#xe603;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe92e;</span>
+                <div class="name">ico_医生工作站_魅力检测</div>
+                <div class="code-name">&amp;#xe92e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe640;</span>
+                <div class="name">用户</div>
+                <div class="code-name">&amp;#xe640;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">地图</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6a1;</span>
+                <div class="name">审核</div>
+                <div class="code-name">&amp;#xe6a1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe709;</span>
+                <div class="name">分析</div>
+                <div class="code-name">&amp;#xe709;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe63d;</span>
+                <div class="name">模型</div>
+                <div class="code-name">&amp;#xe63d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe654;</span>
+                <div class="name">项目监控</div>
+                <div class="code-name">&amp;#xe654;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe72e;</span>
+                <div class="name">技术成果</div>
+                <div class="code-name">&amp;#xe72e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7b9;</span>
+                <div class="name">043菜单</div>
+                <div class="code-name">&amp;#xe7b9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7ba;</span>
+                <div class="name">043立方体</div>
+                <div class="code-name">&amp;#xe7ba;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7bb;</span>
+                <div class="name">043指南针</div>
+                <div class="code-name">&amp;#xe7bb;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7bc;</span>
+                <div class="name">042地图</div>
+                <div class="code-name">&amp;#xe7bc;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7bd;</span>
+                <div class="name">042方块</div>
+                <div class="code-name">&amp;#xe7bd;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7bf;</span>
+                <div class="name">041星星</div>
+                <div class="code-name">&amp;#xe7bf;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7c2;</span>
+                <div class="name">039手</div>
+                <div class="code-name">&amp;#xe7c2;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7c8;</span>
+                <div class="name">030位置-4</div>
+                <div class="code-name">&amp;#xe7c8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7d4;</span>
+                <div class="name">026乘</div>
+                <div class="code-name">&amp;#xe7d4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7d5;</span>
+                <div class="name">026对勾</div>
+                <div class="code-name">&amp;#xe7d5;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7d6;</span>
+                <div class="name">026减</div>
+                <div class="code-name">&amp;#xe7d6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7d7;</span>
+                <div class="name">026加</div>
+                <div class="code-name">&amp;#xe7d7;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7d9;</span>
+                <div class="name">024下载</div>
+                <div class="code-name">&amp;#xe7d9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7da;</span>
+                <div class="name">024上传</div>
+                <div class="code-name">&amp;#xe7da;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7db;</span>
+                <div class="name">023网络-2</div>
+                <div class="code-name">&amp;#xe7db;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7dc;</span>
+                <div class="name">022工具</div>
+                <div class="code-name">&amp;#xe7dc;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7de;</span>
+                <div class="name">021抽屉</div>
+                <div class="code-name">&amp;#xe7de;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7e1;</span>
+                <div class="name">020消息-2</div>
+                <div class="code-name">&amp;#xe7e1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7e6;</span>
+                <div class="name">019文件</div>
+                <div class="code-name">&amp;#xe7e6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7e7;</span>
+                <div class="name">019裁剪</div>
+                <div class="code-name">&amp;#xe7e7;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7e8;</span>
+                <div class="name">019复制</div>
+                <div class="code-name">&amp;#xe7e8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7ed;</span>
+                <div class="name">016放大镜</div>
+                <div class="code-name">&amp;#xe7ed;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7f3;</span>
+                <div class="name">013设置-1</div>
+                <div class="code-name">&amp;#xe7f3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7f8;</span>
+                <div class="name">011饼图</div>
+                <div class="code-name">&amp;#xe7f8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7f9;</span>
+                <div class="name">011数据图</div>
+                <div class="code-name">&amp;#xe7f9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe805;</span>
+                <div class="name">008对话框-5</div>
+                <div class="code-name">&amp;#xe805;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe816;</span>
+                <div class="name">003链接-3</div>
+                <div class="code-name">&amp;#xe816;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe824;</span>
+                <div class="name">001飞机-5</div>
+                <div class="code-name">&amp;#xe824;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6cd;</span>
+                <div class="name">不通过</div>
+                <div class="code-name">&amp;#xe6cd;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6ce;</span>
+                <div class="name">审核中</div>
+                <div class="code-name">&amp;#xe6ce;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6cf;</span>
+                <div class="name">已办结</div>
+                <div class="code-name">&amp;#xe6cf;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xed9b;</span>
+                <div class="name">文本</div>
+                <div class="code-name">&amp;#xed9b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xed9f;</span>
+                <div class="name">导入模型文件</div>
+                <div class="code-name">&amp;#xed9f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xeda2;</span>
+                <div class="name">对象范围面</div>
+                <div class="code-name">&amp;#xeda2;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xedb1;</span>
+                <div class="name">选面面积</div>
+                <div class="code-name">&amp;#xedb1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xedb4;</span>
+                <div class="name">缓冲区</div>
+                <div class="code-name">&amp;#xedb4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xedbb;</span>
+                <div class="name">地形修改模型</div>
+                <div class="code-name">&amp;#xedbb;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xedbd;</span>
+                <div class="name">BuildVolume</div>
+                <div class="code-name">&amp;#xedbd;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xedc2;</span>
+                <div class="name">叠加分析</div>
+                <div class="code-name">&amp;#xedc2;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xedc3;</span>
+                <div class="name">数据上传</div>
+                <div class="code-name">&amp;#xedc3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xedc4;</span>
+                <div class="name">数据下载</div>
+                <div class="code-name">&amp;#xedc4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xedc8;</span>
+                <div class="name">多边形选择</div>
+                <div class="code-name">&amp;#xedc8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xedca;</span>
+                <div class="name">地图网格</div>
+                <div class="code-name">&amp;#xedca;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xedda;</span>
+                <div class="name">圆心圆</div>
+                <div class="code-name">&amp;#xedda;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xede7;</span>
+                <div class="name">距离</div>
+                <div class="code-name">&amp;#xede7;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xedeb;</span>
+                <div class="name">线符号</div>
+                <div class="code-name">&amp;#xedeb;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xedf5;</span>
+                <div class="name">纸张方向</div>
+                <div class="code-name">&amp;#xedf5;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xedfc;</span>
+                <div class="name">地图</div>
+                <div class="code-name">&amp;#xedfc;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xedfd;</span>
+                <div class="name">指北针</div>
+                <div class="code-name">&amp;#xedfd;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xee07;</span>
+                <div class="name">等值线分析</div>
+                <div class="code-name">&amp;#xee07;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xee0a;</span>
+                <div class="name">刺点</div>
+                <div class="code-name">&amp;#xee0a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xee17;</span>
+                <div class="name">亮度</div>
+                <div class="code-name">&amp;#xee17;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xee1e;</span>
+                <div class="name">数据源</div>
+                <div class="code-name">&amp;#xee1e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xee23;</span>
+                <div class="name">原始信息管理</div>
+                <div class="code-name">&amp;#xee23;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xee2a;</span>
+                <div class="name">制图</div>
+                <div class="code-name">&amp;#xee2a;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1626254199004') format('woff2'),
+       url('iconfont.woff?t=1626254199004') format('woff'),
+       url('iconfont.ttf?t=1626254199004') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-quanqiu"></span>
+            <div class="name">
+              全球
+            </div>
+            <div class="code-name">.icon-quanqiu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dian"></span>
+            <div class="name">
+              点
+            </div>
+            <div class="code-name">.icon-dian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xian"></span>
+            <div class="name">
+              线
+            </div>
+            <div class="code-name">.icon-xian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xuanxianjuli"></span>
+            <div class="name">
+              选线距离
+            </div>
+            <div class="code-name">.icon-xuanxianjuli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-cemianji"></span>
+            <div class="name">
+              测面积
+            </div>
+            <div class="code-name">.icon-cemianji
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xinxiinformation38"></span>
+            <div class="name">
+              信息
+            </div>
+            <div class="code-name">.icon-xinxiinformation38
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zaixianduibiweijihuo"></span>
+            <div class="name">
+              对比
+            </div>
+            <div class="code-name">.icon-zaixianduibiweijihuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-juanlian"></span>
+            <div class="name">
+              地图卷帘
+            </div>
+            <div class="code-name">.icon-juanlian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xingxing2"></span>
+            <div class="name">
+              星星 选中状态
+            </div>
+            <div class="code-name">.icon-xingxing2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zyln"></span>
+            <div class="name">
+              023图层
+            </div>
+            <div class="code-name">.icon-zyln
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tupian"></span>
+            <div class="name">
+              042图片
+            </div>
+            <div class="code-name">.icon-tupian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shuxingxuanze"></span>
+            <div class="name">
+              批量框选
+            </div>
+            <div class="code-name">.icon-shuxingxuanze
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zonghefenxi"></span>
+            <div class="name">
+              分析
+            </div>
+            <div class="code-name">.icon-zonghefenxi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-update"></span>
+            <div class="name">
+              刷新
+            </div>
+            <div class="code-name">.icon-update
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-icon-p_mrpjinduzhuizong"></span>
+            <div class="name">
+              进度追踪
+            </div>
+            <div class="code-name">.icon-icon-p_mrpjinduzhuizong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhihuiguihua"></span>
+            <div class="name">
+              智慧规划
+            </div>
+            <div class="code-name">.icon-zhihuiguihua
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-guihua"></span>
+            <div class="name">
+              规划
+            </div>
+            <div class="code-name">.icon-guihua
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-gengduo"></span>
+            <div class="name">
+              更多
+            </div>
+            <div class="code-name">.icon-gengduo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-cemian"></span>
+            <div class="name">
+              测面
+            </div>
+            <div class="code-name">.icon-cemian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-bangongdizhi"></span>
+            <div class="name">
+              办公地址
+            </div>
+            <div class="code-name">.icon-bangongdizhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-_xiangmuguanli"></span>
+            <div class="name">
+              103_项目管理
+            </div>
+            <div class="code-name">.icon-_xiangmuguanli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-ico_yishenggongzuozhan_meilijiance"></span>
+            <div class="name">
+              ico_医生工作站_魅力检测
+            </div>
+            <div class="code-name">.icon-ico_yishenggongzuozhan_meilijiance
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yonghu"></span>
+            <div class="name">
+              用户
+            </div>
+            <div class="code-name">.icon-yonghu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-ditu"></span>
+            <div class="name">
+              地图
+            </div>
+            <div class="code-name">.icon-ditu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shenhe"></span>
+            <div class="name">
+              审核
+            </div>
+            <div class="code-name">.icon-shenhe
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fenxi"></span>
+            <div class="name">
+              分析
+            </div>
+            <div class="code-name">.icon-fenxi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-icon_moxing-"></span>
+            <div class="name">
+              模型
+            </div>
+            <div class="code-name">.icon-icon_moxing-
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jiankong-"></span>
+            <div class="name">
+              项目监控
+            </div>
+            <div class="code-name">.icon-jiankong-
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jishuchengguo"></span>
+            <div class="name">
+              技术成果
+            </div>
+            <div class="code-name">.icon-jishuchengguo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-043caidan"></span>
+            <div class="name">
+              043菜单
+            </div>
+            <div class="code-name">.icon-043caidan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-043lifangti"></span>
+            <div class="name">
+              043立方体
+            </div>
+            <div class="code-name">.icon-043lifangti
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-043zhinanzhen"></span>
+            <div class="name">
+              043指南针
+            </div>
+            <div class="code-name">.icon-043zhinanzhen
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-042ditu"></span>
+            <div class="name">
+              042地图
+            </div>
+            <div class="code-name">.icon-042ditu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-042fangkuai"></span>
+            <div class="name">
+              042方块
+            </div>
+            <div class="code-name">.icon-042fangkuai
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-041xingxing"></span>
+            <div class="name">
+              041星星
+            </div>
+            <div class="code-name">.icon-041xingxing
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-039shou"></span>
+            <div class="name">
+              039手
+            </div>
+            <div class="code-name">.icon-039shou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-030weizhi-4"></span>
+            <div class="name">
+              030位置-4
+            </div>
+            <div class="code-name">.icon-030weizhi-4
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-026cheng"></span>
+            <div class="name">
+              026乘
+            </div>
+            <div class="code-name">.icon-026cheng
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-026duigou"></span>
+            <div class="name">
+              026对勾
+            </div>
+            <div class="code-name">.icon-026duigou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-026jian"></span>
+            <div class="name">
+              026减
+            </div>
+            <div class="code-name">.icon-026jian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-026jia"></span>
+            <div class="name">
+              026加
+            </div>
+            <div class="code-name">.icon-026jia
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-024xiazai"></span>
+            <div class="name">
+              024下载
+            </div>
+            <div class="code-name">.icon-024xiazai
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-024shangchuan"></span>
+            <div class="name">
+              024上传
+            </div>
+            <div class="code-name">.icon-024shangchuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-023wangluo-2"></span>
+            <div class="name">
+              023网络-2
+            </div>
+            <div class="code-name">.icon-023wangluo-2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-022gongju"></span>
+            <div class="name">
+              022工具
+            </div>
+            <div class="code-name">.icon-022gongju
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-021chouti"></span>
+            <div class="name">
+              021抽屉
+            </div>
+            <div class="code-name">.icon-021chouti
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-020xiaoxi-2"></span>
+            <div class="name">
+              020消息-2
+            </div>
+            <div class="code-name">.icon-020xiaoxi-2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-wenjian"></span>
+            <div class="name">
+              019文件
+            </div>
+            <div class="code-name">.icon-wenjian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-019caijian"></span>
+            <div class="name">
+              019裁剪
+            </div>
+            <div class="code-name">.icon-019caijian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-019fuzhi"></span>
+            <div class="name">
+              019复制
+            </div>
+            <div class="code-name">.icon-019fuzhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-016fangdajing"></span>
+            <div class="name">
+              016放大镜
+            </div>
+            <div class="code-name">.icon-016fangdajing
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-013shezhi-1"></span>
+            <div class="name">
+              013设置-1
+            </div>
+            <div class="code-name">.icon-013shezhi-1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-011bingtu"></span>
+            <div class="name">
+              011饼图
+            </div>
+            <div class="code-name">.icon-011bingtu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shujutu"></span>
+            <div class="name">
+              011数据图
+            </div>
+            <div class="code-name">.icon-shujutu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-008duihuakuang-5"></span>
+            <div class="name">
+              008对话框-5
+            </div>
+            <div class="code-name">.icon-008duihuakuang-5
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-003lianjie-3"></span>
+            <div class="name">
+              003链接-3
+            </div>
+            <div class="code-name">.icon-003lianjie-3
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-001feiji-5"></span>
+            <div class="name">
+              001飞机-5
+            </div>
+            <div class="code-name">.icon-001feiji-5
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-butongguo"></span>
+            <div class="name">
+              不通过
+            </div>
+            <div class="code-name">.icon-butongguo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shenhezhong"></span>
+            <div class="name">
+              审核中
+            </div>
+            <div class="code-name">.icon-shenhezhong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yibanjie"></span>
+            <div class="name">
+              已办结
+            </div>
+            <div class="code-name">.icon-yibanjie
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-wenben"></span>
+            <div class="name">
+              文本
+            </div>
+            <div class="code-name">.icon-wenben
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-daorumoxingwenjian"></span>
+            <div class="name">
+              导入模型文件
+            </div>
+            <div class="code-name">.icon-daorumoxingwenjian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-duixiangfanweimian"></span>
+            <div class="name">
+              对象范围面
+            </div>
+            <div class="code-name">.icon-duixiangfanweimian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xuanmianmianji"></span>
+            <div class="name">
+              选面面积
+            </div>
+            <div class="code-name">.icon-xuanmianmianji
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-huanchongqu"></span>
+            <div class="name">
+              缓冲区
+            </div>
+            <div class="code-name">.icon-huanchongqu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dixingxiugaimoxing"></span>
+            <div class="name">
+              地形修改模型
+            </div>
+            <div class="code-name">.icon-dixingxiugaimoxing
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-BuildVolume"></span>
+            <div class="name">
+              BuildVolume
+            </div>
+            <div class="code-name">.icon-BuildVolume
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-diejiafenxi"></span>
+            <div class="name">
+              叠加分析
+            </div>
+            <div class="code-name">.icon-diejiafenxi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shujushangchuan"></span>
+            <div class="name">
+              数据上传
+            </div>
+            <div class="code-name">.icon-shujushangchuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shujuxiazai"></span>
+            <div class="name">
+              数据下载
+            </div>
+            <div class="code-name">.icon-shujuxiazai
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-duobianxingxuanze"></span>
+            <div class="name">
+              多边形选择
+            </div>
+            <div class="code-name">.icon-duobianxingxuanze
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dituwangge"></span>
+            <div class="name">
+              地图网格
+            </div>
+            <div class="code-name">.icon-dituwangge
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dianhuanchong"></span>
+            <div class="name">
+              圆心圆
+            </div>
+            <div class="code-name">.icon-dianhuanchong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-juli"></span>
+            <div class="name">
+              距离
+            </div>
+            <div class="code-name">.icon-juli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xianfuhao"></span>
+            <div class="name">
+              线符号
+            </div>
+            <div class="code-name">.icon-xianfuhao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhizhangfangxiang"></span>
+            <div class="name">
+              纸张方向
+            </div>
+            <div class="code-name">.icon-zhizhangfangxiang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-ditu1"></span>
+            <div class="name">
+              地图
+            </div>
+            <div class="code-name">.icon-ditu1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhibeizhen"></span>
+            <div class="name">
+              指北针
+            </div>
+            <div class="code-name">.icon-zhibeizhen
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dengzhixianfenxi"></span>
+            <div class="name">
+              等值线分析
+            </div>
+            <div class="code-name">.icon-dengzhixianfenxi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-cidian"></span>
+            <div class="name">
+              刺点
+            </div>
+            <div class="code-name">.icon-cidian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-liangdu"></span>
+            <div class="name">
+              亮度
+            </div>
+            <div class="code-name">.icon-liangdu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shujuyuan"></span>
+            <div class="name">
+              数据源
+            </div>
+            <div class="code-name">.icon-shujuyuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yuanshixinxiguanli"></span>
+            <div class="name">
+              原始信息管理
+            </div>
+            <div class="code-name">.icon-yuanshixinxiguanli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhitu"></span>
+            <div class="name">
+              制图
+            </div>
+            <div class="code-name">.icon-zhitu
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-quanqiu"></use>
+                </svg>
+                <div class="name">全球</div>
+                <div class="code-name">#icon-quanqiu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dian"></use>
+                </svg>
+                <div class="name">点</div>
+                <div class="code-name">#icon-dian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xian"></use>
+                </svg>
+                <div class="name">线</div>
+                <div class="code-name">#icon-xian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xuanxianjuli"></use>
+                </svg>
+                <div class="name">选线距离</div>
+                <div class="code-name">#icon-xuanxianjuli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-cemianji"></use>
+                </svg>
+                <div class="name">测面积</div>
+                <div class="code-name">#icon-cemianji</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xinxiinformation38"></use>
+                </svg>
+                <div class="name">信息</div>
+                <div class="code-name">#icon-xinxiinformation38</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zaixianduibiweijihuo"></use>
+                </svg>
+                <div class="name">对比</div>
+                <div class="code-name">#icon-zaixianduibiweijihuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-juanlian"></use>
+                </svg>
+                <div class="name">地图卷帘</div>
+                <div class="code-name">#icon-juanlian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xingxing2"></use>
+                </svg>
+                <div class="name">星星 选中状态</div>
+                <div class="code-name">#icon-xingxing2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zyln"></use>
+                </svg>
+                <div class="name">023图层</div>
+                <div class="code-name">#icon-zyln</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tupian"></use>
+                </svg>
+                <div class="name">042图片</div>
+                <div class="code-name">#icon-tupian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shuxingxuanze"></use>
+                </svg>
+                <div class="name">批量框选</div>
+                <div class="code-name">#icon-shuxingxuanze</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zonghefenxi"></use>
+                </svg>
+                <div class="name">分析</div>
+                <div class="code-name">#icon-zonghefenxi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-update"></use>
+                </svg>
+                <div class="name">刷新</div>
+                <div class="code-name">#icon-update</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-icon-p_mrpjinduzhuizong"></use>
+                </svg>
+                <div class="name">进度追踪</div>
+                <div class="code-name">#icon-icon-p_mrpjinduzhuizong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhihuiguihua"></use>
+                </svg>
+                <div class="name">智慧规划</div>
+                <div class="code-name">#icon-zhihuiguihua</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-guihua"></use>
+                </svg>
+                <div class="name">规划</div>
+                <div class="code-name">#icon-guihua</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-gengduo"></use>
+                </svg>
+                <div class="name">更多</div>
+                <div class="code-name">#icon-gengduo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-cemian"></use>
+                </svg>
+                <div class="name">测面</div>
+                <div class="code-name">#icon-cemian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-bangongdizhi"></use>
+                </svg>
+                <div class="name">办公地址</div>
+                <div class="code-name">#icon-bangongdizhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-_xiangmuguanli"></use>
+                </svg>
+                <div class="name">103_项目管理</div>
+                <div class="code-name">#icon-_xiangmuguanli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-ico_yishenggongzuozhan_meilijiance"></use>
+                </svg>
+                <div class="name">ico_医生工作站_魅力检测</div>
+                <div class="code-name">#icon-ico_yishenggongzuozhan_meilijiance</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yonghu"></use>
+                </svg>
+                <div class="name">用户</div>
+                <div class="code-name">#icon-yonghu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-ditu"></use>
+                </svg>
+                <div class="name">地图</div>
+                <div class="code-name">#icon-ditu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shenhe"></use>
+                </svg>
+                <div class="name">审核</div>
+                <div class="code-name">#icon-shenhe</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fenxi"></use>
+                </svg>
+                <div class="name">分析</div>
+                <div class="code-name">#icon-fenxi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-icon_moxing-"></use>
+                </svg>
+                <div class="name">模型</div>
+                <div class="code-name">#icon-icon_moxing-</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jiankong-"></use>
+                </svg>
+                <div class="name">项目监控</div>
+                <div class="code-name">#icon-jiankong-</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jishuchengguo"></use>
+                </svg>
+                <div class="name">技术成果</div>
+                <div class="code-name">#icon-jishuchengguo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-043caidan"></use>
+                </svg>
+                <div class="name">043菜单</div>
+                <div class="code-name">#icon-043caidan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-043lifangti"></use>
+                </svg>
+                <div class="name">043立方体</div>
+                <div class="code-name">#icon-043lifangti</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-043zhinanzhen"></use>
+                </svg>
+                <div class="name">043指南针</div>
+                <div class="code-name">#icon-043zhinanzhen</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-042ditu"></use>
+                </svg>
+                <div class="name">042地图</div>
+                <div class="code-name">#icon-042ditu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-042fangkuai"></use>
+                </svg>
+                <div class="name">042方块</div>
+                <div class="code-name">#icon-042fangkuai</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-041xingxing"></use>
+                </svg>
+                <div class="name">041星星</div>
+                <div class="code-name">#icon-041xingxing</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-039shou"></use>
+                </svg>
+                <div class="name">039手</div>
+                <div class="code-name">#icon-039shou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-030weizhi-4"></use>
+                </svg>
+                <div class="name">030位置-4</div>
+                <div class="code-name">#icon-030weizhi-4</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-026cheng"></use>
+                </svg>
+                <div class="name">026乘</div>
+                <div class="code-name">#icon-026cheng</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-026duigou"></use>
+                </svg>
+                <div class="name">026对勾</div>
+                <div class="code-name">#icon-026duigou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-026jian"></use>
+                </svg>
+                <div class="name">026减</div>
+                <div class="code-name">#icon-026jian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-026jia"></use>
+                </svg>
+                <div class="name">026加</div>
+                <div class="code-name">#icon-026jia</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-024xiazai"></use>
+                </svg>
+                <div class="name">024下载</div>
+                <div class="code-name">#icon-024xiazai</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-024shangchuan"></use>
+                </svg>
+                <div class="name">024上传</div>
+                <div class="code-name">#icon-024shangchuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-023wangluo-2"></use>
+                </svg>
+                <div class="name">023网络-2</div>
+                <div class="code-name">#icon-023wangluo-2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-022gongju"></use>
+                </svg>
+                <div class="name">022工具</div>
+                <div class="code-name">#icon-022gongju</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-021chouti"></use>
+                </svg>
+                <div class="name">021抽屉</div>
+                <div class="code-name">#icon-021chouti</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-020xiaoxi-2"></use>
+                </svg>
+                <div class="name">020消息-2</div>
+                <div class="code-name">#icon-020xiaoxi-2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-wenjian"></use>
+                </svg>
+                <div class="name">019文件</div>
+                <div class="code-name">#icon-wenjian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-019caijian"></use>
+                </svg>
+                <div class="name">019裁剪</div>
+                <div class="code-name">#icon-019caijian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-019fuzhi"></use>
+                </svg>
+                <div class="name">019复制</div>
+                <div class="code-name">#icon-019fuzhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-016fangdajing"></use>
+                </svg>
+                <div class="name">016放大镜</div>
+                <div class="code-name">#icon-016fangdajing</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-013shezhi-1"></use>
+                </svg>
+                <div class="name">013设置-1</div>
+                <div class="code-name">#icon-013shezhi-1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-011bingtu"></use>
+                </svg>
+                <div class="name">011饼图</div>
+                <div class="code-name">#icon-011bingtu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shujutu"></use>
+                </svg>
+                <div class="name">011数据图</div>
+                <div class="code-name">#icon-shujutu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-008duihuakuang-5"></use>
+                </svg>
+                <div class="name">008对话框-5</div>
+                <div class="code-name">#icon-008duihuakuang-5</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-003lianjie-3"></use>
+                </svg>
+                <div class="name">003链接-3</div>
+                <div class="code-name">#icon-003lianjie-3</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-001feiji-5"></use>
+                </svg>
+                <div class="name">001飞机-5</div>
+                <div class="code-name">#icon-001feiji-5</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-butongguo"></use>
+                </svg>
+                <div class="name">不通过</div>
+                <div class="code-name">#icon-butongguo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shenhezhong"></use>
+                </svg>
+                <div class="name">审核中</div>
+                <div class="code-name">#icon-shenhezhong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yibanjie"></use>
+                </svg>
+                <div class="name">已办结</div>
+                <div class="code-name">#icon-yibanjie</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-wenben"></use>
+                </svg>
+                <div class="name">文本</div>
+                <div class="code-name">#icon-wenben</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-daorumoxingwenjian"></use>
+                </svg>
+                <div class="name">导入模型文件</div>
+                <div class="code-name">#icon-daorumoxingwenjian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-duixiangfanweimian"></use>
+                </svg>
+                <div class="name">对象范围面</div>
+                <div class="code-name">#icon-duixiangfanweimian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xuanmianmianji"></use>
+                </svg>
+                <div class="name">选面面积</div>
+                <div class="code-name">#icon-xuanmianmianji</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-huanchongqu"></use>
+                </svg>
+                <div class="name">缓冲区</div>
+                <div class="code-name">#icon-huanchongqu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dixingxiugaimoxing"></use>
+                </svg>
+                <div class="name">地形修改模型</div>
+                <div class="code-name">#icon-dixingxiugaimoxing</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-BuildVolume"></use>
+                </svg>
+                <div class="name">BuildVolume</div>
+                <div class="code-name">#icon-BuildVolume</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-diejiafenxi"></use>
+                </svg>
+                <div class="name">叠加分析</div>
+                <div class="code-name">#icon-diejiafenxi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shujushangchuan"></use>
+                </svg>
+                <div class="name">数据上传</div>
+                <div class="code-name">#icon-shujushangchuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shujuxiazai"></use>
+                </svg>
+                <div class="name">数据下载</div>
+                <div class="code-name">#icon-shujuxiazai</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-duobianxingxuanze"></use>
+                </svg>
+                <div class="name">多边形选择</div>
+                <div class="code-name">#icon-duobianxingxuanze</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dituwangge"></use>
+                </svg>
+                <div class="name">地图网格</div>
+                <div class="code-name">#icon-dituwangge</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dianhuanchong"></use>
+                </svg>
+                <div class="name">圆心圆</div>
+                <div class="code-name">#icon-dianhuanchong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-juli"></use>
+                </svg>
+                <div class="name">距离</div>
+                <div class="code-name">#icon-juli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xianfuhao"></use>
+                </svg>
+                <div class="name">线符号</div>
+                <div class="code-name">#icon-xianfuhao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhizhangfangxiang"></use>
+                </svg>
+                <div class="name">纸张方向</div>
+                <div class="code-name">#icon-zhizhangfangxiang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-ditu1"></use>
+                </svg>
+                <div class="name">地图</div>
+                <div class="code-name">#icon-ditu1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhibeizhen"></use>
+                </svg>
+                <div class="name">指北针</div>
+                <div class="code-name">#icon-zhibeizhen</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dengzhixianfenxi"></use>
+                </svg>
+                <div class="name">等值线分析</div>
+                <div class="code-name">#icon-dengzhixianfenxi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-cidian"></use>
+                </svg>
+                <div class="name">刺点</div>
+                <div class="code-name">#icon-cidian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-liangdu"></use>
+                </svg>
+                <div class="name">亮度</div>
+                <div class="code-name">#icon-liangdu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shujuyuan"></use>
+                </svg>
+                <div class="name">数据源</div>
+                <div class="code-name">#icon-shujuyuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yuanshixinxiguanli"></use>
+                </svg>
+                <div class="name">原始信息管理</div>
+                <div class="code-name">#icon-yuanshixinxiguanli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhitu"></use>
+                </svg>
+                <div class="name">制图</div>
+                <div class="code-name">#icon-zhitu</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

src/assets/icon/iconfont.css

@@ -0,0 +1,351 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 2669438 */
+  src: url('iconfont.woff2?t=1626254199004') format('woff2'),
+       url('iconfont.woff?t=1626254199004') format('woff'),
+       url('iconfont.ttf?t=1626254199004') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-quanqiu:before {
+  content: "\ede8";
+}
+
+.icon-dian:before {
+  content: "\ed9a";
+}
+
+.icon-xian:before {
+  content: "\ed9c";
+}
+
+.icon-xuanxianjuli:before {
+  content: "\edb0";
+}
+
+.icon-cemianji:before {
+  content: "\e606";
+}
+
+.icon-xinxiinformation38:before {
+  content: "\e758";
+}
+
+.icon-zaixianduibiweijihuo:before {
+  content: "\e7dd";
+}
+
+.icon-juanlian:before {
+  content: "\ee26";
+}
+
+.icon-xingxing2:before {
+  content: "\e618";
+}
+
+.icon-zyln:before {
+  content: "\e68a";
+}
+
+.icon-tupian:before {
+  content: "\e7be";
+}
+
+.icon-shuxingxuanze:before {
+  content: "\e623";
+}
+
+.icon-zonghefenxi:before {
+  content: "\e62c";
+}
+
+.icon-update:before {
+  content: "\e635";
+}
+
+.icon-icon-p_mrpjinduzhuizong:before {
+  content: "\e608";
+}
+
+.icon-zhihuiguihua:before {
+  content: "\e612";
+}
+
+.icon-guihua:before {
+  content: "\e613";
+}
+
+.icon-gengduo:before {
+  content: "\e617";
+}
+
+.icon-cemian:before {
+  content: "\e605";
+}
+
+.icon-bangongdizhi:before {
+  content: "\e637";
+}
+
+.icon-_xiangmuguanli:before {
+  content: "\e603";
+}
+
+.icon-ico_yishenggongzuozhan_meilijiance:before {
+  content: "\e92e";
+}
+
+.icon-yonghu:before {
+  content: "\e640";
+}
+
+.icon-ditu:before {
+  content: "\e601";
+}
+
+.icon-shenhe:before {
+  content: "\e6a1";
+}
+
+.icon-fenxi:before {
+  content: "\e709";
+}
+
+.icon-icon_moxing-:before {
+  content: "\e63d";
+}
+
+.icon-jiankong-:before {
+  content: "\e654";
+}
+
+.icon-jishuchengguo:before {
+  content: "\e72e";
+}
+
+.icon-043caidan:before {
+  content: "\e7b9";
+}
+
+.icon-043lifangti:before {
+  content: "\e7ba";
+}
+
+.icon-043zhinanzhen:before {
+  content: "\e7bb";
+}
+
+.icon-042ditu:before {
+  content: "\e7bc";
+}
+
+.icon-042fangkuai:before {
+  content: "\e7bd";
+}
+
+.icon-041xingxing:before {
+  content: "\e7bf";
+}
+
+.icon-039shou:before {
+  content: "\e7c2";
+}
+
+.icon-030weizhi-4:before {
+  content: "\e7c8";
+}
+
+.icon-026cheng:before {
+  content: "\e7d4";
+}
+
+.icon-026duigou:before {
+  content: "\e7d5";
+}
+
+.icon-026jian:before {
+  content: "\e7d6";
+}
+
+.icon-026jia:before {
+  content: "\e7d7";
+}
+
+.icon-024xiazai:before {
+  content: "\e7d9";
+}
+
+.icon-024shangchuan:before {
+  content: "\e7da";
+}
+
+.icon-023wangluo-2:before {
+  content: "\e7db";
+}
+
+.icon-022gongju:before {
+  content: "\e7dc";
+}
+
+.icon-021chouti:before {
+  content: "\e7de";
+}
+
+.icon-020xiaoxi-2:before {
+  content: "\e7e1";
+}
+
+.icon-wenjian:before {
+  content: "\e7e6";
+}
+
+.icon-019caijian:before {
+  content: "\e7e7";
+}
+
+.icon-019fuzhi:before {
+  content: "\e7e8";
+}
+
+.icon-016fangdajing:before {
+  content: "\e7ed";
+}
+
+.icon-013shezhi-1:before {
+  content: "\e7f3";
+}
+
+.icon-011bingtu:before {
+  content: "\e7f8";
+}
+
+.icon-shujutu:before {
+  content: "\e7f9";
+}
+
+.icon-008duihuakuang-5:before {
+  content: "\e805";
+}
+
+.icon-003lianjie-3:before {
+  content: "\e816";
+}
+
+.icon-001feiji-5:before {
+  content: "\e824";
+}
+
+.icon-butongguo:before {
+  content: "\e6cd";
+}
+
+.icon-shenhezhong:before {
+  content: "\e6ce";
+}
+
+.icon-yibanjie:before {
+  content: "\e6cf";
+}
+
+.icon-wenben:before {
+  content: "\ed9b";
+}
+
+.icon-daorumoxingwenjian:before {
+  content: "\ed9f";
+}
+
+.icon-duixiangfanweimian:before {
+  content: "\eda2";
+}
+
+.icon-xuanmianmianji:before {
+  content: "\edb1";
+}
+
+.icon-huanchongqu:before {
+  content: "\edb4";
+}
+
+.icon-dixingxiugaimoxing:before {
+  content: "\edbb";
+}
+
+.icon-BuildVolume:before {
+  content: "\edbd";
+}
+
+.icon-diejiafenxi:before {
+  content: "\edc2";
+}
+
+.icon-shujushangchuan:before {
+  content: "\edc3";
+}
+
+.icon-shujuxiazai:before {
+  content: "\edc4";
+}
+
+.icon-duobianxingxuanze:before {
+  content: "\edc8";
+}
+
+.icon-dituwangge:before {
+  content: "\edca";
+}
+
+.icon-dianhuanchong:before {
+  content: "\edda";
+}
+
+.icon-juli:before {
+  content: "\ede7";
+}
+
+.icon-xianfuhao:before {
+  content: "\edeb";
+}
+
+.icon-zhizhangfangxiang:before {
+  content: "\edf5";
+}
+
+.icon-ditu1:before {
+  content: "\edfc";
+}
+
+.icon-zhibeizhen:before {
+  content: "\edfd";
+}
+
+.icon-dengzhixianfenxi:before {
+  content: "\ee07";
+}
+
+.icon-cidian:before {
+  content: "\ee0a";
+}
+
+.icon-liangdu:before {
+  content: "\ee17";
+}
+
+.icon-shujuyuan:before {
+  content: "\ee1e";
+}
+
+.icon-yuanshixinxiguanli:before {
+  content: "\ee23";
+}
+
+.icon-zhitu:before {
+  content: "\ee2a";
+}
+

src/assets/icon/iconfont.json

@@ -0,0 +1,597 @@
+{
+  "id": "2669438",
+  "name": "规划一张图应用",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "22383425",
+      "name": "全球",
+      "font_class": "quanqiu",
+      "unicode": "ede8",
+      "unicode_decimal": 60904
+    },
+    {
+      "icon_id": "22376199",
+      "name": "点",
+      "font_class": "dian",
+      "unicode": "ed9a",
+      "unicode_decimal": 60826
+    },
+    {
+      "icon_id": "22376202",
+      "name": "线",
+      "font_class": "xian",
+      "unicode": "ed9c",
+      "unicode_decimal": 60828
+    },
+    {
+      "icon_id": "22380818",
+      "name": "选线距离",
+      "font_class": "xuanxianjuli",
+      "unicode": "edb0",
+      "unicode_decimal": 60848
+    },
+    {
+      "icon_id": "17930632",
+      "name": "测面积",
+      "font_class": "cemianji",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    },
+    {
+      "icon_id": "609719",
+      "name": "信息",
+      "font_class": "xinxiinformation38",
+      "unicode": "e758",
+      "unicode_decimal": 59224
+    },
+    {
+      "icon_id": "7579563",
+      "name": "对比",
+      "font_class": "zaixianduibiweijihuo",
+      "unicode": "e7dd",
+      "unicode_decimal": 59357
+    },
+    {
+      "icon_id": "22386316",
+      "name": "地图卷帘",
+      "font_class": "juanlian",
+      "unicode": "ee26",
+      "unicode_decimal": 60966
+    },
+    {
+      "icon_id": "19494240",
+      "name": "星星 选中状态",
+      "font_class": "xingxing2",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    },
+    {
+      "icon_id": "1046658",
+      "name": "023图层",
+      "font_class": "zyln",
+      "unicode": "e68a",
+      "unicode_decimal": 59018
+    },
+    {
+      "icon_id": "15816242",
+      "name": "042图片",
+      "font_class": "tupian",
+      "unicode": "e7be",
+      "unicode_decimal": 59326
+    },
+    {
+      "icon_id": "1166327",
+      "name": "批量框选",
+      "font_class": "shuxingxuanze",
+      "unicode": "e623",
+      "unicode_decimal": 58915
+    },
+    {
+      "icon_id": "1166408",
+      "name": "分析",
+      "font_class": "zonghefenxi",
+      "unicode": "e62c",
+      "unicode_decimal": 58924
+    },
+    {
+      "icon_id": "1166690",
+      "name": "刷新",
+      "font_class": "update",
+      "unicode": "e635",
+      "unicode_decimal": 58933
+    },
+    {
+      "icon_id": "2045587",
+      "name": "进度追踪",
+      "font_class": "icon-p_mrpjinduzhuizong",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "5564766",
+      "name": "智慧规划",
+      "font_class": "zhihuiguihua",
+      "unicode": "e612",
+      "unicode_decimal": 58898
+    },
+    {
+      "icon_id": "5564794",
+      "name": "规划",
+      "font_class": "guihua",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
+    {
+      "icon_id": "5565008",
+      "name": "更多",
+      "font_class": "gengduo",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
+    {
+      "icon_id": "5650847",
+      "name": "测面",
+      "font_class": "cemian",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "5815372",
+      "name": "办公地址",
+      "font_class": "bangongdizhi",
+      "unicode": "e637",
+      "unicode_decimal": 58935
+    },
+    {
+      "icon_id": "5922238",
+      "name": "103_项目管理",
+      "font_class": "_xiangmuguanli",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "6607790",
+      "name": "ico_医生工作站_魅力检测",
+      "font_class": "ico_yishenggongzuozhan_meilijiance",
+      "unicode": "e92e",
+      "unicode_decimal": 59694
+    },
+    {
+      "icon_id": "7556335",
+      "name": "用户",
+      "font_class": "yonghu",
+      "unicode": "e640",
+      "unicode_decimal": 58944
+    },
+    {
+      "icon_id": "8778473",
+      "name": "地图",
+      "font_class": "ditu",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "9945105",
+      "name": "审核",
+      "font_class": "shenhe",
+      "unicode": "e6a1",
+      "unicode_decimal": 59041
+    },
+    {
+      "icon_id": "10056247",
+      "name": "分析",
+      "font_class": "fenxi",
+      "unicode": "e709",
+      "unicode_decimal": 59145
+    },
+    {
+      "icon_id": "12686565",
+      "name": "模型",
+      "font_class": "icon_moxing-",
+      "unicode": "e63d",
+      "unicode_decimal": 58941
+    },
+    {
+      "icon_id": "13868176",
+      "name": "项目监控",
+      "font_class": "jiankong-",
+      "unicode": "e654",
+      "unicode_decimal": 58964
+    },
+    {
+      "icon_id": "14656247",
+      "name": "技术成果",
+      "font_class": "jishuchengguo",
+      "unicode": "e72e",
+      "unicode_decimal": 59182
+    },
+    {
+      "icon_id": "15816226",
+      "name": "043菜单",
+      "font_class": "043caidan",
+      "unicode": "e7b9",
+      "unicode_decimal": 59321
+    },
+    {
+      "icon_id": "15816227",
+      "name": "043立方体",
+      "font_class": "043lifangti",
+      "unicode": "e7ba",
+      "unicode_decimal": 59322
+    },
+    {
+      "icon_id": "15816235",
+      "name": "043指南针",
+      "font_class": "043zhinanzhen",
+      "unicode": "e7bb",
+      "unicode_decimal": 59323
+    },
+    {
+      "icon_id": "15816239",
+      "name": "042地图",
+      "font_class": "042ditu",
+      "unicode": "e7bc",
+      "unicode_decimal": 59324
+    },
+    {
+      "icon_id": "15816240",
+      "name": "042方块",
+      "font_class": "042fangkuai",
+      "unicode": "e7bd",
+      "unicode_decimal": 59325
+    },
+    {
+      "icon_id": "15816245",
+      "name": "041星星",
+      "font_class": "041xingxing",
+      "unicode": "e7bf",
+      "unicode_decimal": 59327
+    },
+    {
+      "icon_id": "15816254",
+      "name": "039手",
+      "font_class": "039shou",
+      "unicode": "e7c2",
+      "unicode_decimal": 59330
+    },
+    {
+      "icon_id": "15816304",
+      "name": "030位置-4",
+      "font_class": "030weizhi-4",
+      "unicode": "e7c8",
+      "unicode_decimal": 59336
+    },
+    {
+      "icon_id": "15816332",
+      "name": "026乘",
+      "font_class": "026cheng",
+      "unicode": "e7d4",
+      "unicode_decimal": 59348
+    },
+    {
+      "icon_id": "15816333",
+      "name": "026对勾",
+      "font_class": "026duigou",
+      "unicode": "e7d5",
+      "unicode_decimal": 59349
+    },
+    {
+      "icon_id": "15816334",
+      "name": "026减",
+      "font_class": "026jian",
+      "unicode": "e7d6",
+      "unicode_decimal": 59350
+    },
+    {
+      "icon_id": "15816335",
+      "name": "026加",
+      "font_class": "026jia",
+      "unicode": "e7d7",
+      "unicode_decimal": 59351
+    },
+    {
+      "icon_id": "15816363",
+      "name": "024下载",
+      "font_class": "024xiazai",
+      "unicode": "e7d9",
+      "unicode_decimal": 59353
+    },
+    {
+      "icon_id": "15816365",
+      "name": "024上传",
+      "font_class": "024shangchuan",
+      "unicode": "e7da",
+      "unicode_decimal": 59354
+    },
+    {
+      "icon_id": "15816369",
+      "name": "023网络-2",
+      "font_class": "023wangluo-2",
+      "unicode": "e7db",
+      "unicode_decimal": 59355
+    },
+    {
+      "icon_id": "15816371",
+      "name": "022工具",
+      "font_class": "022gongju",
+      "unicode": "e7dc",
+      "unicode_decimal": 59356
+    },
+    {
+      "icon_id": "15816376",
+      "name": "021抽屉",
+      "font_class": "021chouti",
+      "unicode": "e7de",
+      "unicode_decimal": 59358
+    },
+    {
+      "icon_id": "15816384",
+      "name": "020消息-2",
+      "font_class": "020xiaoxi-2",
+      "unicode": "e7e1",
+      "unicode_decimal": 59361
+    },
+    {
+      "icon_id": "15816432",
+      "name": "019文件",
+      "font_class": "wenjian",
+      "unicode": "e7e6",
+      "unicode_decimal": 59366
+    },
+    {
+      "icon_id": "15816436",
+      "name": "019裁剪",
+      "font_class": "019caijian",
+      "unicode": "e7e7",
+      "unicode_decimal": 59367
+    },
+    {
+      "icon_id": "15816437",
+      "name": "019复制",
+      "font_class": "019fuzhi",
+      "unicode": "e7e8",
+      "unicode_decimal": 59368
+    },
+    {
+      "icon_id": "15816453",
+      "name": "016放大镜",
+      "font_class": "016fangdajing",
+      "unicode": "e7ed",
+      "unicode_decimal": 59373
+    },
+    {
+      "icon_id": "15816476",
+      "name": "013设置-1",
+      "font_class": "013shezhi-1",
+      "unicode": "e7f3",
+      "unicode_decimal": 59379
+    },
+    {
+      "icon_id": "15816492",
+      "name": "011饼图",
+      "font_class": "011bingtu",
+      "unicode": "e7f8",
+      "unicode_decimal": 59384
+    },
+    {
+      "icon_id": "15816493",
+      "name": "011数据图",
+      "font_class": "shujutu",
+      "unicode": "e7f9",
+      "unicode_decimal": 59385
+    },
+    {
+      "icon_id": "15816526",
+      "name": "008对话框-5",
+      "font_class": "008duihuakuang-5",
+      "unicode": "e805",
+      "unicode_decimal": 59397
+    },
+    {
+      "icon_id": "15816652",
+      "name": "003链接-3",
+      "font_class": "003lianjie-3",
+      "unicode": "e816",
+      "unicode_decimal": 59414
+    },
+    {
+      "icon_id": "15816678",
+      "name": "001飞机-5",
+      "font_class": "001feiji-5",
+      "unicode": "e824",
+      "unicode_decimal": 59428
+    },
+    {
+      "icon_id": "21429827",
+      "name": "不通过",
+      "font_class": "butongguo",
+      "unicode": "e6cd",
+      "unicode_decimal": 59085
+    },
+    {
+      "icon_id": "21429831",
+      "name": "审核中",
+      "font_class": "shenhezhong",
+      "unicode": "e6ce",
+      "unicode_decimal": 59086
+    },
+    {
+      "icon_id": "21429839",
+      "name": "已办结",
+      "font_class": "yibanjie",
+      "unicode": "e6cf",
+      "unicode_decimal": 59087
+    },
+    {
+      "icon_id": "22376206",
+      "name": "文本",
+      "font_class": "wenben",
+      "unicode": "ed9b",
+      "unicode_decimal": 60827
+    },
+    {
+      "icon_id": "22376260",
+      "name": "导入模型文件",
+      "font_class": "daorumoxingwenjian",
+      "unicode": "ed9f",
+      "unicode_decimal": 60831
+    },
+    {
+      "icon_id": "22380472",
+      "name": "对象范围面",
+      "font_class": "duixiangfanweimian",
+      "unicode": "eda2",
+      "unicode_decimal": 60834
+    },
+    {
+      "icon_id": "22380850",
+      "name": "选面面积",
+      "font_class": "xuanmianmianji",
+      "unicode": "edb1",
+      "unicode_decimal": 60849
+    },
+    {
+      "icon_id": "22381141",
+      "name": "缓冲区",
+      "font_class": "huanchongqu",
+      "unicode": "edb4",
+      "unicode_decimal": 60852
+    },
+    {
+      "icon_id": "22381608",
+      "name": "地形修改模型",
+      "font_class": "dixingxiugaimoxing",
+      "unicode": "edbb",
+      "unicode_decimal": 60859
+    },
+    {
+      "icon_id": "22381622",
+      "name": "BuildVolume",
+      "font_class": "BuildVolume",
+      "unicode": "edbd",
+      "unicode_decimal": 60861
+    },
+    {
+      "icon_id": "22381960",
+      "name": "叠加分析",
+      "font_class": "diejiafenxi",
+      "unicode": "edc2",
+      "unicode_decimal": 60866
+    },
+    {
+      "icon_id": "22382097",
+      "name": "数据上传",
+      "font_class": "shujushangchuan",
+      "unicode": "edc3",
+      "unicode_decimal": 60867
+    },
+    {
+      "icon_id": "22382099",
+      "name": "数据下载",
+      "font_class": "shujuxiazai",
+      "unicode": "edc4",
+      "unicode_decimal": 60868
+    },
+    {
+      "icon_id": "22382213",
+      "name": "多边形选择",
+      "font_class": "duobianxingxuanze",
+      "unicode": "edc8",
+      "unicode_decimal": 60872
+    },
+    {
+      "icon_id": "22382243",
+      "name": "地图网格",
+      "font_class": "dituwangge",
+      "unicode": "edca",
+      "unicode_decimal": 60874
+    },
+    {
+      "icon_id": "22383149",
+      "name": "圆心圆",
+      "font_class": "dianhuanchong",
+      "unicode": "edda",
+      "unicode_decimal": 60890
+    },
+    {
+      "icon_id": "22383430",
+      "name": "距离",
+      "font_class": "juli",
+      "unicode": "ede7",
+      "unicode_decimal": 60903
+    },
+    {
+      "icon_id": "22383456",
+      "name": "线符号",
+      "font_class": "xianfuhao",
+      "unicode": "edeb",
+      "unicode_decimal": 60907
+    },
+    {
+      "icon_id": "22383584",
+      "name": "纸张方向",
+      "font_class": "zhizhangfangxiang",
+      "unicode": "edf5",
+      "unicode_decimal": 60917
+    },
+    {
+      "icon_id": "22383660",
+      "name": "地图",
+      "font_class": "ditu1",
+      "unicode": "edfc",
+      "unicode_decimal": 60924
+    },
+    {
+      "icon_id": "22383676",
+      "name": "指北针",
+      "font_class": "zhibeizhen",
+      "unicode": "edfd",
+      "unicode_decimal": 60925
+    },
+    {
+      "icon_id": "22383753",
+      "name": "等值线分析",
+      "font_class": "dengzhixianfenxi",
+      "unicode": "ee07",
+      "unicode_decimal": 60935
+    },
+    {
+      "icon_id": "22383777",
+      "name": "刺点",
+      "font_class": "cidian",
+      "unicode": "ee0a",
+      "unicode_decimal": 60938
+    },
+    {
+      "icon_id": "22385141",
+      "name": "亮度",
+      "font_class": "liangdu",
+      "unicode": "ee17",
+      "unicode_decimal": 60951
+    },
+    {
+      "icon_id": "22385404",
+      "name": "数据源",
+      "font_class": "shujuyuan",
+      "unicode": "ee1e",
+      "unicode_decimal": 60958
+    },
+    {
+      "icon_id": "22385731",
+      "name": "原始信息管理",
+      "font_class": "yuanshixinxiguanli",
+      "unicode": "ee23",
+      "unicode_decimal": 60963
+    },
+    {
+      "icon_id": "22386420",
+      "name": "制图",
+      "font_class": "zhitu",
+      "unicode": "ee2a",
+      "unicode_decimal": 60970
+    }
+  ]
+}

src/assets/icon_shfw/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont1 logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont1 logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/icon_shfw/demo_index.html

@@ -0,0 +1,1276 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico"
+    type="image/x-icon" />
+  <link rel="icon" type="image/svg+xml"
+    href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg" />
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+        <img width="200"
+          src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+
+      </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2739587" target="_blank"
+        class="nav-more">查看项目</a>
+
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+        <ul class="icon_lists dib-box">
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe64e;</span>
+            <div class="name">撤销</div>
+            <div class="code-name">&amp;#xe64e;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe64f;</span>
+            <div class="name">难过</div>
+            <div class="code-name">&amp;#xe64f;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe650;</span>
+            <div class="name">开心</div>
+            <div class="code-name">&amp;#xe650;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe651;</span>
+            <div class="name">错误</div>
+            <div class="code-name">&amp;#xe651;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe652;</span>
+            <div class="name">拼团</div>
+            <div class="code-name">&amp;#xe652;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe653;</span>
+            <div class="name">正确</div>
+            <div class="code-name">&amp;#xe653;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe654;</span>
+            <div class="name">延时</div>
+            <div class="code-name">&amp;#xe654;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe655;</span>
+            <div class="name">锁定</div>
+            <div class="code-name">&amp;#xe655;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe656;</span>
+            <div class="name">开始</div>
+            <div class="code-name">&amp;#xe656;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe657;</span>
+            <div class="name">我的2</div>
+            <div class="code-name">&amp;#xe657;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe658;</span>
+            <div class="name">添加</div>
+            <div class="code-name">&amp;#xe658;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe659;</span>
+            <div class="name">好评</div>
+            <div class="code-name">&amp;#xe659;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe65a;</span>
+            <div class="name">图片</div>
+            <div class="code-name">&amp;#xe65a;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe65b;</span>
+            <div class="name">删除</div>
+            <div class="code-name">&amp;#xe65b;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe65c;</span>
+            <div class="name">复制</div>
+            <div class="code-name">&amp;#xe65c;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe65d;</span>
+            <div class="name">关闭</div>
+            <div class="code-name">&amp;#xe65d;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe65e;</span>
+            <div class="name">查询</div>
+            <div class="code-name">&amp;#xe65e;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe65f;</span>
+            <div class="name">快递</div>
+            <div class="code-name">&amp;#xe65f;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe660;</span>
+            <div class="name">消息</div>
+            <div class="code-name">&amp;#xe660;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe661;</span>
+            <div class="name">店铺</div>
+            <div class="code-name">&amp;#xe661;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe662;</span>
+            <div class="name">邮件</div>
+            <div class="code-name">&amp;#xe662;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe663;</span>
+            <div class="name">左滑</div>
+            <div class="code-name">&amp;#xe663;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe664;</span>
+            <div class="name">关注</div>
+            <div class="code-name">&amp;#xe664;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe665;</span>
+            <div class="name">视频</div>
+            <div class="code-name">&amp;#xe665;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe666;</span>
+            <div class="name">关注2</div>
+            <div class="code-name">&amp;#xe666;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe667;</span>
+            <div class="name">注意</div>
+            <div class="code-name">&amp;#xe667;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe668;</span>
+            <div class="name">我的</div>
+            <div class="code-name">&amp;#xe668;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe669;</span>
+            <div class="name">购物车</div>
+            <div class="code-name">&amp;#xe669;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe66a;</span>
+            <div class="name">差评</div>
+            <div class="code-name">&amp;#xe66a;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe66b;</span>
+            <div class="name">金额</div>
+            <div class="code-name">&amp;#xe66b;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe66c;</span>
+            <div class="name">收藏</div>
+            <div class="code-name">&amp;#xe66c;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe66d;</span>
+            <div class="name">提醒</div>
+            <div class="code-name">&amp;#xe66d;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe66e;</span>
+            <div class="name">折扣</div>
+            <div class="code-name">&amp;#xe66e;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe66f;</span>
+            <div class="name">坐标</div>
+            <div class="code-name">&amp;#xe66f;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe670;</span>
+            <div class="name">右滑</div>
+            <div class="code-name">&amp;#xe670;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe671;</span>
+            <div class="name">票券</div>
+            <div class="code-name">&amp;#xe671;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe672;</span>
+            <div class="name">商品</div>
+            <div class="code-name">&amp;#xe672;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe673;</span>
+            <div class="name">编辑</div>
+            <div class="code-name">&amp;#xe673;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe674;</span>
+            <div class="name">皇冠</div>
+            <div class="code-name">&amp;#xe674;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe675;</span>
+            <div class="name">时间</div>
+            <div class="code-name">&amp;#xe675;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe676;</span>
+            <div class="name">分享</div>
+            <div class="code-name">&amp;#xe676;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe677;</span>
+            <div class="name">疑问</div>
+            <div class="code-name">&amp;#xe677;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe678;</span>
+            <div class="name">暂停</div>
+            <div class="code-name">&amp;#xe678;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe679;</span>
+            <div class="name">扫码</div>
+            <div class="code-name">&amp;#xe679;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe67a;</span>
+            <div class="name">分类</div>
+            <div class="code-name">&amp;#xe67a;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe67b;</span>
+            <div class="name">首页</div>
+            <div class="code-name">&amp;#xe67b;</div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont">&#xe67c;</span>
+            <div class="name">发现</div>
+            <div class="code-name">&amp;#xe67c;</div>
+          </li>
+
+        </ul>
+        <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+          <pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1628735134721') format('woff2'),
+       url('iconfont.woff?t=1628735134721') format('woff'),
+       url('iconfont.ttf?t=1628735134721') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+          <pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+          <pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+        </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+
+          <li class="dib">
+            <span class="icon iconfont icon-chexiao"></span>
+            <div class="name">
+              撤销
+            </div>
+            <div class="code-name">.icon-chexiao
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-nanguo"></span>
+            <div class="name">
+              难过
+            </div>
+            <div class="code-name">.icon-nanguo
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-kaixin"></span>
+            <div class="name">
+              开心
+            </div>
+            <div class="code-name">.icon-kaixin
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-cuowu"></span>
+            <div class="name">
+              错误
+            </div>
+            <div class="code-name">.icon-cuowu
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-pintuan"></span>
+            <div class="name">
+              拼团
+            </div>
+            <div class="code-name">.icon-pintuan
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-zhengque"></span>
+            <div class="name">
+              正确
+            </div>
+            <div class="code-name">.icon-zhengque
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-yanshi"></span>
+            <div class="name">
+              延时
+            </div>
+            <div class="code-name">.icon-yanshi
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-suoding"></span>
+            <div class="name">
+              锁定
+            </div>
+            <div class="code-name">.icon-suoding
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-kaishi"></span>
+            <div class="name">
+              开始
+            </div>
+            <div class="code-name">.icon-kaishi
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-wode"></span>
+            <div class="name">
+              我的2
+            </div>
+            <div class="code-name">.icon-wode
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-tianjia"></span>
+            <div class="name">
+              添加
+            </div>
+            <div class="code-name">.icon-tianjia
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-haoping"></span>
+            <div class="name">
+              好评
+            </div>
+            <div class="code-name">.icon-haoping
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-tupian"></span>
+            <div class="name">
+              图片
+            </div>
+            <div class="code-name">.icon-tupian
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-shanchu"></span>
+            <div class="name">
+              删除
+            </div>
+            <div class="code-name">.icon-shanchu
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-fuzhi"></span>
+            <div class="name">
+              复制
+            </div>
+            <div class="code-name">.icon-fuzhi
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-guanbi"></span>
+            <div class="name">
+              关闭
+            </div>
+            <div class="code-name">.icon-guanbi
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-chaxun"></span>
+            <div class="name">
+              查询
+            </div>
+            <div class="code-name">.icon-chaxun
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-kuaidi"></span>
+            <div class="name">
+              快递
+            </div>
+            <div class="code-name">.icon-kuaidi
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-xiaoxi"></span>
+            <div class="name">
+              消息
+            </div>
+            <div class="code-name">.icon-xiaoxi
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-dianpu"></span>
+            <div class="name">
+              店铺
+            </div>
+            <div class="code-name">.icon-dianpu
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-youjian"></span>
+            <div class="name">
+              邮件
+            </div>
+            <div class="code-name">.icon-youjian
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-zuohua"></span>
+            <div class="name">
+              左滑
+            </div>
+            <div class="code-name">.icon-zuohua
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-guanzhu"></span>
+            <div class="name">
+              关注
+            </div>
+            <div class="code-name">.icon-guanzhu
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-shipin"></span>
+            <div class="name">
+              视频
+            </div>
+            <div class="code-name">.icon-shipin
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-guanzhu1"></span>
+            <div class="name">
+              关注2
+            </div>
+            <div class="code-name">.icon-guanzhu1
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-zhuyi"></span>
+            <div class="name">
+              注意
+            </div>
+            <div class="code-name">.icon-zhuyi
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-wode1"></span>
+            <div class="name">
+              我的
+            </div>
+            <div class="code-name">.icon-wode1
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-gouwuche"></span>
+            <div class="name">
+              购物车
+            </div>
+            <div class="code-name">.icon-gouwuche
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-chaping"></span>
+            <div class="name">
+              差评
+            </div>
+            <div class="code-name">.icon-chaping
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-jine"></span>
+            <div class="name">
+              金额
+            </div>
+            <div class="code-name">.icon-jine
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-shoucang"></span>
+            <div class="name">
+              收藏
+            </div>
+            <div class="code-name">.icon-shoucang
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-tixing"></span>
+            <div class="name">
+              提醒
+            </div>
+            <div class="code-name">.icon-tixing
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-zhekou"></span>
+            <div class="name">
+              折扣
+            </div>
+            <div class="code-name">.icon-zhekou
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-zuobiao"></span>
+            <div class="name">
+              坐标
+            </div>
+            <div class="code-name">.icon-zuobiao
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-youhua"></span>
+            <div class="name">
+              右滑
+            </div>
+            <div class="code-name">.icon-youhua
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-piaoquan"></span>
+            <div class="name">
+              票券
+            </div>
+            <div class="code-name">.icon-piaoquan
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-shangpin"></span>
+            <div class="name">
+              商品
+            </div>
+            <div class="code-name">.icon-shangpin
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-bianji"></span>
+            <div class="name">
+              编辑
+            </div>
+            <div class="code-name">.icon-bianji
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-huangguan"></span>
+            <div class="name">
+              皇冠
+            </div>
+            <div class="code-name">.icon-huangguan
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-shijian"></span>
+            <div class="name">
+              时间
+            </div>
+            <div class="code-name">.icon-shijian
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-fenxiang"></span>
+            <div class="name">
+              分享
+            </div>
+            <div class="code-name">.icon-fenxiang
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-yiwen"></span>
+            <div class="name">
+              疑问
+            </div>
+            <div class="code-name">.icon-yiwen
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-zanting"></span>
+            <div class="name">
+              暂停
+            </div>
+            <div class="code-name">.icon-zanting
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-saoma"></span>
+            <div class="name">
+              扫码
+            </div>
+            <div class="code-name">.icon-saoma
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-fenlei"></span>
+            <div class="name">
+              分类
+            </div>
+            <div class="code-name">.icon-fenlei
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-shouye"></span>
+            <div class="name">
+              首页
+            </div>
+            <div class="code-name">.icon-shouye
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-faxian"></span>
+            <div class="name">
+              发现
+            </div>
+            <div class="code-name">.icon-faxian
+            </div>
+          </li>
+
+        </ul>
+        <div class="article markdown">
+          <h2 id="font-class-">font-class 引用</h2>
+          <hr>
+
+          <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+          <p>与 Unicode 使用方式相比，具有如下特点：</p>
+          <ul>
+            <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+            <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+          <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+          <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+          <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"
+              iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+        </div>
+      </div>
+      <div class="content symbol">
+        <ul class="icon_lists dib-box">
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-chexiao"></use>
+            </svg>
+            <div class="name">撤销</div>
+            <div class="code-name">#icon-chexiao</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-nanguo"></use>
+            </svg>
+            <div class="name">难过</div>
+            <div class="code-name">#icon-nanguo</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-kaixin"></use>
+            </svg>
+            <div class="name">开心</div>
+            <div class="code-name">#icon-kaixin</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-cuowu"></use>
+            </svg>
+            <div class="name">错误</div>
+            <div class="code-name">#icon-cuowu</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-pintuan"></use>
+            </svg>
+            <div class="name">拼团</div>
+            <div class="code-name">#icon-pintuan</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-zhengque"></use>
+            </svg>
+            <div class="name">正确</div>
+            <div class="code-name">#icon-zhengque</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-yanshi"></use>
+            </svg>
+            <div class="name">延时</div>
+            <div class="code-name">#icon-yanshi</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-suoding"></use>
+            </svg>
+            <div class="name">锁定</div>
+            <div class="code-name">#icon-suoding</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-kaishi"></use>
+            </svg>
+            <div class="name">开始</div>
+            <div class="code-name">#icon-kaishi</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-wode"></use>
+            </svg>
+            <div class="name">我的2</div>
+            <div class="code-name">#icon-wode</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-tianjia"></use>
+            </svg>
+            <div class="name">添加</div>
+            <div class="code-name">#icon-tianjia</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-haoping"></use>
+            </svg>
+            <div class="name">好评</div>
+            <div class="code-name">#icon-haoping</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-tupian"></use>
+            </svg>
+            <div class="name">图片</div>
+            <div class="code-name">#icon-tupian</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-shanchu"></use>
+            </svg>
+            <div class="name">删除</div>
+            <div class="code-name">#icon-shanchu</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-fuzhi"></use>
+            </svg>
+            <div class="name">复制</div>
+            <div class="code-name">#icon-fuzhi</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-guanbi"></use>
+            </svg>
+            <div class="name">关闭</div>
+            <div class="code-name">#icon-guanbi</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-chaxun"></use>
+            </svg>
+            <div class="name">查询</div>
+            <div class="code-name">#icon-chaxun</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-kuaidi"></use>
+            </svg>
+            <div class="name">快递</div>
+            <div class="code-name">#icon-kuaidi</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-xiaoxi"></use>
+            </svg>
+            <div class="name">消息</div>
+            <div class="code-name">#icon-xiaoxi</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-dianpu"></use>
+            </svg>
+            <div class="name">店铺</div>
+            <div class="code-name">#icon-dianpu</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-youjian"></use>
+            </svg>
+            <div class="name">邮件</div>
+            <div class="code-name">#icon-youjian</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-zuohua"></use>
+            </svg>
+            <div class="name">左滑</div>
+            <div class="code-name">#icon-zuohua</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-guanzhu"></use>
+            </svg>
+            <div class="name">关注</div>
+            <div class="code-name">#icon-guanzhu</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-shipin"></use>
+            </svg>
+            <div class="name">视频</div>
+            <div class="code-name">#icon-shipin</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-guanzhu1"></use>
+            </svg>
+            <div class="name">关注2</div>
+            <div class="code-name">#icon-guanzhu1</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-zhuyi"></use>
+            </svg>
+            <div class="name">注意</div>
+            <div class="code-name">#icon-zhuyi</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-wode1"></use>
+            </svg>
+            <div class="name">我的</div>
+            <div class="code-name">#icon-wode1</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-gouwuche"></use>
+            </svg>
+            <div class="name">购物车</div>
+            <div class="code-name">#icon-gouwuche</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-chaping"></use>
+            </svg>
+            <div class="name">差评</div>
+            <div class="code-name">#icon-chaping</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-jine"></use>
+            </svg>
+            <div class="name">金额</div>
+            <div class="code-name">#icon-jine</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-shoucang"></use>
+            </svg>
+            <div class="name">收藏</div>
+            <div class="code-name">#icon-shoucang</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-tixing"></use>
+            </svg>
+            <div class="name">提醒</div>
+            <div class="code-name">#icon-tixing</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-zhekou"></use>
+            </svg>
+            <div class="name">折扣</div>
+            <div class="code-name">#icon-zhekou</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-zuobiao"></use>
+            </svg>
+            <div class="name">坐标</div>
+            <div class="code-name">#icon-zuobiao</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-youhua"></use>
+            </svg>
+            <div class="name">右滑</div>
+            <div class="code-name">#icon-youhua</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-piaoquan"></use>
+            </svg>
+            <div class="name">票券</div>
+            <div class="code-name">#icon-piaoquan</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-shangpin"></use>
+            </svg>
+            <div class="name">商品</div>
+            <div class="code-name">#icon-shangpin</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-bianji"></use>
+            </svg>
+            <div class="name">编辑</div>
+            <div class="code-name">#icon-bianji</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-huangguan"></use>
+            </svg>
+            <div class="name">皇冠</div>
+            <div class="code-name">#icon-huangguan</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-shijian"></use>
+            </svg>
+            <div class="name">时间</div>
+            <div class="code-name">#icon-shijian</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-fenxiang"></use>
+            </svg>
+            <div class="name">分享</div>
+            <div class="code-name">#icon-fenxiang</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-yiwen"></use>
+            </svg>
+            <div class="name">疑问</div>
+            <div class="code-name">#icon-yiwen</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-zanting"></use>
+            </svg>
+            <div class="name">暂停</div>
+            <div class="code-name">#icon-zanting</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-saoma"></use>
+            </svg>
+            <div class="name">扫码</div>
+            <div class="code-name">#icon-saoma</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-fenlei"></use>
+            </svg>
+            <div class="name">分类</div>
+            <div class="code-name">#icon-fenlei</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-shouye"></use>
+            </svg>
+            <div class="name">首页</div>
+            <div class="code-name">#icon-shouye</div>
+          </li>
+
+          <li class="dib">
+            <svg class="icon svg-icon" aria-hidden="true">
+              <use xlink:href="#icon-faxian"></use>
+            </svg>
+            <div class="name">发现</div>
+            <div class="code-name">#icon-faxian</div>
+          </li>
+
+        </ul>
+        <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+          <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+          <pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+          <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+        </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+    $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+
+</html>

src/assets/icon_shfw/iconfont.css

@@ -0,0 +1,203 @@
+@font-face {
+  font-family: "iconfont1";
+  /* Project id 2739587 */
+  src: url('iconfont.woff2?t=1628735134721') format('woff2'),
+    url('iconfont.woff?t=1628735134721') format('woff'),
+    url('iconfont.ttf?t=1628735134721') format('truetype');
+}
+
+.iconfont1 {
+  font-family: "iconfont1" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-chexiao:before {
+  content: "\e64e";
+}
+
+.icon-nanguo:before {
+  content: "\e64f";
+}
+
+.icon-kaixin:before {
+  content: "\e650";
+}
+
+.icon-cuowu:before {
+  content: "\e651";
+}
+
+.icon-pintuan:before {
+  content: "\e652";
+}
+
+.icon-zhengque:before {
+  content: "\e653";
+}
+
+.icon-yanshi:before {
+  content: "\e654";
+}
+
+.icon-suoding:before {
+  content: "\e655";
+}
+
+.icon-kaishi:before {
+  content: "\e656";
+}
+
+.icon-wode:before {
+  content: "\e657";
+}
+
+.icon-tianjia:before {
+  content: "\e658";
+}
+
+.icon-haoping:before {
+  content: "\e659";
+}
+
+.icon-tupian:before {
+  content: "\e65a";
+}
+
+.icon-shanchu:before {
+  content: "\e65b";
+}
+
+.icon-fuzhi:before {
+  content: "\e65c";
+}
+
+.icon-guanbi:before {
+  content: "\e65d";
+}
+
+.icon-chaxun:before {
+  content: "\e65e";
+}
+
+.icon-kuaidi:before {
+  content: "\e65f";
+}
+
+.icon-xiaoxi:before {
+  content: "\e660";
+}
+
+.icon-dianpu:before {
+  content: "\e661";
+}
+
+.icon-youjian:before {
+  content: "\e662";
+}
+
+.icon-zuohua:before {
+  content: "\e663";
+}
+
+.icon-guanzhu:before {
+  content: "\e664";
+}
+
+.icon-shipin:before {
+  content: "\e665";
+}
+
+.icon-guanzhu1:before {
+  content: "\e666";
+}
+
+.icon-zhuyi:before {
+  content: "\e667";
+}
+
+.icon-wode1:before {
+  content: "\e668";
+}
+
+.icon-gouwuche:before {
+  content: "\e669";
+}
+
+.icon-chaping:before {
+  content: "\e66a";
+}
+
+.icon-jine:before {
+  content: "\e66b";
+}
+
+.icon-shoucang:before {
+  content: "\e66c";
+}
+
+.icon-tixing:before {
+  content: "\e66d";
+}
+
+.icon-zhekou:before {
+  content: "\e66e";
+}
+
+.icon-zuobiao:before {
+  content: "\e66f";
+}
+
+.icon-youhua:before {
+  content: "\e670";
+}
+
+.icon-piaoquan:before {
+  content: "\e671";
+}
+
+.icon-shangpin:before {
+  content: "\e672";
+}
+
+.icon-bianji:before {
+  content: "\e673";
+}
+
+.icon-huangguan:before {
+  content: "\e674";
+}
+
+.icon-shijian:before {
+  content: "\e675";
+}
+
+.icon-fenxiang:before {
+  content: "\e676";
+}
+
+.icon-yiwen:before {
+  content: "\e677";
+}
+
+.icon-zanting:before {
+  content: "\e678";
+}
+
+.icon-saoma:before {
+  content: "\e679";
+}
+
+.icon-fenlei:before {
+  content: "\e67a";
+}
+
+.icon-shouye:before {
+  content: "\e67b";
+}
+
+.icon-faxian:before {
+  content: "\e67c";
+}

src/assets/icon_shfw/iconfont.json

@@ -0,0 +1,338 @@
+{
+  "id": "2739587",
+  "name": "gua",
+  "font_family": "iconfont1",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "4954905",
+      "name": "撤销",
+      "font_class": "chexiao",
+      "unicode": "e64e",
+      "unicode_decimal": 58958
+    },
+    {
+      "icon_id": "4954906",
+      "name": "难过",
+      "font_class": "nanguo",
+      "unicode": "e64f",
+      "unicode_decimal": 58959
+    },
+    {
+      "icon_id": "4954907",
+      "name": "开心",
+      "font_class": "kaixin",
+      "unicode": "e650",
+      "unicode_decimal": 58960
+    },
+    {
+      "icon_id": "4954908",
+      "name": "错误",
+      "font_class": "cuowu",
+      "unicode": "e651",
+      "unicode_decimal": 58961
+    },
+    {
+      "icon_id": "4954909",
+      "name": "拼团",
+      "font_class": "pintuan",
+      "unicode": "e652",
+      "unicode_decimal": 58962
+    },
+    {
+      "icon_id": "4954910",
+      "name": "正确",
+      "font_class": "zhengque",
+      "unicode": "e653",
+      "unicode_decimal": 58963
+    },
+    {
+      "icon_id": "4954911",
+      "name": "延时",
+      "font_class": "yanshi",
+      "unicode": "e654",
+      "unicode_decimal": 58964
+    },
+    {
+      "icon_id": "4954912",
+      "name": "锁定",
+      "font_class": "suoding",
+      "unicode": "e655",
+      "unicode_decimal": 58965
+    },
+    {
+      "icon_id": "4954913",
+      "name": "开始",
+      "font_class": "kaishi",
+      "unicode": "e656",
+      "unicode_decimal": 58966
+    },
+    {
+      "icon_id": "4954914",
+      "name": "我的2",
+      "font_class": "wode",
+      "unicode": "e657",
+      "unicode_decimal": 58967
+    },
+    {
+      "icon_id": "4954915",
+      "name": "添加",
+      "font_class": "tianjia",
+      "unicode": "e658",
+      "unicode_decimal": 58968
+    },
+    {
+      "icon_id": "4954916",
+      "name": "好评",
+      "font_class": "haoping",
+      "unicode": "e659",
+      "unicode_decimal": 58969
+    },
+    {
+      "icon_id": "4954917",
+      "name": "图片",
+      "font_class": "tupian",
+      "unicode": "e65a",
+      "unicode_decimal": 58970
+    },
+    {
+      "icon_id": "4954919",
+      "name": "删除",
+      "font_class": "shanchu",
+      "unicode": "e65b",
+      "unicode_decimal": 58971
+    },
+    {
+      "icon_id": "4954920",
+      "name": "复制",
+      "font_class": "fuzhi",
+      "unicode": "e65c",
+      "unicode_decimal": 58972
+    },
+    {
+      "icon_id": "4954921",
+      "name": "关闭",
+      "font_class": "guanbi",
+      "unicode": "e65d",
+      "unicode_decimal": 58973
+    },
+    {
+      "icon_id": "4954922",
+      "name": "查询",
+      "font_class": "chaxun",
+      "unicode": "e65e",
+      "unicode_decimal": 58974
+    },
+    {
+      "icon_id": "4954923",
+      "name": "快递",
+      "font_class": "kuaidi",
+      "unicode": "e65f",
+      "unicode_decimal": 58975
+    },
+    {
+      "icon_id": "4954924",
+      "name": "消息",
+      "font_class": "xiaoxi",
+      "unicode": "e660",
+      "unicode_decimal": 58976
+    },
+    {
+      "icon_id": "4954925",
+      "name": "店铺",
+      "font_class": "dianpu",
+      "unicode": "e661",
+      "unicode_decimal": 58977
+    },
+    {
+      "icon_id": "4954926",
+      "name": "邮件",
+      "font_class": "youjian",
+      "unicode": "e662",
+      "unicode_decimal": 58978
+    },
+    {
+      "icon_id": "4954927",
+      "name": "左滑",
+      "font_class": "zuohua",
+      "unicode": "e663",
+      "unicode_decimal": 58979
+    },
+    {
+      "icon_id": "4954928",
+      "name": "关注",
+      "font_class": "guanzhu",
+      "unicode": "e664",
+      "unicode_decimal": 58980
+    },
+    {
+      "icon_id": "4954929",
+      "name": "视频",
+      "font_class": "shipin",
+      "unicode": "e665",
+      "unicode_decimal": 58981
+    },
+    {
+      "icon_id": "4954930",
+      "name": "关注2",
+      "font_class": "guanzhu1",
+      "unicode": "e666",
+      "unicode_decimal": 58982
+    },
+    {
+      "icon_id": "4954931",
+      "name": "注意",
+      "font_class": "zhuyi",
+      "unicode": "e667",
+      "unicode_decimal": 58983
+    },
+    {
+      "icon_id": "4954932",
+      "name": "我的",
+      "font_class": "wode1",
+      "unicode": "e668",
+      "unicode_decimal": 58984
+    },
+    {
+      "icon_id": "4954933",
+      "name": "购物车",
+      "font_class": "gouwuche",
+      "unicode": "e669",
+      "unicode_decimal": 58985
+    },
+    {
+      "icon_id": "4954934",
+      "name": "差评",
+      "font_class": "chaping",
+      "unicode": "e66a",
+      "unicode_decimal": 58986
+    },
+    {
+      "icon_id": "4954935",
+      "name": "金额",
+      "font_class": "jine",
+      "unicode": "e66b",
+      "unicode_decimal": 58987
+    },
+    {
+      "icon_id": "4954936",
+      "name": "收藏",
+      "font_class": "shoucang",
+      "unicode": "e66c",
+      "unicode_decimal": 58988
+    },
+    {
+      "icon_id": "4954937",
+      "name": "提醒",
+      "font_class": "tixing",
+      "unicode": "e66d",
+      "unicode_decimal": 58989
+    },
+    {
+      "icon_id": "4954938",
+      "name": "折扣",
+      "font_class": "zhekou",
+      "unicode": "e66e",
+      "unicode_decimal": 58990
+    },
+    {
+      "icon_id": "4954939",
+      "name": "坐标",
+      "font_class": "zuobiao",
+      "unicode": "e66f",
+      "unicode_decimal": 58991
+    },
+    {
+      "icon_id": "4954940",
+      "name": "右滑",
+      "font_class": "youhua",
+      "unicode": "e670",
+      "unicode_decimal": 58992
+    },
+    {
+      "icon_id": "4954941",
+      "name": "票券",
+      "font_class": "piaoquan",
+      "unicode": "e671",
+      "unicode_decimal": 58993
+    },
+    {
+      "icon_id": "4954942",
+      "name": "商品",
+      "font_class": "shangpin",
+      "unicode": "e672",
+      "unicode_decimal": 58994
+    },
+    {
+      "icon_id": "4954943",
+      "name": "编辑",
+      "font_class": "bianji",
+      "unicode": "e673",
+      "unicode_decimal": 58995
+    },
+    {
+      "icon_id": "4954944",
+      "name": "皇冠",
+      "font_class": "huangguan",
+      "unicode": "e674",
+      "unicode_decimal": 58996
+    },
+    {
+      "icon_id": "4954945",
+      "name": "时间",
+      "font_class": "shijian",
+      "unicode": "e675",
+      "unicode_decimal": 58997
+    },
+    {
+      "icon_id": "4954946",
+      "name": "分享",
+      "font_class": "fenxiang",
+      "unicode": "e676",
+      "unicode_decimal": 58998
+    },
+    {
+      "icon_id": "4954947",
+      "name": "疑问",
+      "font_class": "yiwen",
+      "unicode": "e677",
+      "unicode_decimal": 58999
+    },
+    {
+      "icon_id": "4954948",
+      "name": "暂停",
+      "font_class": "zanting",
+      "unicode": "e678",
+      "unicode_decimal": 59000
+    },
+    {
+      "icon_id": "4954949",
+      "name": "扫码",
+      "font_class": "saoma",
+      "unicode": "e679",
+      "unicode_decimal": 59001
+    },
+    {
+      "icon_id": "4954950",
+      "name": "分类",
+      "font_class": "fenlei",
+      "unicode": "e67a",
+      "unicode_decimal": 59002
+    },
+    {
+      "icon_id": "4954951",
+      "name": "首页",
+      "font_class": "shouye",
+      "unicode": "e67b",
+      "unicode_decimal": 59003
+    },
+    {
+      "icon_id": "4954952",
+      "name": "发现",
+      "font_class": "faxian",
+      "unicode": "e67c",
+      "unicode_decimal": 59004
+    }
+  ]
+}

src/assets/icons/svg/404.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M121.718 73.272v9.953c3.957-7.584 6.199-16.05 6.199-24.995C127.917 26.079 99.273 0 63.958 0 28.644 0 0 26.079 0 58.23c0 .403.028.806.028 1.21l22.97-25.953h13.34l-19.76 27.187h6.42V53.77l13.728-19.477v49.361H22.998V73.272H2.158c5.951 20.284 23.608 36.208 45.998 41.399-1.44 3.3-5.618 11.263-12.565 12.674-8.607 1.764 23.358.428 46.163-13.178 17.519-4.611 31.938-15.849 39.77-30.513h-13.506V73.272H85.02V59.464l22.998-25.977h13.008l-19.429 27.187h6.421v-7.433l13.727-19.402v39.433h-.027zm-78.24 2.822a10.516 10.516 0 0 1-.996-4.535V44.548c0-1.613.332-3.124.996-4.535a11.66 11.66 0 0 1 2.713-3.68c1.134-1.032 2.49-1.864 4.04-2.468 1.55-.605 3.21-.908 4.982-.908h11.292c1.77 0 3.431.303 4.981.908 1.522.604 2.85 1.41 3.986 2.418l-12.26 16.303v-2.898a1.96 1.96 0 0 0-.665-1.512c-.443-.403-.996-.604-1.66-.604-.665 0-1.218.201-1.661.604a1.96 1.96 0 0 0-.664 1.512v9.071L44.364 77.606a10.556 10.556 0 0 1-.886-1.512zm35.73-4.535c0 1.613-.332 3.124-.997 4.535a11.66 11.66 0 0 1-2.712 3.68c-1.134 1.032-2.49 1.864-4.04 2.469-1.55.604-3.21.907-4.982.907H55.185c-1.77 0-3.431-.303-4.981-.907-1.55-.605-2.906-1.437-4.041-2.47a12.49 12.49 0 0 1-1.384-1.512l13.727-18.217v6.375c0 .605.222 1.109.665 1.512.442.403.996.604 1.66.604.664 0 1.218-.201 1.66-.604a1.96 1.96 0 0 0 .665-1.512V53.87L75.97 36.838c.913.932 1.66 1.99 2.214 3.175.664 1.41.996 2.922.996 4.535v27.011h.028z"/></svg>

src/assets/icons/svg/bug.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M127.88 73.143c0 1.412-.506 2.635-1.518 3.669-1.011 1.033-2.209 1.55-3.592 1.55h-17.887c0 9.296-1.783 17.178-5.35 23.645l16.609 17.044c1.011 1.034 1.517 2.257 1.517 3.67 0 1.412-.506 2.635-1.517 3.668-.958 1.033-2.155 1.55-3.593 1.55-1.438 0-2.635-.517-3.593-1.55l-15.811-16.063a15.49 15.49 0 0 1-1.196 1.06c-.532.434-1.65 1.208-3.353 2.322a50.104 50.104 0 0 1-5.192 2.974c-1.758.87-3.94 1.658-6.546 2.364-2.607.706-5.189 1.06-7.748 1.06V47.044H58.89v73.062c-2.716 0-5.417-.367-8.106-1.102-2.688-.734-5.003-1.631-6.945-2.692a66.769 66.769 0 0 1-5.268-3.179c-1.571-1.057-2.73-1.94-3.476-2.65L33.9 109.34l-14.611 16.877c-1.066 1.14-2.344 1.711-3.833 1.711-1.277 0-2.422-.434-3.434-1.304-1.012-.978-1.557-2.187-1.635-3.627-.079-1.44.333-2.705 1.236-3.794l16.129-18.51c-3.087-6.197-4.63-13.644-4.63-22.342H5.235c-1.383 0-2.58-.517-3.592-1.55S.125 74.545.125 73.132c0-1.412.506-2.635 1.518-3.668 1.012-1.034 2.21-1.55 3.592-1.55h17.887V43.939L9.308 29.833c-1.012-1.033-1.517-2.256-1.517-3.669 0-1.412.505-2.635 1.517-3.668 1.012-1.034 2.21-1.55 3.593-1.55s2.58.516 3.593 1.55l13.813 14.106h67.396l13.814-14.106c1.012-1.034 2.21-1.55 3.592-1.55 1.384 0 2.581.516 3.593 1.55 1.012 1.033 1.518 2.256 1.518 3.668 0 1.413-.506 2.636-1.518 3.67l-13.814 14.105v23.975h17.887c1.383 0 2.58.516 3.593 1.55 1.011 1.033 1.517 2.256 1.517 3.668l-.005.01zM89.552 26.175H38.448c0-7.23 2.489-13.386 7.466-18.469C50.892 2.623 56.92.082 64 .082c7.08 0 13.108 2.541 18.086 7.624 4.977 5.083 7.466 11.24 7.466 18.469z"/></svg>

src/assets/icons/svg/build.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1568899741379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2054" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M960 591.424V368.96c0-0.288 0.16-0.512 0.16-0.768S960 367.68 960 367.424V192a32 32 0 0 0-32-32H96a32 32 0 0 0-32 32v175.424c0 0.288-0.16 0.512-0.16 0.768s0.16 0.48 0.16 0.768v222.464c0 0.288-0.16 0.512-0.16 0.768s0.16 0.48 0.16 0.768V864a32 32 0 0 0 32 32h832a32 32 0 0 0 32-32v-271.04c0-0.288 0.16-0.512 0.16-0.768S960 591.68 960 591.424z m-560-31.232v-160H608v160h-208z m208 64V832h-208v-207.808H608z m-480-224h208v160H128v-160z m544 0h224v160h-224v-160zM896 224v112.192H128V224h768zM128 624.192h208V832H128v-207.808zM672 832v-207.808h224V832h-224z" p-id="2055"></path></svg>

src/assets/icons/svg/chart.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 54.857h36.571V128H0V54.857zM91.429 27.43H128V128H91.429V27.429zM45.714 0h36.572v128H45.714V0z"/></svg>

src/assets/icons/svg/checkbox.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575982282951" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="902" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M828.40625 90.125H195.59375C137.375 90.125 90.125 137.375 90.125 195.59375v632.8125c0 58.21875 47.25 105.46875 105.46875 105.46875h632.8125c58.21875 0 105.46875-47.25 105.46875-105.46875V195.59375c0-58.21875-47.25-105.46875-105.46875-105.46875z m52.734375 738.28125c0 29.16-23.57015625 52.734375-52.734375 52.734375H195.59375c-29.109375 0-52.734375-23.574375-52.734375-52.734375V195.59375c0-29.109375 23.625-52.734375 52.734375-52.734375h632.8125c29.16 0 52.734375 23.625 52.734375 52.734375v632.8125z" p-id="903"></path><path d="M421.52890625 709.55984375a36.28125 36.28125 0 0 1-27.55265625-12.66890625L205.17453125 476.613125a36.28546875 36.28546875 0 0 1 55.10109375-47.22890625l164.986875 192.4846875 342.16171875-298.48078125a36.2896875 36.2896875 0 0 1 47.70984375 54.68765625L445.3859375 700.6203125a36.3234375 36.3234375 0 0 1-23.85703125 8.93953125z" p-id="904"></path></svg>

src/assets/icons/svg/clipboard.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M54.857 118.857h64V73.143H89.143c-1.902 0-3.52-.668-4.855-2.002-1.335-1.335-2.002-2.954-2.002-4.855V36.57H54.857v82.286zM73.143 16v-4.571a2.2 2.2 0 0 0-.677-1.61 2.198 2.198 0 0 0-1.609-.676H20.571c-.621 0-1.158.225-1.609.676a2.198 2.198 0 0 0-.676 1.61V16a2.2 2.2 0 0 0 .676 1.61c.451.45.988.676 1.61.676h50.285c.622 0 1.158-.226 1.61-.677.45-.45.676-.987.676-1.609zm18.286 48h21.357L91.43 42.642V64zM128 73.143v48c0 1.902-.667 3.52-2.002 4.855-1.335 1.335-2.953 2.002-4.855 2.002H52.57c-1.901 0-3.52-.667-4.854-2.002-1.335-1.335-2.003-2.953-2.003-4.855v-11.429H6.857c-1.902 0-3.52-.667-4.855-2.002C.667 106.377 0 104.759 0 102.857v-96c0-1.902.667-3.52 2.002-4.855C3.337.667 4.955 0 6.857 0h77.714c1.902 0 3.52.667 4.855 2.002 1.335 1.335 2.003 2.953 2.003 4.855V30.29c1 .622 1.856 1.29 2.569 2.003l29.147 29.147c1.335 1.335 2.478 3.145 3.429 5.43.95 2.287 1.426 4.383 1.426 6.291v-.018z"/></svg>

src/assets/icons/svg/code.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1546567861908" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2422" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M318.577778 819.2L17.066667 512l301.511111-307.2 45.511111 45.511111L96.711111 512l267.377778 261.688889zM705.422222 819.2l-45.511111-45.511111L927.288889 512l-267.377778-261.688889 45.511111-45.511111L1006.933333 512zM540.785778 221.866667l55.751111 11.150222L483.157333 802.133333l-55.751111-11.093333z" fill="#bfbfbf" p-id="2423"></path></svg>

src/assets/icons/svg/cuowu.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0zM593.066667 145.066667l-21.333333 486.4c0 29.866667-25.6 51.2-55.466667 51.2l-12.8 0c-29.866667 0-51.2-21.333333-55.466667-51.2L426.666667 145.066667c0-29.866667 21.333333-51.2 46.933333-51.2l68.266667 0C571.733333 93.866667 597.333333 115.2 593.066667 145.066667zM571.733333 913.066667C554.666667 930.133333 533.333333 938.666667 512 938.666667c-25.6 0-42.666667-8.533333-59.733333-25.6C435.2 896 426.666667 878.933333 426.666667 853.333333c0-25.6 8.533333-42.666667 25.6-59.733333C469.333333 776.533333 486.4 768 512 768c25.6 0 46.933333 8.533333 64 25.6 17.066667 17.066667 25.6 34.133333 25.6 59.733333C597.333333 878.933333 588.8 900.266667 571.733333 913.066667z" fill="#F7411C" /></svg>

src/assets/icons/svg/documentation.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M71.984 44.815H115.9L71.984 9.642v35.173zM16.094.05h63.875l47.906 38.37v76.74c0 3.392-1.682 6.645-4.677 9.044-2.995 2.399-7.056 3.746-11.292 3.746H16.094c-4.236 0-8.297-1.347-11.292-3.746-2.995-2.399-4.677-5.652-4.677-9.044V12.84C.125 5.742 7.23.05 16.094.05zm71.86 102.32V89.58h-71.86v12.79h71.86zm23.952-25.58V64H16.094v12.79h95.812z"/></svg>

src/assets/icons/svg/download.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1569915748289" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3062" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M768.35456 416a256 256 0 1 0-512 0 192 192 0 1 0 0 384v64a256 256 0 0 1-58.88-505.216 320.128 320.128 0 0 1 629.76 0A256.128 256.128 0 0 1 768.35456 864v-64a192 192 0 0 0 0-384z m-512 384h64v64H256.35456v-64z m448 0h64v64h-64v-64z" fill="#333333" p-id="3063"></path><path d="M539.04256 845.248V512.192a32.448 32.448 0 0 0-32-32.192c-17.664 0-32 14.912-32 32.192v333.056l-36.096-36.096a32.192 32.192 0 0 0-45.056 0.192 31.616 31.616 0 0 0-0.192 45.056l90.88 90.944a31.36 31.36 0 0 0 22.528 9.088 30.08 30.08 0 0 0 22.4-9.088l90.88-90.88a32.192 32.192 0 0 0-0.192-45.12 31.616 31.616 0 0 0-45.056-0.192l-36.096 36.096z" fill="#333333" p-id="3064"></path></svg>