Skip to content

Commit eec35c1

Browse files
author
dreamofei
committed
完成slideImg和sideMenu
1 parent 21093b0 commit eec35c1

5 files changed

Lines changed: 185 additions & 15 deletions

File tree

‎Libs/Css/Custom/main.css‎

Lines changed: 66 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,79 @@
11
body {
2-
font-family:'Microsoft YaHei'
2+
font-family: 'Microsoft YaHei';
33
}
4+
45
.dropdown:hover .dropdown-menu {
56
display: block;
67
}
8+
79
.gray {
8-
background-color:#727171;
9-
color:#ffffff
10+
background-color: #727171;
11+
color: #ffffff;
1012
}
13+
1114
.friendLink {
1215
height: 83px;
1316
width: 180px;
1417
box-shadow: 0 4px 10px rgba(0,0,0,.35);
1518
margin: 5px 5px 5px 5px;
1619
border-radius: 5px;
17-
}
20+
}
21+
22+
.sideMenuAndSlideImg {
23+
height: 600px;
24+
}
25+
26+
.sideMenu {
27+
list-style: none;
28+
padding-left:35px;
29+
}
30+
31+
.sideMenuItem {
32+
list-style: none;
33+
/*border-color: #fff;
34+
border-width: 1px;
35+
border-style: solid;*/
36+
/*border-radius: 3px 0 0 3px;*/
37+
padding-top: 10px;
38+
padding-bottom: 10px;
39+
padding-left: 5px;
40+
color: #3b3b3b;
41+
transition: padding-left .3s;
42+
/*position: relative;
43+
background-position: 224px -30px;*/
44+
}
45+
46+
.sideMenuItemCurrent {
47+
list-style: none;
48+
padding-top: 10px;
49+
padding-bottom: 10px;
50+
padding-left: 22px;
51+
border-radius: 3px 0 0 3px;
52+
box-shadow: 10px 0 0 0 #fff,1px 1px 4px 0 rgba(0,0,0,0.25);
53+
color: #d7000f;
54+
/*border-color:gray;*/
55+
/*background-color:#fff;*/
56+
/*z-index:2;*/
57+
transition: padding-left .3s;
58+
}
59+
60+
.sideMenuItem > a {
61+
color: #3b3b3b;
62+
}
63+
64+
.sideMenuItemCurrent > a {
65+
color: #d7000f;
66+
}
67+
68+
.sideMenuChild {
69+
position: absolute;
70+
top: 0px;
71+
left: 360px;
72+
z-index: 100;
73+
height: 500px;
74+
width: 800px;
75+
padding-top: 60px;
76+
border-radius: 3px 0 0 3px;
77+
box-shadow: 10px 0 0 0 #fff,1px 1px 4px 4px rgba(0,0,0,0.25);
78+
background-color: #fff;
79+
}

‎Libs/Js/ctrls/mainCtrl.js‎

Lines changed: 43 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,44 @@
1-
mainMoudle.controller('mainCtrl', ['$scope', function ($scope) {
2-
$scope.data = 'test hahah';
1+
mainMoudle.controller('slideImgCtrl', ['$scope', function ($scope) {
32

4-
}]);
3+
}])
4+
.controller('sideMenuCtrl', function ($scope) {
5+
$scope.sideMenu = [
6+
{
7+
name: "脉冲电子围栏", url: "#", child: [
8+
{ name: "脉冲控制器", url: "#", img: "/Sources/imgs/R1.png" },
9+
{ name: "围栏配件", url: "#", img: "/Sources/imgs/R1.png" }
10+
],isFocus:false
11+
},
12+
{
13+
name: "张力电子围栏", url: "#", child: [
14+
{ name: "张力探测器", url: "#", img: "/Sources/imgs/R1.png" },
15+
{ name: "围栏配件", url: "#", img: "/Sources/imgs/R1.png" }
16+
], isFocus: false
17+
},
18+
{
19+
name: "智能管理中心", url: "#", child: [
20+
{ name: "智能报警主机", url: "#", img: "/Sources/imgs/R1.png" },
21+
{ name: "主机配套设备", url: "#", img: "/Sources/imgs/R1.png" }
22+
], isFocus: false
23+
},
24+
{
25+
name: "振动光纤探测器", url: "#", child: [
26+
{ name: "双防区探测控制器", url: "#", img: "/Sources/imgs/R1.png" },
27+
{ name: "八防区光纤探测控制器", url: "#", img: "/Sources/imgs/R1.png" }
28+
], isFocus: false
29+
},
30+
{
31+
name: "高清网络光端机", url: "#", child: [
32+
{ name: "100M（百兆）高清系列", url: "#", img: "/Sources/imgs/R1.png" },
33+
{ name: "1000M（千兆）高清系列", url: "#", img: "/Sources/imgs/R1.png" }
34+
], isFocus: false
35+
}
36+
];
37+
38+
$scope.focusItem = function (index) {
39+
$scope.sideMenu[index].isFocus = true;
40+
}
41+
$scope.blurItem=function(index){
42+
$scope.sideMenu[index].isFocus = false;
43+
}
44+
});

