feat: 更换logo
Former-commit-id: 01401f1e9ba211c29e0baa6c224db93f88796d6c
This commit is contained in:
@@ -1,29 +1,34 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="padding: 0 15px" @click="toggleClick">
|
<div style="padding: 0 15px" @click="toggleClick">
|
||||||
<svg :class="{ 'is-active': isActive }" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
|
<svg
|
||||||
width="64" height="64">
|
:class="{ 'is-active': isActive }"
|
||||||
|
class="hamburger"
|
||||||
|
viewBox="0 0 1024 1024"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="64"
|
||||||
|
height="64"
|
||||||
|
>
|
||||||
<path
|
<path
|
||||||
d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
|
d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
defineProps({
|
defineProps({
|
||||||
isActive: {
|
isActive: {
|
||||||
required: true,
|
required: true,
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['toggleClick']);
|
const emit = defineEmits(['toggleClick']);
|
||||||
|
|
||||||
function toggleClick() {
|
function toggleClick() {
|
||||||
emit('toggleClick')
|
emit('toggleClick');
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="sidebar-logo-container" :class="{ collapse: isCollapse }">
|
<div class="sidebar-logo-container" :class="{ collapse: collapse }">
|
||||||
<transition name="sidebarLogoFade">
|
<transition name="sidebarLogoFade">
|
||||||
<router-link
|
<router-link
|
||||||
v-if="collapse"
|
v-if="collapse"
|
||||||
@@ -8,18 +8,18 @@
|
|||||||
to="/"
|
to="/"
|
||||||
>
|
>
|
||||||
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||||||
<h1 v-else class="sidebar-title">{{ title }}</h1>
|
<h1 v-else class="sidebar-title">vue3-element-admin</h1>
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
||||||
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||||||
<h1 class="sidebar-title">{{ title }}</h1>
|
<h1 class="sidebar-title">vue3-element-admin</h1>
|
||||||
</router-link>
|
</router-link>
|
||||||
</transition>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, toRefs } from 'vue';
|
import { reactive, toRefs } from 'vue';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
collapse: {
|
collapse: {
|
||||||
@@ -29,13 +29,11 @@ const props = defineProps({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
isCollapse: props.collapse
|
isCollapse: props.collapse,
|
||||||
|
logo: new URL(`../../../assets/logo.png`, import.meta.url).href
|
||||||
});
|
});
|
||||||
|
|
||||||
const { isCollapse } = toRefs(state);
|
const { logo } = toRefs(state);
|
||||||
|
|
||||||
const title = ref('vue3-element-admin');
|
|
||||||
const logo = ref('https://www.youlai.tech/files/blog/logo.png');
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@@ -62,8 +60,8 @@ const logo = ref('https://www.youlai.tech/files/blog/logo.png');
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
& .sidebar-logo {
|
& .sidebar-logo {
|
||||||
width: 32px;
|
width: 20px;
|
||||||
height: 32px;
|
height: 20px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -51,8 +51,8 @@
|
|||||||
<el-link
|
<el-link
|
||||||
target="_blank"
|
target="_blank"
|
||||||
type="warning"
|
type="warning"
|
||||||
href="http://youlaitech.gitee.io/youlai-mall"
|
href="https://www.youlai.tech/"
|
||||||
>官方文档(完善中..)</el-link
|
>官方文档</el-link
|
||||||
>
|
>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
@@ -95,7 +95,7 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export default {
|
export default {
|
||||||
name: 'index',
|
name: 'index'
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<!-- setup 无法设置组件名称,组件名称keepAlive必须 -->
|
<!-- setup 无法设置组件名称,组件名称keepAlive必须 -->
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export default {
|
export default {
|
||||||
name: 'Page401',
|
name: 'Page401'
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -10,16 +10,14 @@ import { reactive, toRefs } from 'vue';
|
|||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
errGif: new URL(
|
errGif: new URL(`../../assets/401_images/401.gif`, import.meta.url).href,
|
||||||
`../../assets/401_images/401.gif`,
|
|
||||||
import.meta.url).href,
|
|
||||||
|
|
||||||
ewizardClap:
|
ewizardClap:
|
||||||
'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
|
'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
|
||||||
dialogVisible: false,
|
dialogVisible: false
|
||||||
})
|
});
|
||||||
|
|
||||||
const { errGif, ewizardClap, dialogVisible } = toRefs(state)
|
const { errGif, ewizardClap, dialogVisible } = toRefs(state);
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
@@ -53,7 +51,12 @@ function back() {
|
|||||||
</ul>
|
</ul>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream." />
|
<img
|
||||||
|
:src="errGif"
|
||||||
|
width="313"
|
||||||
|
height="428"
|
||||||
|
alt="Girl has dropped her ice cream."
|
||||||
|
/>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-dialog v-model="dialogVisible" title="随便看">
|
<el-dialog v-model="dialogVisible" title="随便看">
|
||||||
@@ -62,7 +65,6 @@ function back() {
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.errPage-container {
|
.errPage-container {
|
||||||
width: 800px;
|
width: 800px;
|
||||||
|
|||||||
@@ -1,32 +1,51 @@
|
|||||||
<!-- setup 无法设置组件名称,组件名称keepAlive必须 -->
|
<!-- setup 无法设置组件名称,组件名称keepAlive必须 -->
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export default {
|
export default {
|
||||||
name: 'Page404',
|
name: 'Page404'
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
function message() {
|
function message() {
|
||||||
return 'The webmaster said that you can not enter this page...';
|
return 'The webmaster said that you can not enter this page...';
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="wscn-http404-container">
|
<div class="wscn-http404-container">
|
||||||
<div class="wscn-http404">
|
<div class="wscn-http404">
|
||||||
<div class="pic-404">
|
<div class="pic-404">
|
||||||
<img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404" />
|
<img
|
||||||
<img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404" />
|
class="pic-404__parent"
|
||||||
<img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404" />
|
src="@/assets/404_images/404.png"
|
||||||
<img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404" />
|
alt="404"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="pic-404__child left"
|
||||||
|
src="@/assets/404_images/404_cloud.png"
|
||||||
|
alt="404"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="pic-404__child mid"
|
||||||
|
src="@/assets/404_images/404_cloud.png"
|
||||||
|
alt="404"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="pic-404__child right"
|
||||||
|
src="@/assets/404_images/404_cloud.png"
|
||||||
|
alt="404"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="bullshit">
|
<div class="bullshit">
|
||||||
<div class="bullshit__oops">OOPS!</div>
|
<div class="bullshit__oops">OOPS!</div>
|
||||||
<div class="bullshit__info">
|
<div class="bullshit__info">
|
||||||
All rights reserved
|
All rights reserved
|
||||||
<a style="color: #20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
|
<a
|
||||||
|
style="color: #20a0ff"
|
||||||
|
href="https://wallstreetcn.com"
|
||||||
|
target="_blank"
|
||||||
|
>wallstreetcn</a
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="bullshit__headline">{{ message }}</div>
|
<div class="bullshit__headline">{{ message }}</div>
|
||||||
<div class="bullshit__info">
|
<div class="bullshit__info">
|
||||||
|
|||||||
@@ -53,10 +53,7 @@
|
|||||||
<single-upload v-model="item.url" :show-close="true" />
|
<single-upload v-model="item.url" :show-close="true" />
|
||||||
|
|
||||||
<div v-if="item.url">
|
<div v-if="item.url">
|
||||||
<el-link
|
<el-link type="danger" class="button" v-if="item.main == true"
|
||||||
type="danger"
|
|
||||||
class="button"
|
|
||||||
v-if="item.main == true"
|
|
||||||
>商品主图</el-link
|
>商品主图</el-link
|
||||||
>
|
>
|
||||||
<el-link
|
<el-link
|
||||||
@@ -64,7 +61,8 @@
|
|||||||
class="button"
|
class="button"
|
||||||
v-else
|
v-else
|
||||||
@click="changeMainPicture(index)"
|
@click="changeMainPicture(index)"
|
||||||
>设为主图</el-link>
|
>设为主图</el-link
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else>
|
<div v-else>
|
||||||
@@ -105,15 +103,15 @@ const dataFormRef = ref(ElForm);
|
|||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
modelValue: {
|
modelValue: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => {},
|
default: () => {}
|
||||||
},
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const goodsInfo: any = computed({
|
const goodsInfo: any = computed({
|
||||||
get: () => props.modelValue,
|
get: () => props.modelValue,
|
||||||
set: (value) => {
|
set: value => {
|
||||||
emit('update:modelValue', value);
|
emit('update:modelValue', value);
|
||||||
},
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
@@ -124,14 +122,14 @@ const state = reactive({
|
|||||||
{ url: undefined, main: false },
|
{ url: undefined, main: false },
|
||||||
{ url: undefined, main: false },
|
{ url: undefined, main: false },
|
||||||
{ url: undefined, main: false },
|
{ url: undefined, main: false },
|
||||||
{ url: undefined, main: false },
|
{ url: undefined, main: false }
|
||||||
] as Array<any>,
|
] as Array<any>,
|
||||||
rules: {
|
rules: {
|
||||||
name: [{ required: true, message: '请填写商品名称', trigger: 'blur' }],
|
name: [{ required: true, message: '请填写商品名称', trigger: 'blur' }],
|
||||||
originPrice: [{ required: true, message: '请填写原价', trigger: 'blur' }],
|
originPrice: [{ required: true, message: '请填写原价', trigger: 'blur' }],
|
||||||
price: [{ required: true, message: '请填写现价', trigger: 'blur' }],
|
price: [{ required: true, message: '请填写现价', trigger: 'blur' }],
|
||||||
brandId: [{ required: true, message: '请选择商品品牌', trigger: 'blur' }],
|
brandId: [{ required: true, message: '请选择商品品牌', trigger: 'blur' }]
|
||||||
},
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const { brandOptions, pictures, rules } = toRefs(state);
|
const { brandOptions, pictures, rules } = toRefs(state);
|
||||||
@@ -144,7 +142,7 @@ function loadData() {
|
|||||||
if (goodsId) {
|
if (goodsId) {
|
||||||
const mainPicUrl = goodsInfo.value.picUrl;
|
const mainPicUrl = goodsInfo.value.picUrl;
|
||||||
if (mainPicUrl) {
|
if (mainPicUrl) {
|
||||||
state.pictures.filter((item) => item.main)[0].url = mainPicUrl;
|
state.pictures.filter(item => item.main)[0].url = mainPicUrl;
|
||||||
}
|
}
|
||||||
const subPicUrls = goodsInfo.value.subPicUrls;
|
const subPicUrls = goodsInfo.value.subPicUrls;
|
||||||
if (subPicUrls && subPicUrls.length > 0) {
|
if (subPicUrls && subPicUrls.length > 0) {
|
||||||
@@ -177,14 +175,14 @@ function handleNext() {
|
|||||||
if (valid) {
|
if (valid) {
|
||||||
// 商品图片
|
// 商品图片
|
||||||
const mainPicUrl = state.pictures
|
const mainPicUrl = state.pictures
|
||||||
.filter((item) => item.main == true && item.url)
|
.filter(item => item.main == true && item.url)
|
||||||
.map((item) => item.url);
|
.map(item => item.url);
|
||||||
if (mainPicUrl && mainPicUrl.length > 0) {
|
if (mainPicUrl && mainPicUrl.length > 0) {
|
||||||
goodsInfo.value.picUrl = mainPicUrl[0];
|
goodsInfo.value.picUrl = mainPicUrl[0];
|
||||||
}
|
}
|
||||||
const subPicUrl = state.pictures
|
const subPicUrl = state.pictures
|
||||||
.filter((item) => item.main == false && item.url)
|
.filter(item => item.main == false && item.url)
|
||||||
.map((item) => item.url);
|
.map(item => item.url);
|
||||||
if (subPicUrl && subPicUrl.length > 0) {
|
if (subPicUrl && subPicUrl.length > 0) {
|
||||||
goodsInfo.value.subPicUrls = subPicUrl;
|
goodsInfo.value.subPicUrls = subPicUrl;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user