xioayue
/
jwebfs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity
Browse Source

抽取css存入独立的文件中

master
xyiege 3 months ago
parent
959edd8642
commit
567397947b
2 changed files with 269 additions and 210 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 213
      vue/afvue/src/assets/sfilecompare.css
  2. 266
      vue/afvue/src/views/Sfilecompare.vue

213
vue/afvue/src/assets/sfilecompare.css
View File

@ -0,0 +1,213 @@
.sfcbox {
float: left;
width: 100%;
/* overflow-y: auto; */
margin: 20px auto;
margin-top: 12px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 12px 12px 0 0;
position: relative;
}
.sfcon {
padding: 20px;
float: left;
width: 100%;
min-height: 560px;
margin-bottom: 40px;
}
.sfcon:first-child {
margin-bottom: 22px;
box-shadow: 1px 7px 10px 3px rgba(0, 0, 0, 0.1);
}
.sfcon:nth-child(2) {
margin-top: 22px;
}
.sfcon:nth-child(2) .sflist {
background-color: #dddcdc5e;
}
.sfbcon .sflist{
position: relative;
}
/* 操作按钮 */
/* .sfcon .sflist .fbdiv{
position: absolute;
bottom: 0;
left: 0;
height: 46px;
background-color: #00bd7e;
width: 100%;
} */
/* .sfcon .sflist .fbdiv .fbtn{
margin: 12px;
} */
.sfind {
width: 100%;
/* height: 40px; */
line-height: 40px;
padding: 12px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.sfind .selbox {
height: 40px;
border-top: none;
border-left: none;
border-right: none;
outline: none;
padding: 0 12px;
}
.sfind .inputbox {
height: 40px;
line-height: 40px;
padding: 12px;
border-top: none;
border-left: none;
border-right: none;
margin-left: 12px;
outline: none;
width: 460px;
}
.sfind button {
width: 70px;
height: 40px;
margin-left: 12px;
background-color: #f5f5f5;
border: none;
}
.sfcon .sflist {
min-height: 460px;
overflow-y: auto;
background-color: #f5f5f5;
}
.sfcon .sflist ul {
margin-top: 20px;
display: block;
width: 100%;
min-height: 500px;
}
.sfcon .sflist ul li {
list-style: none;
width: 100%;
float: left;
height: 40px;
line-height: 40px;
border-bottom: 1px dashed #ccc;
}
.sfcon .sflist ul li:hover {
background-color: #dad8d8;
}
.sfcon .sflist ul li .sflfunc {
/* display: none; */
float: right;
width: 360px;
margin-right: 20px;
}
.sfcon .sflist ul li .sfchkbox {
margin-right: 12px;
width: 18px;
height: 18px;
}
.sfcon .sflist ul li span{
line-height: 30px;
}
.sfcon .sflist .haschild {
cursor: pointer;
}
.sfcon .sflist .haschild i{
display: inline-block;
width: 25px;
height: 25px;
background-image: url("@/assets/css_sprites.png");
background-repeat: no-repeat;
background-size: 25px;
background-position: 0px -400px;
vertical-align: middle;
}
.sfcon .sflist .tips {
width: 100%;
float: left;
margin-top: 12px;
}
/* 传输功能区 */
.sftrans {
position: fixed;
width: 200px;
height: 120px;
z-index: 99;
background-color: #f5f5f5;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.sftrans .sfbcon {
color: #333;
margin-left: auto;
margin-right: auto;
background-color: #fff;
padding: 10px;
}
.sftrans .sfbcon li {
list-style: none;
height: 30px;
line-height: 30px;
}
.sftrans .sfbcon li:hover {
background-color: #00bd7e;
color: #fff;
cursor: default;
}
.sftrans .sfbcon li span {
padding-left: 12px;
}
.sftrans .sfbcon li.divider{
height: 1px;
background-color: #00bd7e;
margin: 10px 0;
}
/** 发送文件 */
.fsend{
float: left;
height: 60px;
background-color: #f3efef;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top: 20px;
width: 100%;
position:fixed;
bottom: 0;
left: 0;
}
.fsend .fsendcon{
margin-left: auto;
padding: 12px;
background-color: #fff;
min-height: 60px;
width: 1200px;
margin-left: auto;
margin-right: auto;
}
.diff{
background-color: #fcc;
}

266
vue/afvue/src/views/Sfilecompare.vue
View File

@ -19,7 +19,7 @@
<div class="sflist"> <div class="sflist">
<form method="post" ref="fsform"> <form method="post" ref="fsform">
<ul> <ul>
<li v-for="(item, index) in fsclist" :key="item" :data-index="index"> <li v-for="(item, index) in fsclist" :key="item" :data-index="index" :id="'fs_'+rc32(item.path)" :class="{'diff': item.path in diffFiles}">
<input type="checkbox" :value="item.path" class="sfchkbox" :name="'fsbox' + index" :ref="'fsbox' + index"/> <input type="checkbox" :value="item.path" class="sfchkbox" :name="'fsbox' + index" :ref="'fsbox' + index"/>
<a class="haschild" @click="goIntoDir(item.path, 1)" v-if="item.isdir"><i></i>{{ item.path }}</a> <a class="haschild" @click="goIntoDir(item.path, 1)" v-if="item.isdir"><i></i>{{ item.path }}</a>
<span v-else><i :class="'tb tb-'+item.suffix"></i>{{ item.path }}</span> <span v-else><i :class="'tb tb-'+item.suffix"></i>{{ item.path }}</span>
@ -126,6 +126,8 @@ export default {
menuLeft: 0, // 菜单左侧位置 menuLeft: 0, // 菜单左侧位置
dialogShow: false, // 对话框是否可见 dialogShow: false, // 对话框是否可见
isShowDir: false, // 只显示目录 isShowDir: false, // 只显示目录
diffFiles: [], // 差异文件
} }
}, },
mounted() { mounted() {
@ -170,6 +172,58 @@ export default {
GetFileList({ srcip: scip, path: this.sspath, sport: sport }).then(res => { GetFileList({ srcip: scip, path: this.sspath, sport: sport }).then(res => {
this.ssclist = res.data.list this.ssclist = res.data.list
}) })
// 3s 后执行对比
setTimeout(() => {
this.diffFlist()
}, 3000)
},
// 对比web端文件列表
diffFlist(){
let alist = this.fsclist;
let blist = this.ssclist;
// 对比alist 与 blist 的差异
let diff = [...alist].filter(item =>
!blist.some(i =>
// i.hash == item.hash
i.path == item.path
)
)
// diff 转为一维数组
// diff = diff.flatMap(item => item.hash)
diff = diff.map(item => item.path)
//
this.diffFiles = diff
},
// 计算rc32的结果,剔除负数的情况
rc32(str) {
// 转换为utf-8编码
str = encodeURIComponent(str)
let rc = 0xffff
for (let i = 0; i < str.length; i++) {
rc = (rc << 5) + rc + str.charCodeAt(i)
// 使用掩码确保结果为非负数
rc = rc & 0x7FFFFFFF
}
return rc
},
// 对比两个list
compareList(){
let alist = this.fsclist;
let blist = this.ssclist;
// 对比alist 与 blist 的差异
let diff = [...alist].filter(item =>
!blist.some(i =>
// i.hash == item.hash
i.path == item.path
)
)
// diff 转为一维数组
// diff = diff.flatMap(item => item.hash)
diff = diff.map(item => item.path)
//
this.diffFiles = diff
}, },
// 进入子目录 // 进入子目录
goIntoDir(path, nflag) { goIntoDir(path, nflag) {
@ -383,213 +437,5 @@ export default {
</script> </script>
<style scoped> <style scoped>
.sfcbox { @import url('@/assets/sfilecompare.css');
float: left;
width: 100%;
/* overflow-y: auto; */
margin: 20px auto;
margin-top: 12px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 12px 12px 0 0;
position: relative;
}
.sfcon {
padding: 20px;
float: left;
width: 100%;
min-height: 560px;
margin-bottom: 40px;
}
.sfcon:first-child {
margin-bottom: 22px;
box-shadow: 1px 7px 10px 3px rgba(0, 0, 0, 0.1);
}
.sfcon:nth-child(2) {
margin-top: 22px;
}
.sfcon:nth-child(2) .sflist {
background-color: #dddcdc5e;
}
.sfbcon .sflist{
position: relative;
}
/* 操作按钮 */
/* .sfcon .sflist .fbdiv{
position: absolute;
bottom: 0;
left: 0;
height: 46px;
background-color: #00bd7e;
width: 100%;
} */
/* .sfcon .sflist .fbdiv .fbtn{
margin: 12px;
} */
.sfind {
width: 100%;
/* height: 40px; */
line-height: 40px;
padding: 12px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.sfind .selbox {
height: 40px;
border-top: none;
border-left: none;
border-right: none;
outline: none;
padding: 0 12px;
}
.sfind .inputbox {
height: 40px;
line-height: 40px;
padding: 12px;
border-top: none;
border-left: none;
border-right: none;
margin-left: 12px;
outline: none;
width: 460px;
}
.sfind button {
width: 70px;
height: 40px;
margin-left: 12px;
background-color: #f5f5f5;
border: none;
}
.sfcon .sflist {
min-height: 460px;
overflow-y: auto;
background-color: #f5f5f5;
}
.sfcon .sflist ul {
margin-top: 20px;
display: block;
width: 100%;
min-height: 500px;
}
.sfcon .sflist ul li {
list-style: none;
width: 100%;
float: left;
height: 40px;
line-height: 40px;
border-bottom: 1px dashed #ccc;
}
.sfcon .sflist ul li:hover {
background-color: #dad8d8;
}
.sfcon .sflist ul li .sflfunc {
/* display: none; */
float: right;
width: 360px;
margin-right: 20px;
}
.sfcon .sflist ul li .sfchkbox {
margin-right: 12px;
width: 18px;
height: 18px;
}
.sfcon .sflist ul li span{
line-height: 30px;
}
.sfcon .sflist .haschild {
cursor: pointer;
}
.sfcon .sflist .haschild i{
display: inline-block;
width: 25px;
height: 25px;
background-image: url("@/assets/css_sprites.png");
background-repeat: no-repeat;
background-size: 25px;
background-position: 0px -400px;
vertical-align: middle;
}
.sfcon .sflist .tips {
width: 100%;
float: left;
margin-top: 12px;
}
/* 传输功能区 */
.sftrans {
position: fixed;
width: 200px;
height: 120px;
z-index: 99;
background-color: #f5f5f5;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.sftrans .sfbcon {
color: #333;
margin-left: auto;
margin-right: auto;
background-color: #fff;
padding: 10px;
}
.sftrans .sfbcon li {
list-style: none;
height: 30px;
line-height: 30px;
}
.sftrans .sfbcon li:hover {
background-color: #00bd7e;
color: #fff;
cursor: default;
}
.sftrans .sfbcon li span {
padding-left: 12px;
}
.sftrans .sfbcon li.divider{
height: 1px;
background-color: #00bd7e;
margin: 10px 0;
}
/** 发送文件 */
.fsend{
float: left;
height: 60px;
background-color: #f3efef;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top: 20px;
width: 100%;
position:fixed;
bottom: 0;
left: 0;
}
.fsend .fsendcon{
margin-left: auto;
padding: 12px;
background-color: #fff;
min-height: 60px;
width: 1200px;
margin-left: auto;
margin-right: auto;
}
</style> </style>
Write Preview
Loading…
Cancel
Save