Watch 1 Star 11 Fork 0

qietuwang / quicklyHTMLMIT

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
快速前端切图响应式css框架 spread retract

http://qietu.com/quickly/v1.4

Clone or download
index.html 8.49 KB
Copy Edit Web IDE Raw Blame History
qietuwang authored 2019-12-27 11:54 . no commit message
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>quickly官网 - quickly切图框架</title>
<meta name="keywords" content="quickly快速切图css框架,中文css框架,css框架,开源css框架,css框架下载"/>
<meta name="description" content="quickly切图框架是一款基于html5技术的网站跨屏自适应框架,基于jquery和vue数据双向绑定。"/>
<meta content="width=device-width,initial-scale=1" name="viewport">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="assets/css/quickly.css">
<link rel="stylesheet" type="text/css" href="assets/css/animate.min.css"/>
<link rel="stylesheet" type="text/css" href="assets/css/swiper.min.css"/>
<link rel="stylesheet" href="assets/css/prettify.css" >
</head>
<body>
<div class="qui-container" id="app" v-cloak>
<div class="qui-header qui-naver-wrap">
<div class="qui-naver">
<div class="qui-wrapper">
<div class="brand">
<a href="./index.html"><i class="iconfont icon-xiangying
"></i> quickly</a>
<span>{{kpData.kpLogotxt}}</span>
</div>
<div class="qui-gh">
<a href="#"></a>
</div>
<div class="module">
<ul>
<li v-bind:class="{ selected: item.link == currPage }" v-for="(item,i) in kpData.kpNavs">
<a :href="item.link" :target="item.target">{{item.title}}
<span v-if="item.subMenu" class="iconfont icon-jiantou
"></span>
</a>
<ul v-show="item.subMenu">
<li v-for="(itm,n) in item.subMenu">
<a :href="itm.link" :target="itm.target">{{itm.title}}</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="sub">
<ul>
<li v-for="(item,i) in kpData.kpNavsRt">
<a :href="item.link" :target="item.target">
<i :class="'iconfont ' + item.icon "></i>{{item.title}}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class=" qui-heading swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="qui-heading-inner">
<div class="qui-wrapper ">
<h1 class="qui-heading-title wow fadeInUp " >
<span class="qui-txt--">quickly<br/>快速前端设计框架。</span></h1>
<h3 class="qui-heading-lead wow fadeInUp" data-wow-delay="0.2s">发布v1.3版本</h3>
<div class="qui-fix-mt30 wow fadeInUp" data-wow-delay="0.4s">
<a href="start.html" target="_self" class="qui-btn qui-btn-large qui-btn-white qui-btn-shadow qui-bg-colorful" >开始使用</a> </div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="qui-heading-inner">
<div class="qui-wrapper ">
<h1 class="qui-heading-title" >
quickly<br/>快速前端设计框架。</h1>
<h3 class="qui-heading-lead">发布v1.3版本</h3>
<div class="qui-fix-mt30">
<a href="start.html" target="_self" class="qui-btn qui-btn-large qui-btn-white qui-btn-shadow qui-bg-colorful" >开始使用</a> </div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="qui-section docs-featurette">
<div class="qui-wrapper">
<div class="qui-lead wow fadeInUp" align="center">
<h1 class="">精简而至,快速由我</h1>
它很小,栅格系统、表单、表格、按钮、文字等一个都不能少
</div>
<hr class="qui-halfrule">
<div class="qui-row wow fadeInUp">
<div class="qui-col6 qui-sm-col6 qui-pd-0-20" v-for="(item,i) in kpFeatures" :style="{'clear': i==2 ? 'both':'none'}">
<div class="qui-card qui-mgt20 qui-card--">
<div class="qui-card-body qui-row">
<div class="qui-col2 qui-m-col12">
<i :class="'iconfont qui-fix-fs46 qui-sm-fs32 qui-txt-blue ' + item.icon"></i>
</div>
<div class="qui-col8 qui-sm-col12">
<h3>{{item.title}}</h3>
<p class="qui-sm-hide">{{item.desc}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="qui-section qui-section-grey ">
<div class="qui-wrapper">
<div class="qui-lead wow fadeInUp" align="center">
<h1>使用仅需两步</h1>
不断的打磨去无限接近完美,记录每个历史的时刻
</div>
<hr class="qui-halfrule">
<div class="qui-row wow fadeInUp">
<pre class="prettyprint linenums">&lt;link rel=&quot;stylesheet&quot; href=&quot;../assets/css/quickly.css&quot;&gt; <br>
&lt;script src=&quot;../assets/js/jquery.js&quot;&gt;&lt;/script&gt; <br>
&lt;script src=&quot;../assets/js/vue.js&quot;&gt;&lt;/script&gt; <br>
&lt;script src=&quot;../assets/js/quickly.js&quot;&gt;&lt;/script&gt; </pre>
</div>
</div>
</div>
<div class="qui-section ">
<div class="qui-wrapper">
<div class="qui-lead wow fadeInUp" align="center">
<h1>更新记录</h1>
不断的打磨去无限接近完美,记录每个历史的时刻
</div>
<hr class="qui-halfrule">
<div class="qui-row wow fadeInUp">
<div class="qui-col10 qui-fill2" v-for="(item,i) in kpData.kpChangeLogs" :style="{'clear': i==2 ? 'both':'none'}">
<div class="col-padding">
<div class="qui-row">
<div class="qui-col2">
<strong>{{item.time}}</strong>
</div>
<div class="qui-col8">
<p>{{item.log}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="qui-footer" align="center">
<div class="qui-wrapper ">
{{kpData.kpCopyRight}}</div>
</div>
<div class="qui-rightbar-style2">
<ul class="qui-unstyled">
<li>
<a href="javascript:;">
<i class="iconfont icon-weixin"></i>
<span>在线沟通</span>
<p><img src="assets/imgs/weixin.jpg" width="160"/><br/>关注微信</p>
</a>
</li>
<li>
<a href="tel:027-81777732">
<i class="iconfont icon-shouji"></i>
<span>电话咨询</span>
<p>电话咨询:027-81777732</p>
</a>
</li>
<li>
<a href="http://wpa.qq.com/msgrd?v=3&uin=6135833&site=qq&menu=yes">
<i class="iconfont icon-icon"></i>
<span>在线沟通</span>
</a>
</li>
<li>
<a href="http://wpa.qq.com/msgrd?v=3&uin=6135833&site=qq&menu=yes">
<i class="iconfont icon-icon"></i>
<span>在线沟通</span>
</a>
</li>
<li class="qui-gotop qui-sm-hide">
<a href="javascript:;">
<i class="iconfont icon-jiantou3"></i>
<span>回到顶部</span>
</a>
</li>
</ul>
</div>
</div>
<script src="assets/js/vue.js"></script>
<script src="assets/js/jquery-1.7.1.min.js"></script>
<script src="assets/js/wow.min.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/swiper-3.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/prettify.js"></script>
<script src="assets/js/quickly.js"></script>
<script src="assets/js/kpdata.js"></script>
<script>
new Vue({
el:'#app',
data: {
currPage:'',
kpData:kpData,
kpFeatures : [{
"icon":"icon-shangebuju",
"title":"栅格化系统",
"desc":"采用了12列格子技术,将网页平分成12列,可以满足多种布局的网页,为网页的多样性提供了便捷性,和灵活性。"
},
{
"icon":"icon-shandian",
"title":"快速响应",
"desc":"可以根据浏览器的大小自动缩放和调整,对web标签的重构实现了最大化的浏览器支持,避免了枯燥乏味的浏览器兼容调整的烦恼。"
},
{
"icon":"icon-vuejs-fill",
"title":"基于vue.js",
"desc":"基于vue.js 的数据双向绑定,适合搭建一个用于数据渲染的页面"
},
{
"icon":"icon-aixin",
"title":"简单可依赖",
"desc":"复杂的框架虽然,但是学习成本高,我们尽可能的让它学习起来更简单"
},
{
"icon":"icon-bug",
"title":"快速查错",
"desc":"代码注释调理清楚,没有复杂的代码,只有简单的代码不断的打磨打磨,出问题好解决"
},
{
"icon":"icon-liulanqi",
"title":"适用于各种浏览器",
"desc":"通过css重写技术,对web标签的重构实现了最大化的浏览器支持,避免了枯燥乏味的浏览器兼容调整的烦恼。"
}]
},methods:{
},
mounted(){
},
created:function(){
},
})
</script>
</body>
</html>

Comment ( 0 )

Sign in for post a comment

HTML
1
https://gitee.com/qietuwang/quickly.git
git@gitee.com:qietuwang/quickly.git
qietuwang
quickly
quickly
master

Help Search