‎Sources/imgs/sl2.png‎

3.94 KB
Loading

‎Sources/imgs/slide3.png‎

5.4 KB
Loading

‎Views/main.html‎

Lines changed: 76 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,81 @@
11
<style type="text/css">
2-
2+
33
</style>
4-
<div class="row" ng-controller="mainCtrl">
5-
<div class="col-lg-4">
6-
<h1>开发中,敬请期待...</h1>
7-
{{data}}
4+
<div class="row">
5+
<div class="col-md-1">
86
</div>
9-
<div class="col-lg-4">
10-
<h1>开发中,敬请期待...</h1>
11-
{{data}}
7+
<div class="col-md-10">
8+
<div class="row">
9+
<div class="col-md-3 sideMenuAndSlideImg" ng-controller="sideMenuCtrl">
10+
11+
<!--<div>
12+
<h3><i class="fa fa-list-ul" style="color: #d7000f;margin-right:10px;padding-left:10px;"></i>产品分类</h3>
13+
<ul class="sideMenu">
14+
<li ng-repeat="menu in sideMenu" ng-class="{true: 'sideMenuItemCurrent', false: 'sideMenuItem'}[menu.isFocus]" ng-mouseover="focusItem($index)" ng-mouseleave="blurItem($index)">
15+
<a href="{{menu.url}}">{{menu.name}}</a><i class="fa fa-angle-right pull-right"></i>
16+
</li>
17+
</ul>
18+
</div>-->
19+
<div>
20+
<h3><i class="fa fa-list-ul" style="color: #d7000f;margin-right:10px;padding-left:10px;"></i>产品分类</h3>
21+
<div class="sideMenu">
22+
<div ng-repeat="menu in sideMenu" ng-class="{true: 'sideMenuItemCurrent', false: 'sideMenuItem'}[menu.isFocus]" ng-mouseover="focusItem($index)" ng-mouseleave="blurItem($index)">
23+
<a href="{{menu.url}}">{{menu.name}}</a><i class="fa fa-angle-right pull-right"></i>
24+
<div class="row sideMenuChild" ng-show="menu.isFocus">
25+
<div class="col-md-6 text-center">
26+
<p>{{menu.child[0].name}}</p>
27+
<img src="{{menu.child[0].img}}" />
28+
</div>
29+
<div class="col-md-6 text-center">
30+
<p>{{menu.child[1].name}}</p>
31+
<img src="{{menu.child[1].img}}" />
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
38+
</div>
39+
<div class="col-md-9 sideMenuAndSlideImg" ng-controller="slideImgCtrl">
40+
41+
<div id="myCarousel" class="carousel slide">
42+
<!-- Indicators -->
43+
<ol class="carousel-indicators">
44+
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
45+
<li data-target="#myCarousel" data-slide-to="1"></li>
46+
</ol>
47+
48+
<!-- Wrapper for slides -->
49+
<div class="carousel-inner">
50+
<div class="item active">
51+
<img src="/Sources/imgs/slide3.png" alt="slide3">
52+
<div class="carousel-caption">
53+
<p>slide3</p>
54+
</div>
55+
</div>
56+
<div class="item">
57+
<img src="/Sources/imgs/sl2.png" alt="sl2">
58+
<div class="carousel-caption">
59+
<p>sl2</p>
60+
</div>
61+
</div>
62+
</div>
63+
64+
<!-- Controls -->
65+
<!--<a class="left carousel-control" href="#myCarousel" data-slide="prev">
66+
<span class="fa fa-chevron-left" aria-hidden="true"></span>
67+
<span class="sr-only">Previous</span>
68+
</a>
69+
<a class="right carousel-control" href="#myCarousel" data-slide="next">
70+
<span class="fa fa-chevron-right" aria-hidden="true"></span>
71+
<span class="sr-only">Next</span>
72+
</a>-->
73+
</div>
74+
75+
</div>
76+
</div>
77+
</div>
78+
<div class="col-md-1">
79+
1280
</div>
1381
</div>

0 commit comments

Comments
 (0)