Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7941d2aa 1 parent 00534532

🌈 style: 主基调颜色调整

Inline Side-by-side
Showing 22 changed files with 122 additions and 74 deletions
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-26 23:52:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-01 17:39:48
* @LastEditTime: 2022-06-02 21:31:28
* @FilePath: /tswj/src/App.vue
* @Description:
-->
......@@ -54,10 +54,10 @@ body {
body {
position: relative;
/* --van-white: #fff;
--van-blue: #1989fa;
--van-button-primary-color: var(--van-white);
--van-button-primary-background: var(--van-primary-color); */
// --van-white: #fff;
// --van-blue: #1989fa;
// --van-button-primary-color: var(--van-white);
// --van-button-primary-background: var(--van-primary-color);
/* 全局修改主色调 */
// --van-blue: #F9D95C;
......
......@@ -3,4 +3,6 @@
/* ============ 颜色 ============ */
// 主色调
@base-color: #F9EA57;
@base-color: #11D2B1;
// 文字颜色
@base-font-color: #FFFFFF;
......
......@@ -41,15 +41,15 @@
</div>
</div>
</div>
<div v-if="status === 'PENDING'" class="van-hairline--top" style="padding: 0 1rem;">
<div v-if="status === 'PENDING'" class="van-hairline--top book-handle">
<van-row>
<van-col offset="3" style="padding: 1rem;" @click="onRefuse()">
<div style="background: #B4B4B3; border-radius: 15px; color: #FFFFFF; padding: 0.25rem 0.8rem;">
<div class="disagree-btn">
<van-icon name="close" />&nbsp;不通过
</div>
</van-col>
<van-col style="padding: 1rem;" @click="onPass()">
<div style="background: #F9D95C; border-radius: 15px; color: #713610; padding: 0.25rem 1.5rem;">
<div class="agree-btn" style="">
<van-icon name="passed" />&nbsp;通过
</div>
</van-col>
......@@ -78,7 +78,7 @@
</div>
</van-overlay>
<van-dialog v-model:show="show" title="温馨提示" show-cancel-button confirmButtonColor="#F9D95C" @confirm="handleAudit('enable')" @cancel="onCancel">
<van-dialog v-model:show="show" title="温馨提示" show-cancel-button :confirmButtonColor="styleColor.baseColor" @confirm="handleAudit('enable')" @cancel="onCancel">
<div style="padding: 1rem; text-align: center;">是否确认审核通过该视频 ？</div>
</van-dialog>
</template>
......@@ -98,6 +98,7 @@ import MuiPlayer from 'mui-player'
import axios from '@/utils/axios';
import _ from 'lodash';
import tools from '@/common/tool'
import { styleColor } from '@/constant.js';
import { useRoute, useRouter } from 'vue-router'
import { Toast } from 'vant';
......@@ -259,6 +260,21 @@ export default {
font-size: 1rem;
}
}
.book-handle {
padding: 0 1rem;
.disagree-btn {
background: #B4B4B3;
border-radius: 15px;
color: #FFFFFF;
padding: 0.25rem 0.8rem;
}
.agree-btn {
background: @base-color;
border-radius: 15px;
color: @base-font-color;
padding: 0.25rem 1.5rem;
}
}
}
.wrapper {
......
......@@ -107,7 +107,7 @@ export default {
}
.upload {
color: #713610;
color: @base-font-color;
background-color: @base-color;
border-radius: 15px;
width: 4rem;
......
......@@ -131,7 +131,7 @@ export default {
background: @base-color;
border-radius: 24px;
border: 1px solid @base-color;
color: #713610;
color: @base-font-color;
font-weight: bold;
margin-left: 1rem;
margin-bottom: 1rem;
......
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-31 18:32:38
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-01 19:17:16
* @LastEditTime: 2022-06-02 21:15:28
* @FilePath: /tswj/src/components/DonateBar/index.vue
* @Description: 爱心助力底部固定栏
-->
......@@ -81,7 +81,7 @@ const closeDonate = (v) => {
font-weight: bold;
border-radius: 24px;
// border: 1px solid F7F7F7;
color: #713610;
color: @base-font-color;
background-color: @base-color;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
}
......
......@@ -2,13 +2,13 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-06-02 11:23:16
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-02 20:02:30
* @LastEditTime: 2022-06-02 21:41:36
* @FilePath: /tswj/src/components/DonateFlower/agreement.js
* @Description:
*/
const str = '上海XX益基金会'
const html = `
<div style="text-align: center; font-weight: bold; margin-bottom: 1rem; font-size: 1.25rem; color: #713610;">
<div style="text-align: center; font-weight: bold; margin-bottom: 1rem; font-size: 1.25rem; color: #11D2B1;">
捐赠协议
</div>
<div style="text-align: justify; color: #231815; font-size: 1.05rem;">
......
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-31 22:09:58
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-02 20:04:23
* @LastEditTime: 2022-06-02 21:40:50
* @FilePath: /tswj/src/components/DonateFlower/index.vue
* @Description: 捐花组件
-->
......@@ -56,14 +56,14 @@
</van-col>
</van-row>
</div>
<van-row style="margin: 1rem 0;">
<van-row class="agree-wrapper">
<van-col span="12" offset="8">
<div style="display: flex;align-items: center; box-sizing: content-box;">
<div style="display: flex; flex-direction: column; justify-content: center;">
<div class="agree-content">
<div class="btn">
<van-checkbox v-model="agreed" checked-color="#ee0a24">同意&nbsp;</van-checkbox>
</div>
<div style="display: flex; flex-direction: column; justify-content: center;">
<span style="text-decoration: underline; color: #713610;" @click="handleDA">捐赠协议</span>
<div class="text">
<span @click="handleDA">捐赠协议</span>
</div>
</div>
</van-col>
......@@ -219,20 +219,21 @@ const closeDA = () => {
.base-item {
text-align: center;
color: #713610;
padding: 0.5rem 0;
}
.checked-item {
background: #F9EA57;
color: @base-font-color;
background: @base-color;
border-radius: 3px;
border: 1px solid #F9EA57;
border: 1px solid @base-color;
}
.uncheck-item {
background: #FFFFFF;
color: @base-color;
background: @base-font-color;
border-radius: 3px;
border: 1px solid #713610;
border: 1px solid @base-color;
}
}
......@@ -253,6 +254,21 @@ const closeDA = () => {
margin-left: 1rem;
}
}
.agree-wrapper {
margin: 1rem 0;
.agree-content {
display: flex;align-items: center; box-sizing: content-box;
.btn {
display: flex; flex-direction: column; justify-content: center;
}
.text {
display: flex; flex-direction: column; justify-content: center;
span {
text-decoration: underline; color: #11D2B1;
}
}
}
}
.donate-number {
padding: 1rem;
......@@ -296,7 +312,7 @@ const closeDA = () => {
font-weight: bold;
border-radius: 24px;
// border: 1px solid F7F7F7;
color: #713610;
color: @base-font-color;
background-color: @base-color;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
}
......
......@@ -39,6 +39,7 @@ import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useCountDown } from '@vant/use';
import { wxInfo } from '@/utils/tools';
import { styleColor } from '@/constant.js';
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
......@@ -71,9 +72,9 @@ defineExpose({
})
const themeVars = {
buttonPrimaryBackground: '#F9D95C',
buttonPrimaryBorderColor: '#F9D95C',
buttonPrimaryColor: '#713610',
buttonPrimaryBackground: styleColor.baseColor,
buttonPrimaryBorderColor: styleColor.baseColor,
buttonPrimaryColor: styleColor.baseFontColor,
CellVerticalPadding: '14px'
};
......
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-04-21 10:04:58
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-01 17:07:58
* @LastEditTime: 2022-06-02 21:18:10
* @FilePath: /tswj/src/components/MyButton/index.vue
* @Description:
-->
......@@ -64,7 +64,7 @@ export default {
background: @base-color;
border-radius: 24px;
border: 1px solid @base-color;
color: #713610;
color: @base-font-color;
font-weight: bold;
}
.button-plain {
......@@ -74,10 +74,10 @@ export default {
padding: 0.6rem;
margin: 0.5rem;
font-size: 1rem;
background: #FFFFFF;
background: @base-font-color;
border-radius: 24px;
border: 1px solid #713610;
color: #713610;
border: 1px solid @base-color;
color: @base-color;
font-weight: bold;
}
.button-custom {
......
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-25 18:34:17
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-05-31 14:28:40
* @LastEditTime: 2022-06-02 21:14:14
* @FilePath: /tswj/src/constant.js
* @Description:
*/
......@@ -14,5 +14,6 @@ export const JSJ_FORM_B = 'https://jsj.onwall.cn/f/g7D0MT';
// 颜色变量
export const styleColor = {
baseColor: '#F9EA57'
baseColor: '#11D2B1',
baseFontColor: '#FFFFFF'
}
......
......@@ -2,45 +2,51 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-26 10:08:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-05-31 14:28:12
* @LastEditTime: 2022-06-02 21:50:17
* @FilePath: /tswj/src/settings/designSetting.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @Description:
*/
import { ref } from 'vue';
import { styleColor } from '@/constant.js';
export const styleObject1 = ref({
backgroundColor: '#FFFFFF',
color: '#0B3A72',
borderColor: '#0B3A72'
backgroundColor: styleColor.baseFontColor,
color: styleColor.baseColor,
borderColor: styleColor.baseColor
})
export const styleObject2 = ref({
backgroundColor: styleColor.baseColor,
color: '#0B3A72',
color: styleColor.baseFontColor,
borderColor: styleColor.baseColor
})
export const styleObject3 = ref({
backgroundColor: '#F4675A',
color: '#FFFFFF',
color: styleColor.baseFontColor,
borderColor: '#F4675A'
})
export const styleObject4 = ref({
backgroundColor: '#FFFFFF',
backgroundColor: styleColor.baseFontColor,
color: '#713610',
borderColor: '#713610'
})
export const styleObject5 = ref({
backgroundColor: '#FFFFFF',
backgroundColor: styleColor.baseFontColor,
color: '#FDD347',
borderColor: '#FDD347'
})
export const styleObject6 = ref({
backgroundColor: '#FFFFFF',
backgroundColor: styleColor.baseFontColor,
color: '#777777',
borderColor: '#777777'
})
export const styleObject7 = ref({
backgroundColor: styleColor.baseFontColor,
color: '#0B3A72',
borderColor: '#0B3A72'
})
......
<template>
<div class="">
<van-tabs v-model:active="active" sticky @click-tab="onClickTab" color="#F9D95C" background="#F7F7F7"
<van-tabs v-model:active="active" sticky @click-tab="onClickTab" :color="styleColor.baseColor" background="#F7F7F7"
title-active-color="#222222" title-inactive-color="#777777">
<van-tab title="待审核" :badge="prod_num" :title-style="titleStyle">
<template v-if="!active">
......@@ -38,6 +38,7 @@ import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import _ from 'lodash'
import { Toast } from 'vant';
import { styleColor } from '@/constant.js';
const titleStyle = {
fontSize: '1rem'
......
......@@ -53,6 +53,7 @@
<script setup>
import Cookies from 'js-cookie'
import ImageSliderVerify from '@/components/ImageSliderVerify/index.vue'
import { styleColor } from '@/constant.js';
import { ref, onMounted } from 'vue';
import { Toast } from 'vant'
......@@ -227,9 +228,9 @@ const onSubmit = (values) => {
};
const themeVars = {
buttonPrimaryBackground: '#F9D95C',
buttonPrimaryBorderColor: '#F9D95C',
buttonPrimaryColor: '#713610',
buttonPrimaryBackground: styleColor.baseColor,
buttonPrimaryBorderColor: styleColor.baseColor,
buttonPrimaryColor: styleColor.baseFontColor,
CellVerticalPadding: '14px'
};
......@@ -274,7 +275,7 @@ body {
margin: 16px;
background-color: @base-color;
text-align: center;
color: #713610;
color: @base-font-color;
font-size: 2.25vh;
padding: 1.5vh;
border-radius: 5px;
......
<template>
<div style="background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%); padding: 1rem; text-align: center;">
<div style="background: #CFF; padding: 1rem; text-align: center;">
<van-image v-if="myKgInfo.logo" round width="4rem" height="4rem" :src="myKgInfo.logo" />
<van-image v-else round width="4rem" height="4rem" :src="icon_avatar" />
<p style="margin-top: 1rem; font-size: 1.05rem; font-weight: bold;">{{ myKgInfo.name }}</p>
......
......@@ -26,7 +26,6 @@
<van-row>
<van-col span="12">
<span class="bg-gradient">作品演绎</span>
<!-- <div style="background-color: #F9D95C; width: 70px; height: 4px;"></div> -->
</van-col>
<van-col span="12">
<div style="font-size: 1rem; color: #999999; text-align: right;">
......@@ -377,7 +376,7 @@ const goToDetail = (v) => { // 跳转作品详情页
border-radius: 15px;
padding: 0.5rem;
text-align: center;
color: #222222;
color: @base-font-color;
margin: 0 0.25rem;
}
......
......@@ -161,7 +161,8 @@ onBeforeRouteLeave(() => {
.person-index-page {
.header-wrapper {
// background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%);
background: @base-color;
// background: @base-color;
background: #CFF;
.info {
padding: 2rem;
......@@ -180,10 +181,10 @@ onBeforeRouteLeave(() => {
.toggle-user {
float: right;
font-size: 0.8rem;
background-color: white;
background-color: @base-font-color;
border-radius: 15px;
padding: 5px 10px;
color: #713610;
color: @base-color;
}
}
......
......@@ -317,7 +317,7 @@ onMounted(() => {
font-weight: bold;
border-radius: 24px;
// border: 1px solid F7F7F7;
color: #713610;
color: @base-font-color;
background-color: @base-color;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
}
......
......@@ -116,7 +116,8 @@ watch(show, (v) => {
<style lang="less" scoped>
.donate-list-page {
.donate-header {
background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%);
// background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%);
background: #CFF;
padding: 1rem;
text-align: center;
color: #713610;
......
......@@ -43,6 +43,7 @@ import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import { Toast } from 'vant';
import _ from 'lodash'
import { styleColor } from '@/constant.js';
const { lock_btn, fileList, upload_image, metaId, afterRead, beforeDelete } = useUpload(); // 上传图片模块
......@@ -51,9 +52,9 @@ const $router = useRouter();
// 自定义修改组件样式
const themeVars = {
buttonPrimaryBackground: '#F9D95C',
buttonPrimaryBorderColor: '#F9D95C',
buttonPrimaryColor: '#713610',
buttonPrimaryBackground: styleColor.baseColor,
buttonPrimaryBorderColor: styleColor.baseColor,
buttonPrimaryColor: styleColor.baseFontColor,
};
// 编辑状态
......@@ -174,7 +175,7 @@ export default {
.add-user-page {
padding: 1rem;
.title {
color: #713610;
color: @base-color;
font-size: 1.25rem;
padding: 1rem;
text-align: center;
......
......@@ -53,7 +53,7 @@
<my-button v-else type="custom" :custom-style="styleObject5">已认证</my-button>
</div>
<div>
<my-button v-if="userInfo.status === 'enable'" type="custom" :custom-style="styleObject1"
<my-button v-if="userInfo.status === 'enable'" type="custom" :custom-style="styleObject7"
@on-click="handleUser('ADD')">新增儿童</my-button>
<my-button v-else type="custom" :custom-style="styleObject6" @on-click="showNotice = true">新增儿童</my-button>
</div>
......@@ -95,7 +95,7 @@ import { icon_avatar } from '@/utils/generateIcons.js'
import { changePerformerAPI, myInfoAPI, myPerformerAPI } from '@/api/C/me.js'
import meRoute from '@/router/routes/modules/me'
// 自定义按钮颜色样式
import { styleObject1, styleObject4, styleObject5, styleObject6 } from '@/settings/designSetting.js'
import { styleObject7, styleObject4, styleObject5, styleObject6 } from '@/settings/designSetting.js'
import { useGo } from '@/hooks/useGo'
import { killPages } from '@/hooks/useKeepAlive'
......@@ -192,7 +192,8 @@ const handleUser = (type) => {
<style lang="less" scoped>
.me-index-page {
.header-wrapper {
background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%);
// background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%);
background: #CFF;
.info {
padding: 2rem;
......@@ -211,10 +212,10 @@ const handleUser = (type) => {
.toggle-user {
float: right;
font-size: 0.8rem;
background-color: white;
background-color: @base-font-color;
border-radius: 15px;
padding: 5px 10px;
color: #713610;
color: @base-color;
}
}
......
......@@ -47,13 +47,14 @@ import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import axios from '@/utils/axios';
import { Toast } from 'vant';
import { styleColor } from '@/constant.js';
const $router = useRouter();
const themeVars = {
buttonPrimaryBackground: '#F9D95C',
buttonPrimaryBorderColor: '#F9D95C',
buttonPrimaryColor: '#713610',
buttonPrimaryBackground: styleColor.baseColor,
buttonPrimaryBorderColor: styleColor.baseColor,
buttonPrimaryColor: styleColor.baseFontColor,
};
/******************** 输入框控件 START ********************/
......@@ -218,7 +219,7 @@ export default {
.verify-user-page {
padding: 1rem;
.title {
color: #713610;
color: @base-color;
font-size: 1.25rem;
padding: 1rem;
text-align: center;
......