Skip to content

G
ginfinite
Commit 87b96319 authored by liaili's avatar liaili
Browse files
Options

团队成员箭头样式更改，case部分图片加点击跳转，联系我们部分icon颜色更改。

parent 7ab51584
Hide whitespace changes
Inline Side-by-side
Showing with 102 additions and 77 deletions
src/pages/about/about.html
View file @ 87b96319
......@@ -12,6 +12,7 @@
<![endif]-->
<div class="header">
<div class="header-box">
<a class="logo" href="/"></a>
<ul class="nav">
<li>
<a href="/">
......
src/pages/contact/contact.html
View file @ 87b96319
......@@ -12,6 +12,7 @@
<![endif]-->
<div class="header">
<div class="header-box">
<a class="logo" href="/"></a>
<ul class="nav">
<li>
<a href="/">
......@@ -64,7 +65,7 @@
<i class="iconfont icon-dianhua"></i>
<p>
<span>CALL US</span> <br/>
+86-0751-8773151
0751-8773151
</p>
</div>
<div class="email">
......
src/pages/culture/culture.html
View file @ 87b96319
......@@ -12,6 +12,7 @@
<![endif]-->
<div class="header">
<div class="header-box">
<a class="logo" href="/"></a>
<ul class="nav">
<li>
<a href="/">
......
src/pages/index/index.html
View file @ 87b96319
......@@ -11,6 +11,7 @@
<![endif]-->
<div class="header">
<div class="header-box">
<a class="logo" href="/"></a>
<ul class="nav">
<li class='active'>
<a href="/">
......
src/pages/news/news.html
View file @ 87b96319
......@@ -2,8 +2,6 @@
<html lang="en" id="news">
<head>
<meta charset="UTF-8">
<meta name="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width"/>
<title>礼瀚-动态新闻</title>
<link rel="stylesheet" href="index.css"/>
</head>
......@@ -14,6 +12,7 @@
<![endif]-->
<div class="header">
<div class="header-box">
<a class="logo" href="/"></a>
<ul class="nav">
<li>
<a href="/">
......
src/pages/news/news.js
View file @ 87b96319
......@@ -40,10 +40,10 @@ const caseData = [
/* 动态新闻数据 */
const newsData = [
{
title: '礼瀚投资入驻杭州玉皇山南基金小镇',
time: '2016年3月初',
href: 'http://mp.weixin.qq.com/s?__biz=MzAxNjAwOTQ3NQ==&mid=402072404&idx=1&sn=bd6fe51fff7aca8d86399d0883aaaa04&scene=1&srcid=0923Dp4MVWYr6NCK1mxp11xs#rd',
desc: '玉皇山南基金小镇管委会党组书记袁维民特别提到，基金小镇始终明确的功能定位是：要为整个实体经济的转型升级、创新创业服务。金融归根结底要回归实业，没有实业支持，资本市场无法实现健康、良性的发展。',
title: '礼瀚团建：毛里求斯——享受自然与冒险',
time: '2016年9月2日',
href: 'http://mp.weixin.qq.com/s?__biz=MzI5NTMzMjEwNA==&mid=2247483689&idx=1&sn=544e5aa8f3cb9d10145958537c9d2e76&scene=1&srcid=0923RxbtOpT6Hzz3AJlBULry#rd',
desc: '毛里求斯被誉为人间天堂，除却妩媚而又纯净的海岛风光，更重要的是因为在这里，你可以忘却所有的烦恼，享受自然，享受冒险，享受生命中因太多烦恼而错过的大好时光。从杭州到毛里求斯，礼瀚团队来这里赴一场与自然和心灵的约会。',
src: require('./images/2.jpg')
},
{
......@@ -53,13 +53,6 @@ const newsData = [
desc: '礼瀚投资的每一位员工致力于用最专业的态度和最规范的操作为投资人和被投资企业出谋划策，用高效的行动力和创造性的思维赢得合作方的尊重与信任。',
src: require('./images/3.jpg')
},
{
title: '礼瀚投资与神雾环保共同构建环保产业金融支持平台',
time: '2016年3月28日',
href: 'http://mp.weixin.qq.com/s?__biz=MzAwMzA3NzY0Mw==&mid=404244897&idx=1&sn=6ef5eb2878871f73430f6d24df468e41&scene=1&srcid=0923rA1ZtImEKIPBHnUbFuRK#rd',
desc: '牵手礼瀚投资，构建环保产业金融支持平台。为了扩展环保产业链，构建环保产业方向的金融支持平台，神雾环保与礼瀚投资签署战略合作协议。在合作协议框架下，公司将充分发挥研发及产业资源渠道优势，并由礼瀚投资把握环保行业的投资机会，取长补短，依托成立私募股权基金、产业并购基金等方式实现产业与金融有机结合。合作双方首期发起设立产业基金规模约3亿元。我们认为该项合作有利于扩展公司业务规模，增强公司的盈利能力。',
src: ''
},
{
title: '礼瀚概念的呈现与解读',
time: '2016年8月26日',
......@@ -68,10 +61,17 @@ const newsData = [
src: ''
},
{
title: '礼瀚团建：毛里求斯——享受自然与冒险',
time: '2016年9月2日',
href: 'http://mp.weixin.qq.com/s?__biz=MzI5NTMzMjEwNA==&mid=2247483689&idx=1&sn=544e5aa8f3cb9d10145958537c9d2e76&scene=1&srcid=0923RxbtOpT6Hzz3AJlBULry#rd',
desc: '毛里求斯被誉为人间天堂，除却妩媚而又纯净的海岛风光，更重要的是因为在这里，你可以忘却所有的烦恼，享受自然，享受冒险，享受生命中因太多烦恼而错过的大好时光。从杭州到毛里求斯，礼瀚团队来这里赴一场与自然和心灵的约会。',
title: '礼瀚投资与神雾环保共同构建环保产业金融支持平台',
time: '2016年3月28日',
href: 'http://mp.weixin.qq.com/s?__biz=MzAwMzA3NzY0Mw==&mid=404244897&idx=1&sn=6ef5eb2878871f73430f6d24df468e41&scene=1&srcid=0923rA1ZtImEKIPBHnUbFuRK#rd',
desc: '牵手礼瀚投资，构建环保产业金融支持平台。为了扩展环保产业链，构建环保产业方向的金融支持平台，神雾环保与礼瀚投资签署战略合作协议。在合作协议框架下，公司将充分发挥研发及产业资源渠道优势，并由礼瀚投资把握环保行业的投资机会，取长补短，依托成立私募股权基金、产业并购基金等方式实现产业与金融有机结合。合作双方首期发起设立产业基金规模约3亿元。我们认为该项合作有利于扩展公司业务规模，增强公司的盈利能力。',
src: ''
},
{
title: '礼瀚投资入驻杭州玉皇山南基金小镇',
time: '2016年3月初',
href: 'http://mp.weixin.qq.com/s?__biz=MzAxNjAwOTQ3NQ==&mid=402072404&idx=1&sn=bd6fe51fff7aca8d86399d0883aaaa04&scene=1&srcid=0923Dp4MVWYr6NCK1mxp11xs#rd',
desc: '玉皇山南基金小镇管委会党组书记袁维民特别提到，基金小镇始终明确的功能定位是：要为整个实体经济的转型升级、创新创业服务。金融归根结底要回归实业，没有实业支持，资本市场无法实现健康、良性的发展。',
src: ''
},
];
......@@ -79,7 +79,9 @@ const newsData = [
function templateImportantNews(value) {
return (`
<li class="fl">
<img class="news-left fl" src="${value.src}" alt="news">
<a class="news-left fl" href="${value.href}">
<img src="${value.src}" alt="news">
</a>
<div class="fl news-right">
<div>
<h2><a href="${value.href}" title="${value.title}" target="_blank">${value.title}</a></h2>
......@@ -135,7 +137,7 @@ export default function () {
let len = caseData.length;
caseData.forEach(value=> {
imgArr.push(`<li class="fl"><img src="${value.src}" alt="${value.name}"></li>`);
imgArr.push(`<li class="fl"><a href="${value.href}" target="_blank"><img src="${value.src}" alt="${value.name}"></a></li>`);
contentArr.push(`
<li>
<div>
......
src/pages/news/news.less
View file @ 87b96319
......@@ -181,6 +181,7 @@
width: 1200px \0;
height: 312px;
overflow: hidden;
cursor: pointer;
.prev,
.next {
position: absolute;
......@@ -196,7 +197,6 @@
background-color: rgba(0, 0, 0, .3);
background-color: #aab1b8 \0;
z-index: 10;
cursor: pointer;
&:hover {
background-color: rgba(0, 0, 0, .5);
background-color: #aab1b8 \0;
......@@ -213,8 +213,11 @@
position: absolute;
left: 0;
top: 0;
& > li > img {
width: 1200px;
& > li > a {
display: inline-block;
& > img {
width: 1200px;
}
}
}
}
......
src/pages/team/team.html
View file @ 87b96319
......@@ -13,6 +13,7 @@
<![endif]-->
<div class="header">
<div class="header-box">
<a class="logo" href="/"></a>
<ul class="nav">
<li>
<a href="/">
......@@ -62,7 +63,7 @@
<div class="team-box">
<div class="team">
<h1>作为【创业者背后的创业者】，我们致力于早期成长期各个阶段的创业企业成为合作伙伴 助力他们发展成为产业界的【参天大树】</h1>
<ul class="detail partners"><!-- {leader} --></ul>
<ul class="partners-leaders partners"><!-- {leader} --></ul>
<div class="arrow">
<i class="iconfont icon-01"></i>
</div>
......@@ -70,24 +71,24 @@
</div>
<div class="introduce-main">
<h1>团队介绍| INTRODUCE</h1>
<ul class="list partners"><!-- {team} --></ul>
<ul class="partners-normal partners"><!-- {team} --></ul>
</div>
</div>
<div class="modal-box">
<div class="modal-dialog">
<a class="close">&times;</a>
<div>
<div class="left-pic fl">
<img alt=""/>
</div>
<div class="right-content fl">
<div>
<i class="left-quotes iconfont icon-yinhao"></i>
<i class="right-quotes iconfont icon-youyinhao"></i>
<h2></h2>
<p></p>
</div>
</div>
<div class="modal-content">
<!--<div class="left-pic fl">-->
<!--<img alt=""/>-->
<!--</div>-->
<!--<div class="right-content fl">-->
<!--<div>-->
<!--<i class="left-quotes iconfont icon-yinhao"></i>-->
<!--<i class="right-quotes iconfont icon-youyinhao"></i>-->
<!--<h2></h2>-->
<!--<p></p>-->
<!--</div>-->
<!--</div>-->
</div>
</div>
</div>
......
src/pages/team/team.js
View file @ 87b96319
......@@ -8,7 +8,7 @@ import "./team.html";
//团队数据
const teamData = [
const teamsData = [
{
name: '杨媛',
job: '总经理',
......@@ -66,9 +66,9 @@ export default function() {
const $modalBox = $('.modal-box');
const $close = $('.close', $modalBox);
/* 初始化 */
let lis = teamData.reduce((arr, value)=> {
let lis = teamsData.reduce((arr, value,index)=> {
arr.push(`
<li class="partner-pic fl">
<li class="partner-pic fl" data-index=${index}>
<img src="${value.smallImg}" alt="">
<h2>${value.name} ${value.job}</h2>
</li>
......@@ -76,9 +76,9 @@ export default function() {
return arr;
}, []);
$('.team .detail').html(lis[0] + lis[1] + lis[2]);
$('.team .partners-leaders').html(lis[0] + lis[1] + lis[2]);
lis.splice(0,3);
$('.introduce-main .list').html(lis.join(''));
$('.introduce-main .partners-normal').html(lis.join(''));
/*
......@@ -94,19 +94,29 @@ export default function() {
* 点击模态框X,模态框隐藏
*/
$('ul.partners').on('click', 'li', function (e) {
let index = $(this).index();
$modalBox.fadeIn(300);
$('.left-pic img',$modalBox).attr('src', teamData[index].largeImg);
$('.left-pic h2',$modalBox).html(teamData[index].name);
$('.left-pic p',$modalBox).html(teamData[index].job);
$('.right-content h2',$modalBox).html(teamData[index].name + ' ' + teamData[index].job);
$('.right-content p',$modalBox).html(teamData[index].desc);
e.stopPropagation();
e.preventDefault();
let teamData = teamsData[$(this).data('index')];
$modalBox.fadeIn(300);
$('.modal-box .modal-content').html(`
<div class="left-pic fl">
<img src="${teamData.largeImg}" alt="${teamData.name}"/>
</div>
<div class="right-content fl">
<div>
<i class="left-quotes iconfont icon-yinhao"></i>
<i class="right-quotes iconfont icon-youyinhao"></i>
<h2>${teamData.name} ${teamData.job}</h2>
<p>${teamData.desc}</p>
</div>
</div>
`);
e.stopPropagation();
e.preventDefault();
});
$close.on('click', ()=> {
$modalBox.fadeOut(300);
$modalBox.fadeOut(300);
$('.modal-box .modal-content').html('');
})
}
src/pages/team/team.less
View file @ 87b96319
......@@ -44,7 +44,7 @@
font-size: 24px;
font-weight: normal;
}
.detail {
.partners-leaders {
&:after {
content: '';
display: block;
......@@ -71,14 +71,14 @@
& > i {
display: inline-block;
transition: transform 300ms;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
&.slideDown {
transition: transform 300ms;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
}
}
......@@ -129,12 +129,17 @@
top: 50%;
margin-top: -200px;
width: 100%;
height: 300px;
//height: 300px;
background: -webkit-linear-gradient(left, #72757d, #aab1b8, #72757d);
background: -moz-linear-gradient(left, #72757d, #aab1b8, #72757d);
background: linear-gradient(left, #72757d, #aab1b8, #72757d);
background-color: #aab1b8 \0;
color: #fff;
&:after {
content: '';
display: block;
clear: both;
}
.close {
position: absolute;
top: -108px;
......@@ -161,6 +166,7 @@
}
}
& > div {
padding: 36px 40px;
&:after {
content: '';
display: block;
......@@ -170,17 +176,13 @@
position: relative;
margin-left: 13%;
margin-right: 5%;
width: 300px;
height: 300px;
margin-bottom: -36px;
width: 25%;
text-align: center;
background-size: 300px 300px;
color: #333;
& > img {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
width: 100%;
z-index: 0;
}
}
......@@ -189,7 +191,7 @@
& > div {
position: relative;
margin-top: 20px;
padding: 36px 40px 0 40px;
padding-left: 40px;
& > h2 {
margin-top: 0;
font-size: 20px;
......
src/styles/common.less
View file @ 87b96319
......@@ -35,6 +35,7 @@
.header {
background-color: #b62125;
.header-box {
position: relative;
margin: 0 auto;
padding-top: 36px;
width: 1200px\0;
......@@ -43,6 +44,13 @@
content: '';
display: table;
}
& > .logo {
position: absolute;
left: 30px;
top: 13px;
width: 190px;
height: 67px;
}
.nav {
margin: 0 0 0 35.6%;
&:after {
......@@ -152,9 +160,6 @@
position: relative;
top: -33px;
font-size: 27px;
&:before {
color: #777;
}
}
}
}
......@@ -174,7 +179,6 @@
}
}
/* #footer end */
.screen() {
.media(@screen-width-small, @container-width-small);
.media(@screen-width, @container-width);
......@@ -185,7 +189,6 @@
.rules(@cw);
}
}
.rules(@cw) {
.header-box {
width: @cw;
......@@ -202,3 +205,5 @@
}
src/styles/iconfont.less
View file @ 87b96319
......@@ -48,7 +48,7 @@
color: #fff;
font-size: 40px;
position: absolute;
top: 0;
top: -20px;
left: 0;
}
......@@ -57,8 +57,8 @@
color: #fff;
font-size: 40px;
position: absolute;
bottom: 0;
right: 0;
bottom: -40px;
right: -40px;
}
.icon-dianhua:before {
......@@ -82,7 +82,6 @@
.icon-dianhua:before,
.icon-m-loginEmail:before,
.icon-dizhi:before {
color: #16d428;
font-size: 30px;
position: absolute;
}
......
Markdown is supported
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