diff --git a/src/views/DNS.vue b/src/views/DNS.vue
index 84815f3b18a777a8158f6b6058ca0ef00de0a7a4..cdd9927756a9cb429262aae55e80df2a129fb398 100644
--- a/src/views/DNS.vue
+++ b/src/views/DNS.vue
@@ -1,17 +1,75 @@
 <template>
-  <button @click="parseHanle">解析</button>
+  <div id="container">
+      <!-- 描述 -->
+      <Desc ref="Desc_text"></Desc>
+      <!-- 原始框 -->
+      <textarea name="" id="" cols="160" rows="10" placeholder="域名" v-model="before_str"></textarea>
+      <!-- 转换按钮 -->
+      <div id="my_btn">
+          <button @click="parseHanle">解析</button>
+      </div>
+      <!-- 转换结果 -->
+      <textarea name="" id="" cols="160" rows="10" placeholder="解析的结果" v-model="after_str"></textarea>
+  </div>
 </template>
 
-
 <script setup>
+import { ref, onMounted } from "vue";
+import { ElMessage } from 'element-plus'
+import Desc from "../components/Desc.vue"
 import axios from 'axios';
 
-// 域名解析处理器
+
+let Desc_text = ref(null);
+
+onMounted(() => {
+  Desc_text.value.setDescText(`DNS域名解析服务，可用于测试域名是否解析成功。`)
+})
+// 原始串
+let before_str = ref("")
+// 解析串
+let after_str = ref("")
+
+// 解析处理器
 async function parseHanle() {
-  const res = await axios.get("http://139.159.151.0:8080/parse?domain=meibu1g.cn");
-  console.log(res);
-}   
+  // 判断空
+  if (before_str.value == "") {
+      ElMessage("请输入域名后解析")
+      return 0;
+  }
+  const res = await axios.get(`https://139.159.151.0/parse?domain=${before_str.value}`);
+  after_str.value = res.data;
+}
+
 </script>
 
 
-<style scoped></style>
\ No newline at end of file
+<style scoped>
+.text_box {
+  border: solid rgb(114 113 113) 1px;
+  height: 200px;
+  border-radius: 5px;
+}
+
+#my_btn {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0px;
+}
+
+textarea {
+  padding: 10px;
+}
+
+#my_btn button {
+  width: 90px;
+  height: 35px;
+  border: none;
+  background: linear-gradient(to right, #eae0e0, #dda5a5);
+  cursor: pointer;
+}
+
+#my_btn button:hover {
+  background: linear-gradient(to right, #eae0e0, #df6262);
+}
+</style>
\ No newline at end of file