ui优化

src/api/plink/index.js

@@ -16,9 +16,10 @@ export function tagList() {
   });
 }
 
-export function addPlink(){
+export function addPlink(data){
   return request({
     url: '/plink/add',
-    method: 'post'
+    method: 'post',
+    data
   });
 }

src/components/wea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="info">
+  <div class="info" @click="gotoWea">
     <div class="loc flex items-center">
       <n-icon size="18" color="#8a2be2">
         <IosPin />
@@ -14,15 +14,23 @@
 </template>
 <script setup>
 import { IosPin } from "@vicons/ionicons4";
+import { ref } from "vue";
 const city = ref("合肥市");
 const addr = ref("安徽省合肥市");
 let now = ref({});
+const fLink = ref('')
+
+function gotoWea(){
+  window.open(fLink.value,"_blank")
+}
+
 onMounted(async () => { 
   const res = await $http.addr.getAddressByIP();
   console.log("111", res);
   city.value = res.city;
   addr.value = ['上海','重庆','北京','天津'].includes(res.province) ? res.country + res.city : res.province + res.city;
   const r = await $http.wea.getWeather({ city: city.value });
+  fLink.value = r.fxLink
   now.value = r.now;
 });
 </script>

src/views/home/navMenu.vue

@@ -3,7 +3,7 @@
     <n-card title="" style="margin-bottom: 16px" v-for="(ii, iii) in navList">
       <n-tabs default-value="0" justify-content="space-evenly" type="line">
         <n-tab-pane class="flex flex-wrap" :name="index + ''" :tab="item.menuClass" v-for="(item, index) in ii">
-          <div class="card mr-4 mb-4 rounded-md py-4 flex justify-center items-center w-[320px] bg-[#f2e8fc]"
+          <div class="card hover:shadow-[0px_0px_5px_1px_#8A2BE2] mr-4 mb-4 rounded-md py-4 flex justify-center items-center w-[320px] bg-[#f2e8fc]"
             @click="link(it.menuLink)" v-for="(it, idx) in item.children" :key="index">
             <div class="left mr-3">
               <img width="40" height="40" class="rounded-full bg-[white]" :src="it.menuIcon" alt="">

src/views/plink/left.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="grid grid-cols-3 md:grid-cols-1 gap-y-6 gap-x-[1.5%] justify-start px-12 py-4">
     <div class="" v-for="(item, index) in plinkList" :key="index" @click="plink(item.url)">
-      <div class="flex items-center hover:shadow-[0px_0px_5px_1px_#8A2BE2] mt-2 py-6 px-4 relative border-pp-500 border-[2px] rounded">
+      <div class="flex items-center hover:shadow-[0px_0px_5px_1px_#8A2BE2] mt-2 py-6 px-4 relative border-pp-200 border-[2px] rounded">
         <div class="absolute left-0 bottom-0 z-10 px-3 opacity-60 rounded bg-pp-300 text-[white] text-xs" >{{ item.name }}</div>
         <div class="absolute top-0 right-0 z-10 px-3 opacity-60 rounded bg-pp-300 text-[white] text-xs">{{ item.tagname }}</div>
         <div class="left mr-4">

src/views/plink/right.vue

@@ -12,19 +12,33 @@
         </n-divider>
       </div>
       <template v-if="isAdd">
-        <div @click="getInfo" class="get text-[12px] text-right text-pp-300 pr-2 italic underline">
+        <div @click="getInfo" class="get text-[12px] text-right text-pp-300 pr-2 italic mb-2 underline">
           一键获取
         </div>
         <div class="px-2">
-          <van-form required="auto" class="my-4 relative px-0">
-            <van-field required v-model="plinkData.name" placeholder="用户名"></van-field>
-            <van-field v-model="plinkData.avater" placeholder="头像url" />
-            <van-field v-model="plinkData.url" placeholder="链接地址" />
-            <n-select v-model:value="plinkData.tagNo" :options="tagList" />
-            <van-field required v-model="plinkData.title" placeholder="标题" />
-            <van-field type="textarea" v-model="plinkData.desc" placeholder="描述" />
-            <n-button type="primary" @click="addLink">提交</n-button>
-          </van-form>
+          <n-form :model="plinkData" size="tiny" label-placement="left" label-width="60">
+            <n-form-item-row label="用户名">
+              <n-input required v-model:value="plinkData.name" placeholder="用户名" />
+            </n-form-item-row>
+            <n-form-item-row label="头像url">
+              <n-input v-model:value="plinkData.avater" placeholder="头像url" />
+            </n-form-item-row>
+            <n-form-item-row label="链接地址">
+              <n-input v-model:value="plinkData.url" placeholder="链接地址" />
+            </n-form-item-row>
+            <n-form-item-row label="类型">
+              <n-select v-model:value="plinkData.tagno" :options="tagList" />
+            </n-form-item-row>
+            <n-form-item-row label="标题">
+              <n-input required v-model:value="plinkData.title" placeholder="标题" />
+            </n-form-item-row>
+            <n-form-item-row label="描述">
+              <n-input type="textarea" v-model:value="plinkData.desc" placeholder="描述" />
+            </n-form-item-row>
+            <n-form-item-row>
+              <n-button type="primary" @click="addPlink">提交</n-button>
+            </n-form-item-row>
+          </n-form>
         </div>
       </template>
     </div>
@@ -96,8 +110,8 @@ const plinkData = reactive({
   name: "",
   avater: "",
   desc: "",
-  tagNo: "1",
-  tagName: "",
+  tagno: "1",
+  tagname: "",
 });
 const tagList = ref([]);
 const route = useRoute()
@@ -107,7 +121,7 @@ const { fullPath } = route;
 const router = useRouter()
 const { push } = router;
 //mark method
-async function addLink() {
+async function addPlink() {
   if (!plinkData.name) {
     $msg.error("请输入用户名")
     return
@@ -129,7 +143,7 @@ async function addLink() {
     $msg.error("请输入描述")
     return
   }
-  plinkData.tagName = tagList.value.find(i => i.key == plinkData.tagNo).label
+  plinkData.tagname = tagList.value.find(i => i.key == plinkData.tagno).label
   const res = await $http.plink.addPlink(plinkData)
   if (res.code == 1) {
     $msg.success("添加成功")
@@ -138,8 +152,8 @@ async function addLink() {
     plinkData.name = ""
     plinkData.avater = ""
     plinkData.desc = ""
-    plinkData.tagNo = "1"
-    plinkData.tagName = ""
+    plinkData.tagno = "1"
+    plinkData.tagname = ""
   }
 }
 function getInfo() {
@@ -236,52 +250,20 @@ onMounted(async () => {
   width: 20vw;
 }
 
-:deep(.van-field) {
-  background-color: inherit;
-  padding: 0;
-}
 
-:deep(.van-field__control) {
-  padding: 6px 0;
-}
-
-:deep(.van-field__control):focus {
-  border-bottom: 1px solid @purple !important;
-}
-
-:deep(.n-base-selection) {
-
-  --n-border: none !important;
-  --n-border-active: none !important;
-  --n-border-hover: none !important;
-  --n-border-focus: none !important;
-  --n-box-shadow-active: none !important;
-  --n-box-shadow-focus: none !important;
-  --n-box-shadow-hover: none !important;
-  --n-color-active: none !important;
-  border-bottom: 1px solid #eee;
-
-
-}
-
-:deep(.n-base-selection .n-base-selection-label) {
-  background-color: inherit;
-  width: auto;
-  margin: 0 auto;
-}
-
-:deep(.n-base-selection-input) {
-  padding: 0 !important;
-  // text-align: center;
-}
-
-:deep(.n-base-selection .n-base-suffix) {
-  right: -20px;
-}
 
 :deep(.n-button) {
   width: 80%;
-  margin: 20px 10% 0;
+  margin: 10px 10% 0;
   border-radius: 20px;
 }
+:deep(.n-form-item-label__text) {
+  font-size: 12px;
+}
+:deep(.n-row){
+  margin-bottom: 10px !important;
+}
+:deep(.n-form-item){
+  align-items: center;
+}
 </style>