q792602257/qlg.frontend
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

记事本细节修改，待接口

Browse Source
This commit is contained in:
Jerry Yan 2019-09-09 15:28:33 +08:00
parent f99d8b857b
commit 0a742f75b2
3 changed files with 31 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
css/notepad.css
View File

@ -17,12 +17,11 @@
height: 50px; height: 50px;
} }
.row .title { .title {
font-size: 18px; font-size: 18px;
color: black; color: black;
line-height: 42px; line-height: 42px;
position: absolute; padding-left: 5px;
left: 10px;
} }
[v-cloak] { [v-cloak] {
@ -31,15 +30,18 @@
.left { .left {
float: left; float: left;
margin-left: 5px;
} }
.right { .right {
float: right; float: right;
display: block; margin-left: 5px;
} }
.right > div { .small_title,
display: inline; .created_time,
.updated_time {
font-size: 0.9rem;
} }
.operation { .operation {
@ -52,21 +54,8 @@
.edit { .edit {
background: yellowgreen; background: yellowgreen;
opacity: 0.5;
} }
.delete { .delete {
background: red; background: red;
opacity: 0.5;
}
.upper {
width: 100%;
}
.lower {
font-size: 0.8rem;
position: absolute;
bottom: 0px;
width: 100%;
} }

5
js/notepad.js
View File

@ -24,8 +24,11 @@ app = new Vue({
confirmDelete(index){ confirmDelete(index){
console.log("删除", this.noteData[index]) console.log("删除", this.noteData[index])
window.location.reload() window.location.reload()
},
edit(index){
console.log("编辑", this.noteData[index])
window.location.reload()
} }
}, },
mounted() { mounted() {
setTimeout(()=>{document.getElementById("app").visibility = "visible";}, 1000) setTimeout(()=>{document.getElementById("app").visibility = "visible";}, 1000)

32
templete/notepad.html
View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>记事本</title> <title>记事本</title>
<link rel="stylesheet" type="text/css" href="../css/mui.css" /> <link rel="stylesheet" type="text/css" href="../css/mui.css" />
<link rel="stylesheet" type="text/css" href="../css/notepad.css?ver=null"><link rel="stylesheet" type="text/css" href="../css/global.css?ver=null"><link rel="stylesheet" type="text/css" href="../css/header.css?ver=null">
</head> </head>
<body> <body>
@ -19,24 +20,22 @@
<div class="z"></div> <div class="z"></div>
<div class="block" id="app" v-cloak> <div class="block" id="app" v-cloak>
<div class="row clearfix" v-for="(each, index) in noteData" :data-id="each.id"> <div class="row clearfix" v-for="(each, index) in noteData" :data-id="each.id">
<div class="upper" v-if="!each.currentDelete"> <div class="left" v-if="!each.currentDelete" @click="edit(index)">
<div class="left title">{{each.name}}</div> <div class="title">{{each.name}}</div>
<div class="right operation edit">编辑</div>
</div>
<div class="upper" v-else>
<div class="left title">你确定要删除么？</div>
<div class="right operation edit cancel" @click="cancelDelete(index)">取消</div>
</div>
<div class="lower" v-if="!each.currentDelete">
<div class="left">
<div class="created_time">创建时间：{{each.created_at}}</div> <div class="created_time">创建时间：{{each.created_at}}</div>
<div class="updated_time">更改时间：{{each.updated_at}}</div> <div class="updated_time">更改时间：{{each.updated_at}}</div>
</div> </div>
<div class="right delete operation" @click="triggerDelete(index)">删除</div> <div class="left" v-else>
<div class="title">你确定要删除么？</div>
<div class="small_title">{{each.name}}</div>
</div> </div>
<div class="lower" v-else> <div class="right" v-if="!each.currentDelete">
<div class="left">{{each.name}}</div> <div class="operation edit" @click.stop.prevent="edit(index)">编辑</div>
<div class="right operation delete confirm" @click="confirmDelete(index)">确认</div> <div class="delete operation" @click.stop.prevent="triggerDelete(index)">删除</div>
</div>
<div class="right" v-else>
<div class="operation delete confirm" @click.stop.prevent="confirmDelete(index)">确认</div>
<div class="operation edit cancel" @click.stop.prevent="cancelDelete(index)">取消</div>
</div> </div>
</div> </div>
</div> </div>
@ -45,6 +44,11 @@
<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script> <script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/vue/vue.min.js" type="text/javascript" charset="utf-8"></script> <script src="../lib/vue/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/notepad.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> <script type="text/javascript">
mui.plusReady(function() { mui.plusReady(function() {
var element; var element;