feat: 所有页面新增右下角图标,修改登录弹窗,修改样式

pull/138/head
刘释隆 1 year ago
parent adfba0701e
commit 49a7e5c053

1
components.d.ts vendored

@ -53,6 +53,7 @@ declare module 'vue' {
NUpload: typeof import('naive-ui')['NUpload'] NUpload: typeof import('naive-ui')['NUpload']
NUploadDragger: typeof import('naive-ui')['NUploadDragger'] NUploadDragger: typeof import('naive-ui')['NUploadDragger']
Quill: typeof import('./src/components/RichEditor/Quill.vue')['default'] Quill: typeof import('./src/components/RichEditor/Quill.vue')['default']
Robot: typeof import('./src/components/Robot/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']
Search: typeof import('./src/components/Search/Search.vue')['default'] Search: typeof import('./src/components/Search/Search.vue')['default']

@ -0,0 +1,61 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 33</title>
<defs>
<rect id="path-1" x="0" y="0" width="32" height="32"></rect>
<linearGradient x1="103.941749%" y1="-9.86447236%" x2="15.6759798%" y2="100%" id="linearGradient-3">
<stop stop-color="#94B3FF" offset="0%"></stop>
<stop stop-color="#3955FF" offset="100%"></stop>
</linearGradient>
<path d="M4.81965071,11.9835294 C4.81965071,18.6007843 10.107091,23.964183 16.6334651,23.964183 C23.1570041,23.964183 28.4444444,18.6007843 28.4444444,11.9835294 C28.4444444,5.36339869 23.1570041,0 16.6334651,0 C10.107091,0 4.81965071,5.36339869 4.81965071,11.9835294 Z" id="path-4"></path>
<filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-5">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.328065454 0 0 0 0 0.41948512 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<rect id="path-6" x="0" y="0" width="28.3508865" height="28.7581699"></rect>
<path d="M2.26807092,15.4345098 C2.26807092,22.0517647 7.55551126,27.4151634 14.0818853,27.4151634 C20.6054243,27.4151634 25.8928647,22.0517647 25.8928647,15.4345098 C25.8928647,8.81437908 20.6054243,3.45098039 14.0818853,3.45098039 C7.55551126,3.45098039 2.26807092,8.81437908 2.26807092,15.4345098 Z" id="path-8"></path>
<linearGradient x1="50.4938081%" y1="35.9999974%" x2="0%" y2="114.811198%" id="linearGradient-9">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<filter x="-338.5%" y="-333.7%" width="776.9%" height="767.3%" filterUnits="objectBoundingBox" id="filter-10">
<feGaussianBlur stdDeviation="5.75725631" in="SourceGraphic"></feGaussianBlur>
</filter>
</defs>
<g id="-index备份" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="index_1.0备份-21" transform="translate(-836.000000, -367.000000)">
<g id="编组-8备份-2" transform="translate(473.000000, 206.000000)">
<g id="画板-8" transform="translate(28.881832, 57.745953)">
<g id="画板-4" transform="translate(236.118168, 103.254047)">
<g id="编组-54备份" transform="translate(98.000000, 0.000000)">
<g id="编组-26" transform="translate(0.063866, 1.000000)">
<path d="M48,24 C48,37.2548455 37.2548455,48 24,48 C10.7451553,48 0,37.2548455 0,24 C0,10.7451553 10.7451553,0 24,0 C37.2548455,0 48,10.7451553 48,24 C48,24 48,24 48,24 Z" id="Ellipse-930" fill="#E9EEFF" fill-rule="nonzero"></path>
<g id="Group-1" transform="translate(7.936134, 8.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="蒙版"></g>
<g transform="translate(0.888889, 1.777778)">
<g id="路径">
<use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
<use fill="url(#linearGradient-3)" fill-rule="evenodd" xlink:href="#path-4"></use>
</g>
<g id="user-person-profile-block-account-circle-svgrepo-com-1" transform="translate(0.000000, 0.575163)">
<mask id="mask-7" fill="white">
<use xlink:href="#path-6"></use>
</mask>
<g id="路径"></g>
<path id="路径" d="M14.0818853,3.20098039 C20.7447477,3.20098039 26.1428647,8.67755358 26.1428647,15.4345098 C26.1428647,22.189044 20.7443,27.6651634 14.0818853,27.6651634 C7.41708336,27.6651634 2.01807092,22.1894977 2.01807092,15.4345098 C2.01807092,8.6770998 7.41663558,3.20098039 14.0818853,3.20098039 Z M14.0818853,3.70098039 C7.69438694,3.70098039 2.51807092,8.95165837 2.51807092,15.4345098 C2.51807092,21.9149209 7.69481587,27.1651634 14.0818853,27.1651634 C20.4665486,27.1651634 25.6428647,21.9144854 25.6428647,15.4345098 C25.6428647,8.9520939 20.4669775,3.70098039 14.0818853,3.70098039 Z" fill="#FFFFFF" fill-rule="nonzero"></path>
<path d="M11.3638777,13.9269889 C11.5944007,13.9269889 11.7907721,14.0082723 11.9529919,14.1708392 C12.1152118,14.333406 12.1963217,14.5301975 12.1963217,14.7612135 C12.1963217,14.9836734 12.1152118,15.1783258 11.9529919,15.3451707 C11.7907721,15.5120157 11.5944007,15.5954381 11.3638777,15.5954381 C11.1333548,15.5954381 10.9369834,15.5120157 10.7747636,15.3451707 C10.6125437,15.1783258 10.5314338,14.9836734 10.5314338,14.7612135 C10.5314338,14.5301975 10.6125437,14.333406 10.7747636,14.1708392 C10.9369834,14.0082723 11.1333548,13.9269889 11.3638777,13.9269889 Z M17.8185202,9.13982315 C18.1941872,9.13982315 18.5271648,9.20613331 18.817453,9.33875363 C19.1077411,9.47137395 19.3532054,9.64249695 19.5538457,9.85212262 C19.7544861,10.0617483 19.908168,10.2991814 20.0148916,10.5644221 C20.1216152,10.8296627 20.174977,11.0906253 20.174977,11.3473098 L20.174977,17.9055986 C20.174977,18.10239 20.1301531,18.2949034 20.0405053,18.4831387 C19.9508575,18.671374 19.8313271,18.8424969 19.681914,18.9965076 C19.532501,19.1505183 19.3617433,19.2745825 19.1696408,19.3687002 C18.9775384,19.4628178 18.7790325,19.5098766 18.5741232,19.5098766 L18.5741232,12.3355451 C18.5741232,12.1130852 18.5314338,11.9055986 18.4460549,11.7130852 C18.360676,11.5205718 18.2454146,11.3515879 18.1002705,11.2061333 C17.9551264,11.0606788 17.7865031,10.9451707 17.5944007,10.8596092 C17.4022982,10.7740478 17.1952545,10.731267 16.9732694,10.731267 L9.77583079,10.731267 C9.77583079,10.5430317 9.81852022,10.3547964 9.90389909,10.1665611 C9.98927796,9.97832582 10.1045394,9.80720283 10.2496835,9.65319214 C10.3948276,9.49918144 10.5655853,9.37511727 10.7619567,9.28099962 C10.9583281,9.18688197 11.1675064,9.13982315 11.3894914,9.13982315 L17.8185202,9.13982315 L17.8185202,9.13982315 Z M16.704326,11.5398232 C17.0885309,11.5398232 17.3617433,11.644636 17.5239631,11.8542617 C17.686183,12.0638873 17.7672929,12.3441012 17.7672929,12.6949034 L17.7672929,20.2542617 C17.7672929,20.4681654 17.6776451,20.6692349 17.4983495,20.8574702 C17.3190538,21.0457055 17.0927998,21.1398232 16.8195875,21.1398232 L9.05864829,21.1398232 C8.82812535,21.1398232 8.62321606,21.0457055 8.44392044,20.8574702 C8.26462481,20.6692349 8.174977,20.4424969 8.174977,20.1772563 L8.174977,12.4767215 C8.174977,12.2029248 8.24968351,11.9783258 8.39909653,11.8029248 C8.54850955,11.6275237 8.74701542,11.5398232 8.99461414,11.5398232 L16.704326,11.5398232 Z M16.1792459,13.4906253 C16.1792459,13.3965076 16.1493633,13.3195023 16.0895981,13.2596092 C16.0298329,13.1997162 15.9529919,13.1697697 15.8590752,13.1697697 L10.0831947,13.1697697 C9.98927796,13.1697697 9.91243698,13.1997162 9.85267177,13.2596092 C9.79290656,13.3195023 9.76302396,13.3965076 9.76302396,13.4906253 L9.76302396,16.3526574 C9.83986494,16.446775 9.91030251,16.5515879 9.97433666,16.6670959 C10.0383708,16.7826039 10.1173463,16.8916948 10.211263,16.9943686 C10.3051798,17.0970424 10.4289791,17.1847429 10.5826611,17.2574702 C10.7363431,17.3301975 10.9497902,17.3665611 11.2230026,17.3665611 C11.6242833,17.3665611 11.9508575,17.30239 12.2027251,17.1740478 C12.4545928,17.0457055 12.6765779,16.8831387 12.8686803,16.6863472 C13.0607828,16.4895558 13.2400784,16.2777911 13.4065672,16.0510531 C13.573056,15.8243151 13.7715618,15.6104114 14.0020848,15.4093419 C14.2326077,15.2082723 14.5186269,15.0371494 14.8601424,14.8959729 C15.2016579,14.7547964 15.6413591,14.675652 16.1792459,14.6585397 L16.1792459,13.4906253 L16.1792459,13.4906253 Z" id="形状" fill="url(#linearGradient-9)" fill-rule="nonzero" mask="url(#mask-7)"></path>
</g>
<path d="M15.5929876,24.1568627 C14.1839485,24.1568627 13.0414078,25.315817 13.0414078,26.745098 C13.0414078,28.1743791 14.1839485,29.3333333 15.5929876,29.3333333 C17.0020266,29.3333333 18.1445674,28.1743791 18.1445674,26.745098 C18.1445674,25.315817 17.0020266,24.1568627 15.5929876,24.1568627 Z" id="路径" fill="#8B9CFF" filter="url(#filter-10)"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.9 KiB

@ -0,0 +1,29 @@
<template>
<div class="ip_box" :style="canClick?'cursor: pointer;':''">
<img :src="IPImg" />
</div>
</template>
<script setup>
import IPImg from "@/assets/images/IP.png";
import { defineProps } from "vue";
defineProps({
canClick: {
type: Boolean,
default: () => false,
},
});
</script>
<style scoped lang="less">
.ip_box {
position: fixed;
bottom: 80px;
right: 20px;
img {
width: 80px;
height: auto;
}
}
</style>

@ -1,14 +1,24 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import testImg from "@/assets/images/test.png";
import {chunk} from 'lodash-es'
const emit = defineEmits(["changeShow"]); const emit = defineEmits(["changeShow"]);
function changeContent() { function changeContent() {
emit("changeShow"); emit("changeShow");
} }
const initRem = () => {
const designWidth = 1440;
const rempPx = 16;
const scale = window.innerWidth / designWidth;
document.documentElement.style.fontSize = scale * rempPx + "px";
};
onMounted(() => {
initRem();
});
const item = { const item = {
// img: "/src/assets/images/test.png", img: testImg,
img: "http://47.93.59.251/api/image/thumbnail_1755061416414842880.jpeg",
checked: false, checked: false,
title: "YP4567890545", title: "YP4567890545",
date: "2023-12-19 12:09:18", date: "2023-12-19 12:09:18",
@ -19,6 +29,7 @@ onMounted(() => {
for (let i = 0; i < 8; i++) { for (let i = 0; i < 8; i++) {
data.value.push(item as any); data.value.push(item as any);
} }
data.value = chunk(data.value,4)
}); });
</script> </script>
@ -40,14 +51,14 @@ onMounted(() => {
<DataHeader :hasColor="true" /> <DataHeader :hasColor="true" />
</div> </div>
<div class="data_wrapper"> <div class="data_wrapper" v-for="(sitem,sindex) in data" :key="sindex">
<div class="item" v-for="(item, index) in data" :key="index"> <div class="item" v-for="(item, index) in sitem" :key="index">
<div class="top"> <div class="top">
<div <div
class="img" class="img"
:style="`background:url(${item.img});background-size:100%;background-repeat: no-repeat;`" :style="`background:url(${item.img});background-size:100%;background-repeat: no-repeat;`"
> >
<div class="check_box"><n-checkbox size="medium" label=" " /></div> <!-- <div class="check_box"><n-checkbox size="medium" label=" " /></div> -->
</div> </div>
<div class="content"> <div class="content">
<div class="title">任务ID{{ item.title }}</div> <div class="title">任务ID{{ item.title }}</div>
@ -164,22 +175,26 @@ onMounted(() => {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
align-items: center; align-items: center;
justify-content: flex-start; // justify-content: flex-start;
justify-content: space-between;
flex: 1; flex: 1;
.item { .item {
width: 23%; min-width: 14.125rem;
border: 1px solid #ededed; border: 1px solid #ededed;
border-radius: 3px; border-radius: 3px;
padding: 8px 10px; padding: 8px 10px;
margin-right: 10px; margin-right: 20px;
margin-bottom: 16px;
.top { .top {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
.img { .img {
width: 50%; width: 84px;
height: 70px; height: 55px;
// height: auto;
object-fit: cover;
border-radius: 3px; border-radius: 3px;
.check_box { .check_box {
margin-left: 8px; margin-left: 8px;
@ -202,15 +217,21 @@ onMounted(() => {
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
.tag_item { .tag_item {
width: 31px; min-width: 31px;
height: 14px; min-height: 14px;
font-size: 10px; font-size: 10px;
padding: 1px 3px;
font-weight: bolder; font-weight: bolder;
text-align: left; text-align: left;
// color: #507afd; // color: #507afd;
line-height: 14px; line-height: 14px;
letter-spacing: 0.1px; letter-spacing: 0.1px;
margin-right: 8px; margin-right: 8px;
// opacity: 0.1;
background: #c0f7e4;
border-radius: 2px;
text-align: center;
white-space: nowrap
} }
} }
} }
@ -219,6 +240,9 @@ onMounted(() => {
flex-flow: row nowrap; flex-flow: row nowrap;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
div {
cursor: pointer;
}
.resovle_action { .resovle_action {
font-size: 12px; font-size: 12px;
font-weight: bolder; font-weight: bolder;
@ -230,7 +254,7 @@ onMounted(() => {
font-size: 12px; font-size: 12px;
font-weight: bolder; font-weight: bolder;
text-align: left; text-align: left;
color: #ff4e4f; color: #FF4E4F;
line-height: 17px; line-height: 17px;
margin-left: 15px; margin-left: 15px;
} }

@ -3,6 +3,8 @@ import { ref } from 'vue'
import Aside from './aside/Aside.vue' import Aside from './aside/Aside.vue'
import Content from './content/Content.vue' import Content from './content/Content.vue'
import ListContent from './content/ListContent.vue' import ListContent from './content/ListContent.vue'
import Robot from '@/components/Robot/index.vue'
defineOptions({ defineOptions({
name: 'FinalMain', name: 'FinalMain',
@ -24,6 +26,8 @@ function inputChange(keyword) {
<!-- 任务管理 --> <!-- 任务管理 -->
<!-- TODO:本地演示即可 上传注释注释 --> <!-- TODO:本地演示即可 上传注释注释 -->
<ListContent v-show="showList" @change-show="showList = false" /> <ListContent v-show="showList" @change-show="showList = false" />
<!-- 机器人 -->
<Robot />
</div> </div>
</template> </template>

@ -378,7 +378,7 @@ async function tasksLoadingCloseCallback() {
async function showLoginSuccessModal() { async function showLoginSuccessModal() {
const modal = LoginSuccessModalRef.value as any; const modal = LoginSuccessModalRef.value as any;
// modal.showModal() modal.showModal()
} }
// id // id
@ -621,6 +621,11 @@ const loadImgOver = (item) => {
console.log("loadImgOver", item); console.log("loadImgOver", item);
setTimeout(() => (item.loadOver = true), 2000); setTimeout(() => (item.loadOver = true), 2000);
}; };
defineExpose({
showLoginSuccessModal
})
</script> </script>
<template> <template>
@ -628,7 +633,7 @@ const loadImgOver = (item) => {
<div class="wrapper-header"> <div class="wrapper-header">
<div class="left"> <div class="left">
<SvgIcon size="32" name="magnifying" /> <SvgIcon size="32" name="magnifying" />
<span class="font">AI一键查重</span> <span class="font" style="margin-left: 19.2px;" >AI一键查重</span>
</div> </div>
<div class="flex-btn-icon"> <div class="flex-btn-icon">
<SvgIcon <SvgIcon

@ -69,6 +69,12 @@ defineExpose({
<div class="num_box">{{ toolsData?.approvedCount || 0 }}</div> <div class="num_box">{{ toolsData?.approvedCount || 0 }}</div>
<div class="title_box">已审批</div> <div class="title_box">已审批</div>
</div> </div>
<div class="item">
<SvgIcon name="modal_reImg" width="49" height="58" />
<div class="num_box">{{ 83 }}</div>
<div class="title_box">重复图片</div>
</div>
</div> </div>
<div class="footer" @click="viewRepeat"></div> <div class="footer" @click="viewRepeat"></div>
<!-- <div class="footer"> <!-- <div class="footer">

@ -1,6 +1,14 @@
<script lang="ts" setup> <script lang="ts" setup>
import Aside from './aside/Aside.vue' import Aside from './aside/Aside.vue'
import Content from './content/Content.vue' import Content from './content/Content.vue'
import Robot from '@/components/Robot/index.vue'
import {ref} from 'vue';
const contentRef:any = ref(null)
const showLoginModal = ()=>{
contentRef.value.showLoginSuccessModal();
}
</script> </script>
<template> <template>
@ -9,7 +17,10 @@ import Content from './content/Content.vue'
<Aside /> <Aside />
<!-- 内容 --> <!-- 内容 -->
<Content /> <Content ref="contentRef"/>
<!-- 机器人 -->
<Robot :canClick="true" @click="showLoginModal"/>
</div> </div>
</template> </template>

@ -3,6 +3,7 @@ import { ref } from "vue";
import Aside from "./aside/Aside.vue"; import Aside from "./aside/Aside.vue";
import Content from "./content/Content.vue"; import Content from "./content/Content.vue";
import DataHeader from "@/components/DataHeader/index.vue"; import DataHeader from "@/components/DataHeader/index.vue";
import Robot from '@/components/Robot/index.vue'
const asideRef: any = ref(null); const asideRef: any = ref(null);
@ -23,6 +24,7 @@ function setAsideItemName(text) {
<!-- 内容 --> <!-- 内容 -->
<Content @set-aside-item-name="setAsideItemName" /> <Content @set-aside-item-name="setAsideItemName" />
</div> </div>
<Robot />
</div> </div>
</template> </template>

@ -4,6 +4,9 @@ import { ref } from "vue";
import Aside from "./aside/Aside.vue"; import Aside from "./aside/Aside.vue";
import Content from "./content/Content.vue"; import Content from "./content/Content.vue";
import { useWorkOrder } from "@/store/modules/workOrder"; import { useWorkOrder } from "@/store/modules/workOrder";
import Robot from '@/components/Robot/index.vue'
const workStore = useWorkOrder(); const workStore = useWorkOrder();
const contentRef: any = ref(null); const contentRef: any = ref(null);
const ApprovalOver = (packageId) => { const ApprovalOver = (packageId) => {
@ -24,6 +27,7 @@ const ApprovalOver = (packageId) => {
<!-- 内容 --> <!-- 内容 -->
<Content ref="contentRef" /> <Content ref="contentRef" />
</div> </div>
<Robot />
</div> </div>
</template> </template>

Loading…
Cancel
Save