Commit f71e551e authored by tianbj's avatar tianbj
Browse files

模板

parent 36247713
<!DOCTYPE html>
<html>
<#include "/m/head-file.htm">
<link rel="stylesheet" type="text/css" href="{ms:global.host/}/plugins/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="{ms:global.host/}/plugins/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
<#include "/m/head.htm">
<div id="indexVue">
<div class="ms-banner">
<div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{&quot;directionNav&quot;:false}'>
<ul class="am-slides">
<template v-for="banner in bannerList">
<li>
<img :src="'{ms:global.host/}/{ms:global.style/}/images/'+banner+'.png'">
</li>
</template>
</ul>
</div>
</div>
<div class="ms-content-template">
<div>
<ul class="nav nav-tabs ms-index-tabs" role="tablist">
<li role="presentation" id="ms-model" class="active ms-active">
<a @click="tabShow('model')" href="#model">模板</a>
</li>
<li role="presentation" id="ms-plug" class="ms-active">
<a @click="tabShow('plug')" href="#plug">插件</a>
</li>
</ul>
<div class="ms-content-all">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="model">
<div style="display: none;" class="ms-loading" v-show="!loading">
<img src="{ms:global.host/}/{ms:global.style/}/images/loading.gif" />
</div>
<div class="ms-model-content" style="display: none;" v-show="loading">
<template v-for="model in modelList">
<div class="ms-model-list">
<a class="ms-model-img" :href="model.upgraderVersionUrl" target="_blank">
<img :src="'http://mstore.mingsoft.net/'+model.upgraderVersionImg" onerror="this.src='{ms:global.host/}/{ms:global.style/}/images/no-data.png'" />
</a>
<div class="ms-model-mobile-img" v-if="model.upgraderVersionMobileImg != '' && model.upgraderVersionMobileImg != undefined" style="background-image: url({ms:global.host/}/{ms:global.style/}/images/mobile.png)">
<div>
<img :src="'http://mstore.mingsoft.net/'+model.upgraderVersionMobileImg" onerror="this.src='{ms:global.host/}/{ms:global.style/}/images/no-data.png'" />
</div>
</div>
<div class="ms-model-info">
<span v-text="model.upgraderVersionName"></span>
<img class="ms-model-info-img" :src="model.upgraderVersionPeopleIcon" onerror="this.src='http://cdn.mingsoft.net/global/images/msheader.png'" />
<img :src="'{ms:global.host/}/{ms:global.style/}/images/level-'+model.upgraderVersionStart+'.png'" width="60px" />
<div class="ms-model-type">模板</div>
</div>
</div>
</template>
<div class="ms-model-list" style="display: none;" v-show="loading">
<div class="ms-model-more">
<div onclick="window.open('http://mstore.mingsoft.net/mstoreShow.do')">查看更多>></div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="plug">
<div class="ms-model-content" style="display: none;" v-show="loading">
<template v-for="pulg in pulgList">
<div class="ms-model-list">
<a class="ms-model-img" :href="pulg.upgraderVersionUrl" target="_blank">
<img :src="'http://mstore.mingsoft.net/'+pulg.upgraderVersionImg" onerror="this.src='{ms:global.host/}/{ms:global.style/}/images/no-data.png'" />
</a>
<div class="ms-model-info">
<span v-text="pulg.upgraderVersionName"></span>
<img class="ms-model-info-img" :src="'{ms:global.host/}/'+ pulg.upgraderVersionPeopleIcon" onerror="this.src='http://cdn.mingsoft.net/global/images/msheader.png'" />
<img :src="'{ms:global.host/}/{ms:global.style/}/images/level-'+pulg.upgraderVersionStart+'.png'" width="60px"/>
<div class="ms-model-type">插件</div>
</div>
</div>
</template>
<div class="ms-model-list" style="display: none;" v-show="loading">
<div class="ms-model-more">
<div onclick="window.open('http://mstore.mingsoft.net/mstoreShow.do')">查看更多>></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ms-index-content">
<div class="ms-case">
<div data-am-widget="list_news" class="am-list-news am-list-news-default ms-case-div">
<!--列表标题-->
<div class="am-list-news-hd am-cf ms-case-title">
<!--带更多链接-->
<a href="{ms:global.url/}/149/index.html" class="">
<h2 class="ms-case-title-h2">网站案例</h2>
<span class="am-list-news-more am-fr ms-case-more">MORE &raquo;</span>
</a>
</div>
<div class="ms-case-list-div">
<ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-gallery-imgbordered">
{ms:arclist typeid=149 size=4}
<li>
<div class="am-gallery-item ms-case-div-li">
<a href='[field.source/]'>
<img class="ms-case-list-img" src="{ms:global.host/}[field.litpic/]" alt="[field.title/]" />
</a>
</div>
</li>
{/ms:arclist}
</ul>
</div>
</div>
</div>
<div class="ms-product">
<div class="container ms-product-container">
<div id="slide" class="slide" class="index-slide" alt="star">
<h2>产品方向</h2>
<div class="img img2" data-slide-imgid="0" onclick="left()">
<a href="http://www.mingsoft.net/html/1/5524/index.html">
<img src="http://www.mingsoft.net/templets/1/ming-soft//images/hu2.jpg">
</a>
</div>
<div class="img img3" data-slide-imgid="1">
<a href="http://www.mingsoft.net/html/1/5523/index.html">
<img src="http://www.mingsoft.net/templets/1/ming-soft//images/hu1.png">
</a>
</div>
<div class="img img4" data-slide-imgid="2" onclick="right()">
<a href="http://www.mingsoft.net/html/1/5526/index.html">
<img src="http://www.mingsoft.net/templets/1/ming-soft//images/hu3.jpg">
</a>
</div>
</div>
</div>
</div>
<div class="ms-news">
<div data-am-widget="list_news" class="am-list-news am-list-news-default">
<div class="am-list-news-hd am-cf ms-news-title">
<!--带更多链接-->
<a href="{ms:global.url/}/59/index.html" class="">
<h2 class="ms-news-title-h2">公司动态</h2>
<span class="am-list-news-more am-fr ms-news-more">MORE &raquo;</span>
</a>
</div>
<div class="am-list-news-bd ms-product-news-list">
<ul class="am-list">
{ms:arclist typeid=59 size=6}
<li class="am-g am-list-item-dated ms-product-news-list-li">
<a href="{ms:global.url/}[field.link/]" class="am-list-item-hd ">[field.title/]</a>
<span class="am-list-date">[field.date?string("yyyy-mm-dd")/]</span>
</li>
{/ms:arclist}
</ul>
</div>
</div>
</div>
</div>
</div>
<#include "/m/footer.htm">
</body>
<script>
var index = new Vue({
el: "#indexVue",
data: {
bannerList: ['01', '02', '03', '04', '05'],
modelList: [], //模板列表
pulgList: [], //插件列表
loading: false, //加载状态
},
methods: {
//切换tab
tabShow: function(type) {
event.preventDefault();
$(".tab-pane").removeClass("active");
$(".ms-active").removeClass("active");
$("#ms-" + type).addClass("active");
$("#" + type).addClass("active");
},
//加载列表
query: function(data, type) {
var target = this;
$.ajax({
type: "POST",
data: data,
url: "http://mstore.mingsoft.net//mstore/list.do", //
success: function(msg) {
if(type == 'model') {
target.modelList = msg.list;
} else {
target.pulgList = msg.list;
target.loading = true;
}
}
})
},
},
mounted: function() {
var data = "upgraderVersionType=2&upgraderVersionIndustry=0&orderBy=uv_id&pageSize=4&pageNo=1";
this.query(data, 'model');
var data = "upgraderVersionType=1&upgraderVersionIndustry=0&orderBy=uv_id&pageSize=4&pageNo=1";
this.query(data, 'pulg');
}
})
</script>
</html>
\ No newline at end of file
var autoLb = false; //autoLb=true为开启自动轮播
var autoLbtime = 1; //autoLbtime为轮播间隔时间(单位秒)
var touch = true; //touch=true为开启触摸滑动
var slideBt = true; //slideBt=true为开启滚动按钮
var slideNub; //轮播图片数量
//窗口大小改变时改变轮播图宽高
/*$(window).resize(function(){
$(".slide").height($(".slide").width()*0.56);
});*/
$(function(){
/*$(".slide").height($(".slide").width()*0.56);*/
slideNub = $(".slide .img").size(); //获取轮播图片数量
for(i=0;i<slideNub;i++){
$(".slide .img:eq("+i+")").attr("data-slide-imgId",i);
}
//根据轮播图片数量设定图片位置对应的class
if(slideNub==1){
for(i=0;i<slideNub;i++){
$(".slide .img:eq("+i+")").addClass("img3");
}
}
if(slideNub==2){
for(i=0;i<slideNub;i++){
$(".slide .img:eq("+i+")").addClass("img"+(i+3));
}
}
if(slideNub==3){
for(i=0;i<slideNub;i++){
$(".slide .img:eq("+i+")").addClass("img"+(i+2));
}
}
if(slideNub>3&&slideNub<6){
for(i=0;i<slideNub;i++){
$(".slide .img:eq("+i+")").addClass("img"+(i+1));
}
}
if(slideNub>=6){
for(i=0;i<slideNub;i++){
if(i<5){
$(".slide .img:eq("+i+")").addClass("img"+(i+1));
}else{
$(".slide .img:eq("+i+")").addClass("img5");
}
}
}
//根据轮播图片数量设定轮播图按钮数量
if(slideBt){
for(i=1;i<=slideNub;i++){
$(".slide-bt").append("<span data-slide-bt='"+i+"' onclick='tz("+i+")'></span>");
}
$(".slide-bt").width(slideNub*34);
$(".slide-bt").css("margin-left","-"+slideNub*17+"px");
}
//自动轮播
if(autoLb){
setInterval(function(){
right();
}, autoLbtime*500);
}
if(touch){
k_touch();
}
slideLi();
imgClickFy();
})
//右滑动
function right(){
var fy = new Array();
for(i=0;i<slideNub;i++){
fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
}
for(i=0;i<slideNub;i++){
if(i==0){
$(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[slideNub-1]);
}else{
$(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i-1]);
}
}
imgClickFy();
slideLi();
}
//左滑动
function left(){
var fy = new Array();
for(i=0;i<slideNub;i++){
fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
}
for(i=0;i<slideNub;i++){
if(i==(slideNub-1)){
$(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[0]);
}else{
$(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i+1]);
}
}
imgClickFy();
slideLi();
}
//轮播图片左右图片点击翻页
function imgClickFy(){
$(".slide .img").removeAttr("onclick");
$(".slide .img2").attr("onclick","left()");
$(".slide .img4").attr("onclick","right()");
}
//修改当前最中间图片对应按钮选中状态
function slideLi(){
var slideList = parseInt($(".slide .img3").attr("data-slide-imgId")) + 1;
$(".slide-bt span").removeClass("on");
$(".slide-bt span[data-slide-bt="+slideList+"]").addClass("on");
}
//轮播按钮点击翻页
function tz(id){
var tzcs = id - (parseInt($(".slide .img3").attr("data-slide-imgId")) + 1);
if(tzcs>0){
for(i=0;i<tzcs;i++){
setTimeout(function(){
right();
},1);
}
}
if(tzcs<0){
tzcs=(-tzcs);
for(i=0;i<tzcs;i++){
setTimeout(function(){
left();
},1);
}
}
slideLi();
}
//触摸滑动模块
function k_touch() {
var _start = 0, _end = 0, _content = document.getElementById("slide");
_content.addEventListener("touchstart", touchStart, false);
_content.addEventListener("touchmove", touchMove, false);
_content.addEventListener("touchend", touchEnd, false);
function touchStart(event) {
var touch = event.targetTouches[0];
_start = touch.pageX;
}
function touchMove(event) {
var touch = event.targetTouches[0];
_end = (_start - touch.pageX);
}
function touchEnd(event) {
if (_end < -100) {
left();
_end=0;
}else if(_end > 100){
right();
_end=0;
}
}
}
\ No newline at end of file
/**
* @author 夏の寒风
* @time 2012-12-14
*/
//自定义hashtable
function Hashtable() {
this._hash = new Object();
this.put = function(key, value) {
if (typeof (key) != "undefined") {
if (this.containsKey(key) == false) {
this._hash[key] = typeof (value) == "undefined" ? null : value;
return true;
} else {
return false;
}
} else {
return false;
}
}
this.remove = function(key) { delete this._hash[key]; }
this.size = function() { var i = 0; for (var k in this._hash) { i++; } return i; }
this.get = function(key) { return this._hash[key]; }
this.containsKey = function(key) { return typeof (this._hash[key]) != "undefined"; }
this.clear = function() { for (var k in this._hash) { delete this._hash[k]; } }
}
var emotions = new Array();
var categorys = new Array();// 分组
var uSinaEmotionsHt = new Hashtable();
// 初始化缓存,页面仅仅加载一次就可以了
//替换
function AnalyticEmotion(s) {
if(typeof (s) != "undefined" && s != null) {
var sArr = s.match(/\[.*?\]/g);
if(!sArr){return s}
for(var i = 0; i < sArr.length; i++){
if(uSinaEmotionsHt.containsKey(sArr[i])) {
var reStr = "<img src=\"" + uSinaEmotionsHt.get(sArr[i]) + "\" height=\"20\" width=\"20\" />";
s = s.replace(sArr[i], reStr);
}
}
}
return s;
}
(function($){
$.fn.SinaEmotion = function(target){
var cat_current;
var cat_page;
$(this).click(function(event){
event.stopPropagation();
var eTop = target.offset().top + target.height() + 15;
var eLeft = target.offset().left - 1;
if($('#emotions .categorys')[0]){
$('#emotions').css({top: eTop, left: eLeft});
$('#emotions').toggle();
return;
}
$('body').append('<div id="emotions"></div>');
$('#emotions').css({top: eTop, left: eLeft});
$('#emotions').html('<div>正在加载,请稍候...</div>');
$('#emotions').click(function(event){
event.stopPropagation();
});
$('#emotions').html('<div style="float:right"><a href="javascript:void(0);" id="prev">&laquo;</a><a href="javascript:void(0);" id="next">&raquo;</a></div><div class="categorys"></div><div class="container"></div><div class="page"></div>');
$('#emotions #prev').click(function(){
showCategorys(cat_page - 1);
});
$('#emotions #next').click(function(){
showCategorys(cat_page + 1);
});
showCategorys();
showEmotions();
});
$('body').click(function(){
$('#emotions').remove();
});
$.fn.insertText = function(text){
this.each(function() {
if(this.tagName !== 'INPUT' && this.tagName !== 'TEXTAREA') {return;}
if (document.selection) {
this.focus();
var cr = document.selection.createRange();
cr.text = text;
cr.collapse();
cr.select();
}else if (this.selectionStart || this.selectionStart == '0') {
var
start = this.selectionStart,
end = this.selectionEnd;
this.value = this.value.substring(0, start)+ text+ this.value.substring(end, this.value.length);
this.selectionStart = this.selectionEnd = start+text.length;
}else {
this.value += text;
}
});
return this;
}
function showCategorys(){
var page = arguments[0]?arguments[0]:0;
if(page < 0 || page >= categorys.length / 5){
return;
}
$('#emotions .categorys').html('');
cat_page = page;
for(var i = page * 5; i < (page + 1) * 5 && i < categorys.length; ++i){
$('#emotions .categorys').append($('<a href="javascript:void(0);">' + categorys[i] + '</a>'));
}
$('#emotions .categorys a').click(function(){
showEmotions($(this).text());
});
$('#emotions .categorys a').each(function(){
if($(this).text() == cat_current){
$(this).addClass('current');
}
});
}
function showEmotions(){
var category = arguments[0]?arguments[0]:'默认';
var page = arguments[1]?arguments[1] - 1:0;
$('#emotions .container').html('');
$('#emotions .page').html('');
cat_current = category;
for(var i = page * 72; i < (page + 1) * 72 && i < emotions[category].length; ++i){
$('#emotions .container').append($('<a href="javascript:void(0);" title="' + emotions[category][i].name + '"><img src="' + emotions[category][i].icon + '" alt="' + emotions[category][i].name + '" width="22" height="22" /></a>'));
}
$('#emotions .container a').click(function(){
target.insertText($(this).attr('title'));
$('#emotions').remove();
});
for(var i = 1; i < emotions[category].length / 72 + 1; ++i){
$('#emotions .page').append($('<a href="javascript:void(0);"' + (i == page + 1?' class="current"':'') + '>' + i + '</a>'));
}
$('#emotions .page a').click(function(){
showEmotions(category, $(this).text());
});
$('#emotions .categorys a.current').removeClass('current');
$('#emotions .categorys a').each(function(){
if($(this).text() == category){
$(this).addClass('current');
}
});
}
}
})(jQuery);
.ms-about-content{
.ms-about-content-div{
margin: 10px;
ul{
line-height: 40px;
background-color: #eee;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
display: flex;
li{
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
a{
display: block;
word-wrap: normal;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
line-height: 42px;
}
}
}
.ms-about-content-main{
color:#555;
border: none;
margin-top: 2rem;
}
.ms-about-content-li{
font-size: 1rem;
}
}
}
\ No newline at end of file
.ms-message-content {
form {
width: 95%;
margin: auto;
padding-top: 2rem;
padding-bottom: 5rem;
button {
width: 100%;
border-radius: 5px;
background-color: #fafafa;
color: #ddd;
border-color: #fafafa;
pointer-events: none;
transition: all .6s;
outline: none;
}
input {
border: 1px solid #eeeeee;
outline: none;
transition: all .6s;
&:focus {
border-color: rgb(0, 154, 255);
}
}
textarea {
border: 1px solid #eeeeee;
outline: none;
transition: all .6s;
&:focus {
border-color: rgb(0, 154, 255);
}
width: 100%;
border-radius: 5px;
height: 10rem;
}
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
color: #999;
}
}
}
\ No newline at end of file
.ms-head {
.ms-header-title {
img {
margin-top: 7px;
height: 35px;
}
}
.ms-head-background {
background-color: #ffffff;
.ms-head-menu {
color: #999;
}
.am-header-nav {
.iconfont {
color: #999;
}
}
}
}
.ms-footer {
footer {
background-color: #2a3542;
.ms-footer-div-a,
.ms-footer-copyright {
color: #999;
font-size: 1rem;
}
}
}
\ No newline at end of file
.ms-case-list{
margin-bottom: 2rem;
margin-top: 1rem;
ul{
li{
.ms-case-list-img{
border:none;
width: 100%;
height: 100%;
}
}
}
}
.ms-case-div,.ms-case-div-li{
/*width: 192px;*/
height: 193px;
}
.ms-case-div-li{
img{
height:100%;
}
}
\ No newline at end of file
.ms-content-template {
.ms-index-tabs {
#ms-plug{
margin-left: 2rem;
}
text-align: center;
border: none;
margin: 20px 0 3px 0;
padding: 0;
li {
float: none;
display: inline-block;
font-size: 2rem;
a {
border: none !important;
color: #777 !important;
background-color: white;
padding: 6px 0px;
font-size: 1.6rem;
}
}
.active {
a {
color: #333 !important;
border-bottom: 2px solid #00b0ff !important;
}
}
}
.ms-content-all {
width: 100%;
background: #fafafa;
.tab-content {
background: #fafafa;
width: 100%;
margin: auto;
overflow: hidden;
padding-bottom: 12px;
.ms-model-content {
padding: 0 12px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.ms-model-list {
overflow: hidden;
.ms-model-more {
width: 385px;
height: 40px;
background-color: #fafafa;
line-height: 40px;
text-align: center;
div {
border: 1px solid #aaa;
color: #999;
padding: 6px 18px;
display: inline-block;
line-height: 1;
border-radius: 30px;
font-size: 1.4rem;
cursor: pointer;
&:hover {
background: #aaa;
color: white;
}
}
}
display: inline-block;
position: relative;
margin: 12px 0 0 0;
.ms-model-info {
padding: 6px;
background: white;
span {
font-size: 14px;
display: block;
margin-bottom: 12px;
color: #666;
width: calc(~"49vw - 36px");
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ms-model-info-img {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 0px;
}
.ms-model-type {
color: #fb803c;
display: inline-block;
float: right;
font-size: 1.8rem;
}
}
.ms-model-img {
overflow: hidden;
position: relative;
height: 110px;
z-index: 2;
display: inline-block;
width: calc(~"49vw - 15px");
img {
width: 100%;
position: relative;
}
}
.ms-model-mobile-img {
position: absolute;
overflow: hidden;
z-index: 3;
right: 0;
top: 0;
height: 155px;
background-size: 100px 170px;
right: -22px;
div {
width: 120px;
height: 108px;
padding: 0px 34px 0px 16px;
margin-top: 27px;
overflow: hidden;
position: relative;
img {
width: 100%;
position: relative;
min-height: 100%;
}
}
}
}
}
}
}
}
.ms-case {
.ms-case-div{
margin-bottom: 2.2rem;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
}
.ms-case-title {
border-bottom: 1px solid #ddd;
.ms-case-title-h2 {
color: #000;
}
.ms-case-more {
color: #999;
}
}
.ms-case-list-div {
margin-top: 1rem;
ul {
padding: 0;
li {
.ms-case-list-img {
border: none;
height:100%;
}
}
}
}
}
.ms-product {
.ms-product-container{
padding-right: 0;
padding-left: 0;
margin-right: 0;
margin-left: 0;
}
background-color: #fafafa;
.container {
.slide {
/*height: 27rem;*/
h2 {
font-size: 1.6rem;
margin-top: 1rem;
height: 2rem;
text-align: center;
line-height: 2rem;
}
}
}
}
.ms-news {
.ms-news-title {
border-bottom: 1px solid #fafafa;
.ms-news-title-h2 {
color: #000;
}
.ms-news-more {
color: #999;
}
}
.ms-product-news-list {
.ms-product-news-list{
/*border: none;*/
}
ul {
li {
border: none;
a {
font-size: 1.5rem;
color: #555;
}
}
}
}
}
\ No newline at end of file
.ms-news-list{
ul{
li{
a{
color: #000;
font-size: 1.5rem;
}
}
}
.ms-news-list-page{
margin-left: 0px;
margin-right: 0px;
text-align: center;
li{
a{
padding: 0.5em 0.5em;
color: #999;
font-size: 0.6rem;
}
}
}
}
.ms-news-show{
input::-webkit-input-placeholder {
color:#999;
}
color:#555;
.ms-news-show-title{
}
.ms-news-show-content{
padding: 0 1rem;
margin-top: 0.5rem;
}
.ms-news-show-main{
margin: 0 1rem;
border-bottom: 1px solid #ddd;
padding-bottom: 0.5rem;
padding-top: 1rem;
.ms-news-show-title{
font-size: 1.9rem;
color: #444;
}
p{
display: none;
}
.ms-news-show-icon{
.ms-news-show-icon-title{
display: block;
float: left;
}
.ms-news-show-icon-con{
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 6rem;
float: left;
}
overflow: hidden;
font-size: 1.3rem;
color: #999;
div{
float: left;
span{
margin: 0 0.5rem;
}
}
.ms-news-show-icon-clicks,.ms-news-show-icon-Fabulous{
background-image: url(../images/pics.png);
width: 22px;
height: 15px;
margin-top: 0.4rem;
}
.ms-news-show-icon-clicks{
background-position: -11px 84px;
}
.ms-news-show-icon-Fabulous{
background-position: -120px 85px;
}
}
}
.ms-news-show-comment{
padding-top: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid #ddd;
.ms-news-show-comment-top{
margin-bottom: 1rem;
.ms-news-show-comment-top-icon{
transition: all .6s;
background-image: url(../images/pics.png);
width: 4rem;
height: 4rem;
background-position: -49px 49px;
background-color: #bababa;
border-radius: 50%;
margin: 0 auto;
cursor: pointer;
}
.ms-is-attention {
background-color: #009bff;
}
}
.ms-news-show-comment-bottom{
border-top: 1px solid #ddd;
padding-top: 1rem;
margin: 0 0.5rem;
.ms-news-show-comment-input{
/*margin-bottom: 1rem;*/
border-bottom: 1px solid #ddd;
padding-bottom: 2rem;
textarea{
height: 3.3rem;
padding: 0.7rem;
background-color: #fafafa;
border: 1px solid #eee;
border-radius: 3px;
width: 100%;
outline:none;
}
textarea::-webkit-input-placeholder{
color:#ccc;
font-size: 1.4rem;
}
.ms-news-show-comment-button{
overflow: hidden;
margin-top: 0.5rem;
.ms-news-show-comment-expression{
background-image: url(../images/pics.png);
background-position: -2px 37px;
width: 3rem;
height: 2rem;
float: left;
cursor: pointer;
}
.ms-news-show-comment-submit{
width: 5rem;
background-color: #fafafa;
font-size: 1.4rem;
height: 2.5rem;
border-radius: 4px;
color: #ccc;
line-height: 2.5rem;
text-align: center;
float: right;
cursor: no-drop;
}
.ms-submit-comments-css {
opacity: .9 !important;
cursor: pointer;
background-color: #009aff !important;
color: #ffffff;
&:hover {
opacity: 1 !important;
}
}
}
}
.ms-news-show-comment-whole{
text-align: center;
margin: 1rem 0;
}
.ms-news-show-comment-list{
.ms-news-show-comment-list-div{
overflow: hidden;
border-bottom: 1px solid #ddd;
padding: 1rem 0;
.ms-news-show-comment-list-left{
overflow: hidden;
float: left;
width: 100%;
.ms-news-show-comment-list-portrait{
float: left;
overflow: hidden;
margin-right: 0.5rem;
img{
width: 4rem;
height: 4rem;
border-radius: 50%;
}
}
.ms-news-show-comment-list-content{
.ms-news-show-comment-list-top{
width: 100%;
overflow: hidden;
}
.ms-news-show-comment-list-right{
overflow: hidden;
float: right;
width: 11%;
.ms-news-show-main-icon-Fabulous{
background-position: -120px 85px;
background-image: url(../images/pics.png);
width: 1.5rem;
height: 1.5rem;
margin-top: 0.3rem;
float: left;
}
.ms-news-show-main-icon-num{
}
}
font-size: 1.2rem;
overflow: hidden;
.ms-news-show-comment-list-name,.ms-news-show-comment-list-time{
color: #999;
}
.ms-news-show-comment-list-name{
float: left;
}
}
}
}
.ms-news-show-comment-more{
text-align: center;
color: #999;
margin: 1rem 0;
font-size: 14px;
}
}
}
}
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<#include "/m/head-file.htm"/>
<body>
<#include "/m/head.htm"/>
<div class="ms-banner">
<img src="{ms:global.host/}/{ms:global.style/}/images/case.png" class="am-img-responsive" alt=""/>
</div>
<div class="ms-news-list">
<div data-am-widget="list_news" class="am-list-news am-list-news-default">
<div class="am-list-news-bd">
<ul class="am-list">
{ms:arclist ispaging=true size=3}
<li class="am-g am-list-item-dated">
<a href="{ms:global.url/}[field.link/]" class="am-list-item-hd ">[field.title/]</a>
<span class="am-list-date">[field.date?string("yyyy-mm-dd")/]</span>
</li>
{/ms:arclist}
</ul>
</div>
</div>
</div>
<#include "/m/footer.htm"/>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<#include "/m/head-file.htm"/>
<link rel="stylesheet" type="text/css" href="{ms:global.host/}/{ms:global.style/}/css/jquery.sinaemotion.css" />
<script type="text/javascript" src="{ms:global.host/}/{ms:global.style/}/js/jquery.sinaEmotion.js"></script>
</head>
<body>
<#include "/m/head.htm"/>
<div class="ms-banner">
<img src="{ms:global.host/}/{ms:global.style/}/images/case.png" class="am-img-responsive" alt="" />
</div>
<div class="ms-news-show" id="news-show-vue">
<article class="am-article">
<div class="am-article-hd ms-news-show-main">
<div class="ms-news-show-title">{ms:field.title/}</div>
<p class="am-article-meta">
<div class="ms-news-show-icon">
<div class="ms-news-show-icon-source"><lable class="ms-news-show-icon-title">来源:</lable><lable class="ms-news-show-icon-con">{ms:field.source/}</lable>
<span>|</span>
</div>
<div class="ms-news-show-icon-time">
<span>|</span>
</div>
<div class="ms-news-show-icon-clicks"></div>
<div class="ms-news-show-icon-num">{ms:field.hit/}
<span>|</span>
</div>
<!-- <div class="ms-news-show-icon-comment"></div>
<div class="ms-news-show-icon-num">52<span>|</span></div> -->
<div class="ms-news-show-icon-Fabulous"></div>
<div class="ms-news-show-icon-num" v-text="attentionNum"></div>
</div>
</p>
</div>
<div class="am-article-bd ms-news-show-content">{ms:field.content/}</div>
<div class="metfield">
<p>上一篇:<a href="{ms:pre.link/}">{ms:pre.title/}</a></p>
<p>下一篇:<a href="{ms:next.link/}">{ms:next.title/}</a></p>
</div>
</article>
<div class="ms-news-show-comment">
<div class="ms-news-show-comment-top">
<div class="ms-news-show-comment-top-icon" @click="attentionNews" :class="{'ms-is-attention':isAttention}"></div>
</div>
<div class="ms-news-show-comment-bottom">
<div class="ms-news-show-comment-input">
<textarea v-model='isButAttention' class="emotion" type="text" name="comments" placeholder="我有话说..."></textarea>
<div class="ms-news-show-comment-button">
<div class="ms-news-show-comment-expression" id="ms-face"></div>
<div class="ms-news-show-comment-submit" :class="{'ms-submit-comments-css':isButAttention.length > 0}" @click="submitComments()">提交</div>
</div>
</div>
<div class="ms-news-show-comment-whole">全部评论</div>
<div class="ms-news-show-comment-list">
<template v-for="(comments,index) in commentsList">
<div class="ms-news-show-comment-list-div" v-if="index <= listNum">
<div class="ms-news-show-comment-list-left">
<div class="ms-news-show-comment-list-portrait">
<img :src="'{ms:global.host/}'+ comments.puIcon" onerror="this.src='http://cdn.mingsoft.net/global/images/msheader.png'">
</div>
<div class="ms-news-show-comment-list-content">
<div class="ms-news-show-comment-list-top">
<div class="ms-news-show-comment-list-name" v-text="comments.puNickname"></div>
<!-- <div class="ms-news-show-comment-list-right">
<div class="ms-news-show-main-icon-Fabulous"></div>
<div class="ms-news-show-main-icon-num">28</div>
</div> -->
</div>
<div class="ms-news-show-comment-list-bottom">
<div class="ms-news-show-comment-list-comment" v-html="vueAnalyticEmotion(comments.commentContent)"></div>
<div class="ms-news-show-comment-list-time" v-text="comments.commentTime"></div>
</div>
</div>
</div>
</div>
</template>
<div class="ms-news-show-comment-more" @click="listNum = listNum +4" v-show="listNum < commentsList.length">查看更多评论</div>
<div class="ms-news-show-comment-more" v-show="listNum >= commentsList.length && commentsList.length != 0">没有更多评论</div>
</div>
</div>
</div>
</div>
<#include "/m/footer.htm"/>
</body>
<script>
var newsShowVue = new Vue({
el: "#news-show-vue",
data: {
commentsList: [], //评论列表
attentionNum: 0, //点赞数
isAttention: false, //点赞状态
isButAttention: '', //按钮状态
listNum: 4, //列表数
loginStatus: '', //登录状态
vueAnalyticEmotion: function(val) {
return AnalyticEmotion(val);
},
},
methods: {
//关注或者取消
attentionNews: function() {
var obj = this;
if(this.loginStatus != true) {
alert("请先登录后重试");
return;
}
//判断关注还是取关
if(obj.isAttention == false) {
$.ajax({
type: "POST",
data: "basicAttentionBasicId={ms:field.id/}&basicAttentionType=2",
url: "{ms:global.host/}/people/attention/save.do",
success: function(msg) {
if(msg.result) {
obj.attentionNum++;
obj.isAttention = true;
}
},
error: function() {
alert("操作失败,请检查是否已经安装关注插件");
}
})
} else {
$.ajax({
type: "POST",
data: "basicId={ms:field.id/}&basicAttentionType=2",
url: "{ms:global.host/}/people/attention/delete.do",
success: function(msg) {
if(msg.result) {
obj.attentionNum--;
obj.isAttention = false;
}
},
error: function() {
alert("操作失败,请检查是否已经安装关注插件");
}
})
}
},
//关注
list: function() {
var obj = this;
$.ajax({
type: "POST",
data: "commentBasicId={ms:field.id/}",
url: "{ms:global.host/}/comment/list.do",
success: function(msg) {
obj.commentsList = msg.list;
}
})
},
//提交
submitComments: function() {
if(this.isButAttention == '') {
return;
}
if(this.loginStatus != true) {
alert("请先登录后重试");
return;
}
var obj = this;
$.ajax({
type: "POST",
data: "commentContent=" + $("textarea[name=comments]").val() + "&isCode=false&commentBasicId={ms:field.id/}",
url: "{ms:global.host/}/people/comment/save.do",
success: function(msg) {
if(msg.result) {
alert("评论成功");
obj.list();
} else {
alert(msg.resultMsg);
}
obj.isButAttention = '';
},
error: function() {
alert("操作失败,请检查是否已经安装评论插件");
}
})
}
},
mounted: function() {
//调用表情
$('#ms-face').SinaEmotion($('.emotion'));
var obj = this;
//验证登录
$.ajax({
type: "POST",
url: "{ms:global.host/}/checkLoginStatus.do",
success: function(msg) {
obj.loginStatus = msg.result;
}
})
//关注数
$.ajax({
type: "POST",
data: "basicAttentionBasicId={ms:field.id/}&basicAttentionType=2",
url: "{ms:global.host/}/attention/count.do",
success: function(msg) {
obj.attentionNum = msg;
}
})
//是否关注了
$.ajax({
type: "POST",
data: "basicAttentionBasicId={ms:field.id/}&basicAttentionType=2",
url: "{ms:global.host/}/people/attention/isExists.do",
success: function(msg) {
obj.isAttention = msg.result;
}
})
},
beforeCreate: function() {
var obj = this;
var app_id = '1362404091';
//获取标签列表
$.ajax({
async: true,
dataType: 'jsonp',
url: 'https://api.weibo.com/2/emotions.json?source=' + app_id,
success: function(response) {
var data = response.data;
for(var i in data) {
if(data[i].category == '') {
data[i].category = '默认';
}
if(emotions[data[i].category] == undefined) {
emotions[data[i].category] = new Array();
categorys.push(data[i].category);
}
emotions[data[i].category].push({
name: data[i].phrase,
icon: data[i].icon
});
uSinaEmotionsHt.put(data[i].phrase, data[i].icon);
}
obj.list();
}
});
},
})
</script>
</html>
\ No newline at end of file
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>修改资料</title>
<#include "/head-file.htm" />
<script src='{ms:global.host/}/plugins/plupload/plupload.full.min.js'></script>
</head>
<body>
<div class="ms-center ms-people-info am-page am-padding" id="mobile-index">
<header class="demo-header am-text-center"><h3>个人信息</h3></header>
<div id="widget-list">
<ul class="am-list m-widget-list">
<li class="am-g am-list-item-dated">
<a href="javascript:;" class="am-list-item-hd ms-info-title">用户名</a>
<span class="am-list-date" v-text="peopleName"></span>
</li>
<li class="am-g am-list-item-dated" data-am-modal="{target: '#nike-prompt'}">
<a href="javascript:;" class="am-list-item-hd ms-info-title">昵称</a>
<span class="am-list-date">
<span v-text="peopleNike"></span>
<i class="iconfont am-fr ms-iconfont">&#xe823;</i>
</span>
</li>
<li class="am-g am-list-item-dated" data-am-modal="{target: '#name-prompt'}">
<a href="javascript:;" class="am-list-item-hd ms-info-title">真实姓名</a>
<span class="am-list-date">
<span v-text="peopleRealName"></span>
<i class="iconfont am-fr ms-iconfont">&#xe823;</i>
</span>
</li>
<li class="am-g am-list-item-dated" data-am-modal="{target: '#sex-prompt'}">
<a href="javascript:;" class="am-list-item-hd ms-info-title">性别</a>
<span class="am-list-date">
<span v-text="peopleSex"></span>
<i class="iconfont am-fr ms-iconfont">&#xe823;</i>
</span>
</li>
<!-- <li class="am-g am-list-item-dated">
<a href="{ms:global.host/}/people/address.do" class="am-list-item-hd ms-info-title">收货地址</a>
<span class="am-list-date"><a class="ms-info-title ms-info-operate" href="{ms:global.host/}/people/address.do"><i class="iconfont am-fr ms-iconfont">&#xe823;</i></a></span>
</li>
-->
<!-- <li class="am-g am-list-item-dated">
<a href="javascript:;" class="am-list-item-hd ms-info-title">绑定邮箱</a>
<span class="am-list-date">
<a class="ms-info-title ms-info-operate" href="{ms:global.host/}/people/bind-email.do">
<span v-text="peopleEmail"></span>
<i class="iconfont am-fr ms-iconfont">&#xe823;</i>
</a>
</span>
</li> -->
<li class="am-g am-list-item-dated">
<a href="javascript:;" class="am-list-item-hd ms-info-title">登录密码</a>
<span class="am-list-date"><a class="ms-info-title ms-info-operate" href="{ms:global.host/}/people/password-change.do">去修改<i class="iconfont am-fr ms-iconfont">&#xe823;</i></a></span>
</li>
</ul>
<v-touch type="button" class="am-btn am-btn-block am-btn-danger am-radius ms-center-button" v-on:tap="quitLogin">退出</v-touch>
<!-- <a href="{ms:global.host/}/people/center.do">
<button type="button" class="am-btn am-btn-block am-btn-default am-radius ms-center-button">返回个人中心</button>
</a> -->
</div>
<!-- 修改昵称 -->
<div class="am-modal am-modal-prompt" id="nike-prompt">
<div class="am-modal-dialog">
<div class="am-modal-hd">修改昵称</div>
<div class="am-modal-bd">
<input type="text" class="am-modal-prompt-input" v-model="changeNike">
</div>
<div class="am-modal-footer">
<v-touch class="am-modal-btn" v-on:tap="updateNike">提交</v-touch>
<v-touch class="am-modal-btn" data-am-modal-cancel v-on:tap="cancelNike">取消</v-touch>
</div>
</div>
</div>
<!-- 修改真实姓名 -->
<div class="am-modal am-modal-prompt" id="name-prompt">
<div class="am-modal-dialog">
<div class="am-modal-hd">真实姓名</div>
<div class="am-modal-bd">
<input type="text" class="am-modal-prompt-input" v-model="changeName">
</div>
<div class="am-modal-footer">
<v-touch class="am-modal-btn" v-on:tap="updateName">提交</v-touch>
<v-touch class="am-modal-btn" data-am-modal-cancel v-on:tap="cancelName">取消</v-touch>
</div>
</div>
</div>
<!-- 修改性别 -->
<div class="am-modal am-modal-no-btn" id="sex-prompt">
<div class="am-modal-dialog">
<div class="am-modal-hd">修改性别
<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
</div>
<v-touch v-on:tap="updateSex(1)" v-bind:class="{'active':sex1}"></v-touch>
<v-touch class="ms-sex-padding" v-on:tap="updateSex(2)" v-bind:class="{'active':sex2}"></v-touch>
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#mobile-index",
data:{
title: '编辑资料',
backBtn:"javascript:history.back()",
peopleName:'加载中',
peopleNike:"",
peopleSex:"",
peopleEmail:"",
headSrc:"{ms:global.host/}/{ms:global.style/}/people/images/center-head.png",
changeNike:"",
sex1:false,
sex2:false,
peopleRealName:"",
changeName:"",
},
methods:{
//获取用户信息
getInfo : function(){
var _obj = this;
mpeople.people.user.info(function(returnJson){
//获取用户名
_obj.peopleName = returnJson.peopleName;
//追加昵称
_obj.peopleNike = returnJson.puNickname;
_obj.changeNike = returnJson.puNickname;
_obj.peopleRealName = returnJson.puRealName;
_obj.changeName = returnJson.puRealName;
//追加邮箱
_obj.peopleEmail = returnJson.peopleMail;
//追加性别
if(returnJson.puSex == 1){
_obj.peopleSex = "";
_obj.sex1 = true;
}else if(returnJson.puSex == 2){
_obj.peopleSex = "";
_obj.sex2 = true;
}else{
_obj.peopleSex = "未知"
}
//有头像获取追加头像
if(returnJson.puIcon != undefined){
_obj.headSrc = "{ms:global.host/}"+returnJson.puIcon
}
});
},
//取消修改昵称
cancelNike:function(){
this.changeNike = this.peopleNike;
},
//取消修改真实姓名
cancelName:function(){
this.changeName = this.peopleRealName;
},
//修改真实姓名
updateName:function(){
var _obj = this;
var pattern=new RegExp("[^a-zA-Z0-9\_\u4e00-\u9fa5]","i");
if(_obj.changeName.indexOf(" ") >=0){
alert("真实姓名不能为空格");
this.changeName = this.peopleRealName;
return;
}
if(pattern.test(this.peopleName)){
alert("真实姓名不能为特殊字符");
this.changeName = this.peopleRealName;
return;
}
if(validator.isLength(_obj.changeName,{min:0,max:20})){
var updateParam = "puRealName=" + _obj.changeName;
mpeople.people.user.update(updateParam,function(returnJson){ //更新用户信息
if(returnJson.result){
alert("修改成功");
_obj.peopleRealName = _obj.changeName;
}
});
}else{
alert("真实姓名最大长度为20个字符");
this.changeName = this.peopleRealName;
}
},
//修改昵称
updateNike : function(){
var _obj = this;
var pattern=new RegExp("[^a-zA-Z0-9\_\u4e00-\u9fa5]","i");
if(_obj.changeNike.indexOf(" ") >=0){
alert("昵称不能为空格");
this.changeNike = this.peopleNike;
return;
}
if(pattern.test(this.changeNike)){
alert("昵称不能为特殊字符");
this.changeNike = this.peopleNike;
return;
}
if(validator.isLength(_obj.changeNike,{min:0,max:20})){
var updateParam = "puNickname=" + _obj.changeNike;
mpeople.people.user.update(updateParam,function(returnJson){ //更新用户信息
if(returnJson.result){
alert("修改成功");
_obj.peopleNike = _obj.changeNike;
}
});
}else{
alert("昵称最大长度为20个字符");
this.changeNike = this.peopleNike;
}
},
//修改性别
updateSex : function(data){
var _obj = this;
var updateParam = "puSex=" + data;
if(data == 1){
_obj.sex1 = true;
_obj.sex2 = false;
}else{
_obj.sex1 = false;
_obj.sex2 = true;
}
mpeople.people.user.update(updateParam,function(returnJson){ //更新用户信息
if(returnJson.result){
if(data == 1){
_obj.peopleSex = "";
_obj.sex1 = true;
_obj.sex2 = false;
}else if(data == 2){
_obj.peopleSex = "";
_obj.sex1 = false;
_obj.sex2 = true;
}
alert("修改成功");
$('#sex-prompt').modal('close');
}
});
},
//退出
quitLogin : function(){
mpeople.people.quit(function(){});
alert("退出成功");
location.href = ms.base+"/login.do";
},
}
});
vm.getInfo();
</script>
<!--[if (gte IE 9)|!(IE)]><!-->
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="{ms:global.host/}/plugins/AmazeUI/2.7.2/js/amazeui.min.js"></script>
</body>
</html>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment