feat(ZGPT-072): 针对ZGPT-051变更的临时解决方案，原需求的弹窗换为本需求弹窗（如图），点发送后，关闭信息弹窗，再弹出信息已发送，再点确定关闭弹窗。

app/src/assets/css/main.css

@@ -169,3 +169,26 @@ html,body {
   background: rgba(0, 213, 255, 0.3);
   opacity: 0.7;
 }
+
+
+
+.el-textarea > .el-textarea__inner {
+  background-color: #00D5FF23 !important;
+  color: #fff;
+  border: none;
+}
+
+
+.el-message-box {
+  background-color: rgba(0, 25, 55, 0.8);
+  border: 1px solid rgba(0, 213, 255, 0.6) !important;
+}
+.el-message-box .el-message-box__title, .el-message-box__message{
+  color: #fff;
+}
+
+.el-message-box__btns .el-button--default{
+  background: linear-gradient(180deg, rgba(68, 241, 255, 1) 0%, rgba(68, 241, 255, .69) 100%);
+  color: #fff;
+  border: none;
+}

app/src/components/MessageTipModalContent.vue

@@ -0,0 +1,79 @@
+<script>
+import { area } from '@/api/area'
+
+export default {
+  name: 'MessageTipModalContent',
+  data() {
+    return {
+      areaData: [],
+      areaValue: "",
+      content_: `市高层建筑消防安全“除险清患"专项行动领导小组办公室，将你区/县纳入重点督导库，请认真研判本辖区高层建筑火灾风险形势，采取针对性措施，切实消除隐患，遏制高层建筑火灾发生。`
+    }
+  },
+  created() {
+    area({
+      pageNum: 1,
+      pageSize: 100
+    }).then(res => {
+      this.areaData = res.data.rows
+    })
+  },
+  methods: {
+    sendSms() {
+      this.$alert('信息已发送', '信息提示', {
+        confirmButtonText: '确定',
+        distinguishCancelAndClose: true,
+        type: "success",
+        modal: false,
+        callback: action => {}
+      });
+    }
+  }
+}
+</script>
+
+<template >
+  <div>
+    <div class="message-tip-toolbar">
+      <el-select style="width: 150px;" size="small" placeholder="区域" v-model="areaValue">
+        <el-option  :value="item.areaTitle" :label="item.areaTitle" v-for="(item,index) in areaData" :key="index" ></el-option>
+      </el-select>
+    </div>
+    <div class="message-tip-content">
+      <el-input  type="textarea" v-model="content_" :rows="10" show-word-limit resize="none"></el-input>
+    </div>
+    <div class="message-tip-bottom">
+      <el-button size="small" @click="sendSms">发送</el-button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang='less'>
+.message-tip-toolbar {
+  display: flex;
+  padding-bottom: 10px;
+  justify-content: start;
+    // padding: 10px 10px 0px 20px;
+    ::v-deep(.el-input__inner) {
+    border: none;
+    background: linear-gradient(
+      360deg,
+      rgba(0, 148, 255, 0.5) 0%,
+      rgba(0, 148, 255, 0.31) 100%
+    );
+    color: #fff;
+  }
+}
+.message-tip-bottom {
+  display: flex;
+  padding: 10px 0px;
+  justify-content: end;
+
+
+  ::v-deep(.el-button) {
+    background: linear-gradient(180deg, rgba(68, 241, 255, 1) 0%, rgba(68, 241, 255, .69) 100%);
+    color: #fff;
+    border: none;
+  }
+}
+</style>

app/src/views/Home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="padding: 0px 35px; display: flex; justify-content: space-between">
+  <div style="padding: 0px 35px; display: flex; justify-content: space-between; ">
     <div>
       <border-panel
         height="302px"
@@ -27,6 +27,7 @@
         <div style="position: absolute; top: 10px; width: 500px">
           <SearchBox :area.sync="qy" />
         </div>
+        <div class="tips"  @click="getShoeInfo('smsMsgModal')" >提示</div>
       </div>
       <div>
         <border-panel
@@ -81,10 +82,13 @@
       <!-- 风险问号弹窗 -->
       <basic-modal top="30px" ref="whFxModal" name="高层建筑消防安全风险分级分色判定标准" width="90%">
       <div style="display: flex; flex-direction: column; justify-content: center">
-        <img class="imgs" src="../../assets/images/fxyj33.png" />
-        <!-- <div v-html="textInfo"></div> -->
+        <img class="imgs" src="../../assets/images/fxyjj.png" />
       </div>
     </basic-modal>
+      <!-- 短信提示弹窗 -->
+    <basic-modal top="120px" ref="smsMsgModal" name="信息提示" width="50%">
+      <MessageTipModalContent />
+    </basic-modal>
   </div>
 </template>
 <script>
@@ -102,6 +106,7 @@ import zzglModul from "./components/zzglModul.vue";
 import { totaldata, getJqdt, getZxgjtj, getJrjzsbs, getDtskgzList } from "@/api/index.js";
 import { fxfb } from "@/api/risk";
 import { formatCityData, createMapChartWindowInfo } from "@/utils";
+import MessageTipModalContent from '@/components/MessageTipModalContent.vue'
 
 export default {
   name: "HomePage",
@@ -117,6 +122,7 @@ export default {
     BasicInfoModalContent,
     SearchBox,
     zzglModul,
+    MessageTipModalContent
   },
   data() {
     return {
@@ -801,4 +807,17 @@ export default {
   /* width: 100%;
   height: 700px; */
 }
+
+.tips {
+  color: #9BC3FF;
+  background: url('../../assets/images/border.png') no-repeat;
+  background-size: 100% 100%;
+  background-color: transparent;
+  position: absolute;
+  bottom: 20px;
+  left: 5px;
+  box-sizing: border-box;
+  padding: 10px 20px;
+  cursor: pointer;
+}
 </style>