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;
}
.row .title {
.title {
font-size: 18px;
color: black;
line-height: 42px;
position: absolute;
left: 10px;
padding-left: 5px;
}
[v-cloak] {
@ -31,15 +30,18 @@
.left {
float: left;
margin-left: 5px;
}
.right {
float: right;
display: block;
margin-left: 5px;
}
.right > div {
display: inline;
.small_title,
.created_time,
.updated_time {
font-size: 0.9rem;
}
.operation {
@ -52,21 +54,8 @@
.edit {
background: yellowgreen;
opacity: 0.5;
}
.delete {
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){
console.log("删除", this.noteData[index])
window.location.reload()
},
edit(index){
console.log("编辑", this.noteData[index])
window.location.reload()
}
},
mounted() {
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">
<title>记事本</title>
<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>
<body>
@ -19,24 +20,22 @@
<div class="z"></div>
<div class="block" id="app" v-cloak>
<div class="row clearfix" v-for="(each, index) in noteData" :data-id="each.id">
<div class="upper" v-if="!each.currentDelete">
<div class="left 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="left" v-if="!each.currentDelete" @click="edit(index)">
<div class="title">{{each.name}}</div>
<div class="created_time">创建时间：{{each.created_at}}</div>
<div class="updated_time">更改时间：{{each.updated_at}}</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 class="lower" v-else>
<div class="left">{{each.name}}</div>
<div class="right operation delete confirm" @click="confirmDelete(index)">确认</div>
<div class="right" v-if="!each.currentDelete">
<div class="operation edit" @click.stop.prevent="edit(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>
@ -45,6 +44,11 @@
<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="../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">
mui.plusReady(function() {
var element;