ui优化
This commit is contained in:
parent
a85a818364
commit
f49f86c38e
@ -16,9 +16,10 @@ export function tagList() {
|
||||
});
|
||||
}
|
||||
|
||||
export function addPlink(){
|
||||
export function addPlink(data){
|
||||
return request({
|
||||
url: '/plink/add',
|
||||
method: 'post'
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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="">
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user