From d629d9ee09eb91be19fd21f04f78a89f7d837c3a Mon Sep 17 00:00:00 2001
From: lijh <lijh>
Date: Fri, 14 Jan 2022 18:28:26 +0800
Subject: [PATCH] 样式调整
---
src/assets/md.less | 26 +-
src/components/layouts/main2-show.vue | 110 -------------
src/components/layouts/mdDetail.vue | 4
vue.config.js | 8
src/components/layouts/box5-article.vue | 4
src/components/layouts/box2-class.vue | 4
src/components/layouts/main1-show.vue | 44 +++++
src/components/layouts/box1-info.vue | 3
src/components/layouts/main.vue | 38 ++++
src/components/layouts/tagInfo.vue | 4
src/components/layouts/box6-articleList.vue | 17 +
src/main.js | 2
package.json | 61 +++---
src/components/layouts/main3-show.vue | 110 -------------
src/components/layouts/box4-minibox.vue | 6
15 files changed, 149 insertions(+), 292 deletions(-)
diff --git a/package.json b/package.json
index ce68bb1..25e272d 100644
--- a/package.json
+++ b/package.json
@@ -1,32 +1,33 @@
{
- "name": "default",
- "version": "0.1.0",
- "private": true,
- "scripts": {
- "dev": "vue-cli-service serve",
- "build": "vue-cli-service build"
- },
- "dependencies": {
- "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
- "@vue/babel-preset-jsx": "^1.2.4",
- "ant-design-vue": "^1.7.8",
- "axios": "^0.24.0",
- "babel-plugin-import": "^1.13.3",
- "core-js": "^2.6.5",
- "jsdom": "^18.1.1",
- "location": "0.0.1",
- "navigator": "^1.0.1",
- "spark-md5": "^3.0.2",
- "vue": "^2.6.10",
- "vue-simple-uploader": "^0.7.6",
- "vuex": "^3.6.2",
- "xmlhttprequest": "^1.8.0"
- },
- "devDependencies": {
- "@vue/cli-plugin-babel": "^3.8.0",
- "@vue/cli-service": "^3.8.0",
- "less-loader": "^6.2.0",
- "sass-loader": "^12.3.0",
- "vue-template-compiler": "^2.6.10"
- }
+ "name": "default",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "vue-cli-service serve",
+ "build": "vue-cli-service build"
+ },
+ "dependencies": {
+ "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
+ "@vue/babel-preset-jsx": "^1.2.4",
+ "ant-design-vue": "^1.7.8",
+ "axios": "^0.24.0",
+ "babel-plugin-import": "^1.13.3",
+ "core-js": "^2.6.5",
+ "jsdom": "^18.1.1",
+ "location": "0.0.1",
+ "navigator": "^1.0.1",
+ "text-loader": "^0.0.1",
+ "vue": "^2.6.14",
+ "vue-markdown": "^2.2.4",
+ "vue-simple-uploader": "^0.7.6",
+ "vue-virtual-scroller": "^1.0.10",
+ "vuex": "^3.6.2"
+ },
+ "devDependencies": {
+ "@vue/cli-plugin-babel": "^3.8.0",
+ "@vue/cli-service": "^3.8.0",
+ "less": "^4.1.2",
+ "less-loader": "^6.0.0",
+ "vue-template-compiler": "^2.6.14"
+ }
}
diff --git a/src/assets/md.css b/src/assets/md.less
similarity index 96%
rename from src/assets/md.css
rename to src/assets/md.less
index 20a713b..9298043 100644
--- a/src/assets/md.css
+++ b/src/assets/md.less
@@ -1,16 +1,16 @@
-body{
- margin: 0 auto;
- font-family: "Microsoft YaHei", arial,sans-serif;
- color: #444444;
- line-height: 1;
- padding: 30px;
-}
-@media screen and (min-width: 768px) {
- body {
- width: 748px;
- margin: 10px auto;
- }
-}
+ body{
+ margin: 0 auto;
+ font-family: "Microsoft YaHei", arial,sans-serif;
+ color: #444444;
+ line-height: 1;
+ padding: 30px;
+ }
+ @media screen and (min-width: 768px) {
+ body {
+ width: 748px;
+ margin: 10px auto;
+ }
+ }
h1, h2, h3, h4 {
color: #111111;
font-weight: 400;
diff --git a/src/components/layouts/box1-info.vue b/src/components/layouts/box1-info.vue
index a1dbf30..ea66ad9 100644
--- a/src/components/layouts/box1-info.vue
+++ b/src/components/layouts/box1-info.vue
@@ -35,9 +35,6 @@
<style lang="less">
/*头像部分*/
.blog-avatar {
- border-radius: 15px;
- background-color: white;
-
img {
width: 60px;
height: auto;
diff --git a/src/components/layouts/box2-class.vue b/src/components/layouts/box2-class.vue
index ec5232e..4733e83 100644
--- a/src/components/layouts/box2-class.vue
+++ b/src/components/layouts/box2-class.vue
@@ -91,6 +91,10 @@
border-left: none;
}
+ a {
+ color: black;
+ }
+
.link span:first-child {
color: #999;
}
diff --git a/src/components/layouts/box4-minibox.vue b/src/components/layouts/box4-minibox.vue
index f674bbb..1da9efa 100644
--- a/src/components/layouts/box4-minibox.vue
+++ b/src/components/layouts/box4-minibox.vue
@@ -71,12 +71,10 @@
div .blog-right-side-meta a span:hover {
background: #262a30;
- ;
color: #fff;
- white-space: normal;
- word-break: break-word;
+ // white-space: normal;
+ // word-break: break-word;
/*可以换行 white-space CSS 属性是用来设置如何处理元素中的空白。*/
height: 20%;
- z-index: 600;
}
</style>
diff --git a/src/components/layouts/box5-article.vue b/src/components/layouts/box5-article.vue
index b9105b5..f00f84d 100644
--- a/src/components/layouts/box5-article.vue
+++ b/src/components/layouts/box5-article.vue
@@ -118,6 +118,10 @@
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
+
+ a {
+ color: black;
+ }
}
.article-split-line {
diff --git a/src/components/layouts/box6-articleList.vue b/src/components/layouts/box6-articleList.vue
index 1ca1a00..0f7cbb1 100644
--- a/src/components/layouts/box6-articleList.vue
+++ b/src/components/layouts/box6-articleList.vue
@@ -2,8 +2,12 @@
<div>
<box5></box5>
<box5></box5>
- <a-pagination showQuickJumper :default-current="current" :defaultPageSize="pageSize" :total="total" />
+ <box5></box5>
+ <box5></box5>
+ <a-pagination :showQuickJumper="true" :size="size" :default-current="current" :defaultPageSize="pageSize"
+ :total="total" />
</div>
+
</template>
<script>
@@ -14,14 +18,15 @@
},
data() {
return {
+ data: [],
+ loading: false,
+ busy: false,
+ size: "small",
total: 500,
pageSize: 20,
current: 4,
}
- },
-
+ }
}
+
</script>
-
-<style>
-</style>
diff --git a/src/components/layouts/main.vue b/src/components/layouts/main.vue
index 264591e..66f377e 100644
--- a/src/components/layouts/main.vue
+++ b/src/components/layouts/main.vue
@@ -1,8 +1,8 @@
<template>
- <div id="components-layout-basic" >
+ <div id="components-layout-basic">
<a-layout>
- <a-layout-header>
- <tag-Header ></tag-Header>
+ <a-layout-header :style="{ position: 'fixed', zIndex: 999, width: '100%' }">
+ <tag-Header></tag-Header>
</a-layout-header>
<a-layout>
<router-view class="fade"></router-view>
@@ -29,8 +29,33 @@
}
},
-
+ methods: {
+ // 下载文件
+ down: function() {
+ console.log(111);
+ this.$axios({
+ "url": "http://192.168.40.149:9000/test2/save/%E6%B5%8B%E8%AF%95%E9%83%A8/%E6%96%87%E4%BB%B6%E7%BB%84/OIP-C.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin/20220113/us-east-1/s3/aws4_request&X-Amz-Date=20220113T085350Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=36db32d3fe577716ada0655379327e837efdfd3a133be6051281ae9eaad8e04f",
+ "method": "get",
+ "responseType": "blob"
+
+ }).then((res) => {
+
+ let blob = new Blob([res.data], {
+ type: "application/octet-stream"
+ });
+ let url = window.URL.createObjectURL(blob)
+ let link = document.createElement('a')
+ link.download="inleft.jpg"
+
+ link.style.display = 'none'
+ link.href = url
+ document.body.appendChild(link)
+ link.click()
+ })
+ }
+
+ }
}
</script>
@@ -43,8 +68,9 @@
.ant-layout {}
.ant-layout-header {
- margin-bottom: 15px;
- background-color: #ffffff;
+ // background-color: #ffffff;
+ backdrop-filter: saturate(180%) blur(1em);
+ background: linear-gradient(90deg, rgba(247, 149, 51, 0.101961) 0, rgba(243, 112, 85, 0.101961) 15%, rgba(239, 78, 123, 0.101961) 30%, rgba(161, 102, 171, 0.101961) 44%, rgba(80, 115, 184, 0.101961) 58%, rgba(16, 152, 173, 0.101961) 72%, rgba(7, 179, 155, 0.101961) 86%, rgba(109, 186, 130, 0.101961) 100%);
}
.ant-layout-footer {
diff --git a/src/components/layouts/main1-show.vue b/src/components/layouts/main1-show.vue
index 6bdab98..c2f86b3 100644
--- a/src/components/layouts/main1-show.vue
+++ b/src/components/layouts/main1-show.vue
@@ -3,12 +3,27 @@
<a-row>
<a-col v-bind="colApiLeft">
<boxLeft></boxLeft>
+ <a-drawer placement="left" :closable="false" :visible="visible1"
+ :after-visible-change="afterVisibleChange" @close="onClose1">
+ <boxLeft></boxLeft>
+ </a-drawer>
</a-col>
<a-col v-bind="colApiMain ">
+ <a-button @click="showDrawer1">
+ 小抽屉1
+ </a-button>
+ <a-button @click="showDrawer2">
+ 小抽屉2
+ </a-button>
<router-view></router-view>
</a-col>
- <a-col v-bind="colApiRight">
+ <a-col v-bind="colApiRight" ref="myDrawer">
<boxRight></boxRight>
+
+ <a-drawer placement="right" :closable="false" :visible="visible2"
+ :after-visible-change="afterVisibleChange" @close="onClose2">
+ <boxRight></boxRight>
+ </a-drawer>
</a-col>
</a-row>
</div>
@@ -24,9 +39,27 @@
boxRight,
box6
},
+ methods: {
+ afterVisibleChange(val) {
+ },
+ showDrawer1() {
+ this.visible1 = true;
+ },
+ showDrawer2() {
+ this.visible2 = true;
+ },
+ onClose1() {
+ this.visible1 = false;
+ },
+ onClose2() {
+ this.visible2 = false;
+ },
+ },
data() {
return {
+ visible1: false,
+ visible2: false,
sliderApi: {
collapsible: true, //是否可收起
@@ -67,15 +100,16 @@
background-color: white;
border-radius: 15px;
}
-
+
.article-detail {
max-height: 750px;
overflow: overlay;
}
-
+
.blog-main {
padding-left: 5%;
padding-right: 5%;
+ padding-top: 80px;
}
/*左右两边的盒子容器*/
@@ -141,7 +175,9 @@
padding-top: 10px;
padding-bottom: 20px;
overflow: hidden;
- box-shadow: 1px 1px 1px 2px #1196c459
+ -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
+ box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
+ // box-shadow: 1px 1px 1px 2px #00000059
}
.show-line {
diff --git a/src/components/layouts/main2-show.vue b/src/components/layouts/main2-show.vue
index 549e0a0..7205933 100644
--- a/src/components/layouts/main2-show.vue
+++ b/src/components/layouts/main2-show.vue
@@ -58,113 +58,5 @@
</script>
<style lang="less">
- .blog-main {
- padding-left: 5%;
- padding-right: 5%;
- }
-
-
-
- /*左右两边的盒子容器*/
- .blog-cell {
- opacity: 0.8;
- padding: 0px 25px 10px;
- }
-
- /*左边部分*/
- .blog-left-side {
- position: sticky;
- // top: 80px;
- padding-left: 2%;
- /*padding-right: 2%;*/
- z-index: 100;
- }
-
- /*中间部分*/
- .blog-body {
- padding-top: 10px;
- /*padding-left: 3%;*/
- /*padding-right: 3%;*/
- }
-
- /*右边部分*/
- .blog-right-side {
- position: sticky;
- top: -19%;
- padding-top: 10px;
- /*padding-left: 2%;*/
- /*padding-right: 2%;*/
- z-index: 100;
- }
-
- div .blog-right-side-meta div {
- padding-left: 6%;
- padding-right: 6%;
- margin-bottom: 3%;
- }
-
-
- /*---------------------
- | 核心盒子构成start |
- ------- ---------------*/
- .blog-container {
- border-radius: 15px;
- background-color: white;
-
- line-height: 1.4;
- white-space: nowrap;
- /*规定段落中的文本不进行换行：*/
- text-align: center;
- padding-top: 20px;
- padding-bottom: 20px;
- max-height: 300px;
- /*margin-top: 10px;*/
- /*min-height: 200px;*/
-
- // overflow-x: hidden;
- // overflow-y: overlay;
- // display: block;
-
- padding-top: 10px;
- padding-bottom: 20px;
- overflow: hidden;
- box-shadow: 1px 1px 1px 2px #1196c459
- }
-
- .show-line {
- border-top: 1px solid #999;
- }
-
- .blog-scroll {
- padding-top: 10px;
- max-height: 200px;
-
- overflow-x: hidden;
- overflow-y: overlay;
- }
-
-
- .blog-scroll:hover::-webkit-scrollbar {
- display: block;
- }
-
- .blog-scroll:hover::-webkit-scrollbar {
- display: block;
- }
-
- .blog-scroll::-webkit-scrollbar {
- width: 5px;
- display: none;
- }
-
- .blog-scroll::-webkit-scrollbar-thumb {
- background-color: rgba(153, 154, 170, 0.3);
- border-radius: 2px;
- }
-
- /*margin滚动条上偏移*/
- .blog-scroll::-webkit-scrollbar-track {
- margin-top: 5px;
- margin-bottom: 5px;
- }
+
</style>
diff --git a/src/components/layouts/main3-show.vue b/src/components/layouts/main3-show.vue
index 2640272..a133d1d 100644
--- a/src/components/layouts/main3-show.vue
+++ b/src/components/layouts/main3-show.vue
@@ -60,113 +60,5 @@
</script>
<style lang="less">
- .blog-main {
- padding-left: 5%;
- padding-right: 5%;
- }
-
-
-
- /*左右两边的盒子容器*/
- .blog-cell {
- opacity: 0.8;
- padding: 0px 25px 10px;
- }
-
- /*左边部分*/
- .blog-left-side {
- position: sticky;
- // top: 80px;
- padding-left: 2%;
- /*padding-right: 2%;*/
- z-index: 100;
- }
-
- /*中间部分*/
- .blog-body {
- padding-top: 10px;
- /*padding-left: 3%;*/
- /*padding-right: 3%;*/
- }
-
- /*右边部分*/
- .blog-right-side {
- position: sticky;
- top: -19%;
- padding-top: 10px;
- /*padding-left: 2%;*/
- /*padding-right: 2%;*/
- z-index: 100;
- }
-
- div .blog-right-side-meta div {
- padding-left: 6%;
- padding-right: 6%;
- margin-bottom: 3%;
- }
-
-
- /*---------------------
- | 核心盒子构成start |
- ------- ---------------*/
- .blog-container {
- border-radius: 15px;
- background-color: white;
-
- line-height: 1.4;
- white-space: nowrap;
- /*规定段落中的文本不进行换行：*/
- text-align: center;
- padding-top: 20px;
- padding-bottom: 20px;
- max-height: 300px;
- /*margin-top: 10px;*/
- /*min-height: 200px;*/
-
- // overflow-x: hidden;
- // overflow-y: overlay;
- // display: block;
-
- padding-top: 10px;
- padding-bottom: 20px;
- overflow: hidden;
- box-shadow: 1px 1px 1px 2px #1196c459
- }
-
- .show-line {
- border-top: 1px solid #999;
- }
-
- .blog-scroll {
- padding-top: 10px;
- max-height: 200px;
-
- overflow-x: hidden;
- overflow-y: overlay;
- }
-
-
- .blog-scroll:hover::-webkit-scrollbar {
- display: block;
- }
-
- .blog-scroll:hover::-webkit-scrollbar {
- display: block;
- }
-
- .blog-scroll::-webkit-scrollbar {
- width: 5px;
- display: none;
- }
-
- .blog-scroll::-webkit-scrollbar-thumb {
- background-color: rgba(153, 154, 170, 0.3);
- border-radius: 2px;
- }
-
- /*margin滚动条上偏移*/
- .blog-scroll::-webkit-scrollbar-track {
- margin-top: 5px;
- margin-bottom: 5px;
- }
+
</style>
diff --git a/src/components/layouts/mdDetail.vue b/src/components/layouts/mdDetail.vue
index 60da741..d681f69 100644
--- a/src/components/layouts/mdDetail.vue
+++ b/src/components/layouts/mdDetail.vue
@@ -40,8 +40,8 @@
}
</script>
-<style scoped>
- @import '../../assets/md.css';
+<style scoped >
+ /* @import '../../assets/md.less'; */
diff --git a/src/components/layouts/tagInfo.vue b/src/components/layouts/tagInfo.vue
index e6bd914..73a0a2d 100644
--- a/src/components/layouts/tagInfo.vue
+++ b/src/components/layouts/tagInfo.vue
@@ -34,9 +34,9 @@
<br>
<br>客车要发动了,我停下双手,想起也是在5年前的一个场景,我眼神示意了下车子,我要走了..客流开始向车的入口靠过去,我正要提步,
<br>"哎..给我一个拥抱吧"..我张了双臂,她稍微停了下,还是靠了过来..
- <br>离开她的怀抱后,我比一个六的手势:"其实,六年前,到现在为止"..趁机,我在她耳边,轻轻地道:
+ <br>离开她的怀抱后,我比一个六的手势:"其实,六年前,到现在为止"..趁机,我在她耳边,轻轻地道:"***,***"
<br>
- <br>希望我们的故事还没有终点..
+ <br>end..希望我们的故事还没有终点..
</div>
</li>
diff --git a/src/main.js b/src/main.js
index 54904d9..b944326 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,7 @@
import Antd from 'ant-design-vue/es';
-import 'ant-design-vue/dist/antd.css';
+import 'ant-design-vue/dist/antd.less';
Vue.use(Antd);
Vue.prototype.$axios = axios
diff --git a/vue.config.js b/vue.config.js
index 5f1c892..e448f53 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -2,13 +2,13 @@
module.exports = {
configureWebpack: (config) => {
config.module.rules.push({
- test: /\.md/,
+ test: /\.md$/,
use: [{
loader: 'text-loader', // 解决ivew组件 忽略前缀i的问题
options: {
prefix: false
}
- }]
+ }, ]
})
},
css: {
@@ -18,7 +18,9 @@
// If you are using less-loader@5 please spread the lessOptions to options directly
modifyVars: {
"primary-color": "#1DA57A", // 全局主色
- "link-color": "#1890ff", // 链接色
+ // "link-color": "#1890ff", // 链接色
+ "link-color": "#ffffff", // 链接色
+ "link-hover-color": "#30a9de",
"success-color": "#52c41a", // 成功色
"warning-color": "#faad14", // 警告色
"error-color": "#f5222d", // 错误色
--
Gitblit v1.9.1