Skip to content

Commit

Permalink
cool-squad#1 Add Responsive Feature to current site
Browse files Browse the repository at this point in the history
  • Loading branch information
@ssshenpy
ssshenpy committed Apr 13, 2020
1 parent 9a55017 commit 352ff6b
Show file tree
Hide file tree
Showing 5 changed files with 170 additions and 83 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-vue": "^6.1.2",
"node-sass": "^4.12.0",
"node-sass": "^4.13.1",
"prettier": "^1.16.4",
"sass-loader": "^8.0.2",
"sass-resources-loader": "^2.0.1",
Expand Down
127 changes: 101 additions & 26 deletions src/assets/styles/views/dashboard.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.main {
text-align: left;
font-size: 24px;
color: #333;
@include flex-column;
}
Expand All @@ -10,15 +11,17 @@
}

.top-container {
height: 740px;
background: $primary-color;
display: flex;
align-items: center;
padding: 0 260px;
padding: 93px 260px;

.el-row {
display: flex;
align-items: center;
}
}

.logo {
@include set-size(60px);
@include set-size(70px);
float: left;
}

Expand All @@ -35,15 +38,19 @@
}

.p1 {
width: 100%;
height: 554px;
@include set-size(605px, 554px);
margin-left: 80px;
}

.p2,
.p3 {
@include set-size(100%);
}

.box {
margin-top: 200px;
@include flex-column;
align-items: center;
// height: 716px;
}

.title {
Expand All @@ -54,12 +61,21 @@

.arch-container {
@include box-center;

.el-col {
height: 624px;
}

.arch-img {
padding: 0 80px 0 180px !important;
margin-bottom: 30px;
}
}

.arch-title {
font-size: 18px;
background: #c6e2ff;
padding: 150px 250px 150px 100px;
padding: 150px 250px 150px 100px !important;
}

.storage-desc {
Expand All @@ -72,6 +88,7 @@
.storage-content {
width: 100%;
padding: 0 260px;
height: 437px;
}

.query-box {
Expand All @@ -91,6 +108,7 @@
color: #eee;
font-size: 18px;
margin-bottom: 150px;
padding: 0 192px;
}

.query-container {
Expand Down Expand Up @@ -134,21 +152,24 @@
}

.code-container {
height: 520px;
.el-row {
width: 100%;
}

.el-col {
width: 680px;
.code-img {
background: #fff;
box-shadow: 0 0 50px 26px rgba(0, 0, 0, 0.02);
margin-bottom: 20px;
margin: 0 20px;

&:first-child {
&.code-img-1 {
padding: 110px 37px;
margin-right: 20px;
height: 300px;
}

&:nth-child(2) {
&.code-img-2 {
padding: 40px 155px;
margin-left: 20px;
height: 440px;
}
}

Expand All @@ -163,23 +184,15 @@

.img-content {
@include set-size(1400px, 700px);

img {
@include set-size(100%);
}
}

.footer {
height: 340px;
background: $primary-color;
font-size: 24px;
color: #fff;
padding: 80px 120px 40px 120px;

.el-row {
&:first-child {
margin-top: 80px;
}

&:nth-child(2) {
margin-bottom: 80px;
}
Expand All @@ -196,4 +209,66 @@
opacity: 0.6;
}
}
}
}

@media only screen and (max-width: 768px) {
.title,
.example-title,
.query-title {
font-size: 0.3rem;
}

.storage-desc,
.example,
.demo {
padding: 0 0.5rem;
}

.header {
padding-left: 0.5rem;
}

.logo {
@include set-size(1rem, 0.8rem);
}

.top-container {
padding: 0.5rem;
}

.arch-container {
.el-col:nth-child(2) {
height: 3rem;
}
.arch-img {
padding: 0 !important;
height: 6rem;
margin-bottom: 0.2rem;
}

.arch-title {
padding: 0.6rem 0.5rem !important;
font-size: 0.16rem;
}
}

.code-container {
.code-img {
height: 4rem;

&.code-img-1 {
margin: 0 0 0.2rem 0;
height: 100%;
}

&.code-img-2 {
margin: auto 0;
height: 100%;
}
}
}

.img-content {
@include set-size(9rem, 4rem);
}
}
2 changes: 1 addition & 1 deletion src/libs/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import url from './config';

axios.defaults.baseURL = url.localUrl;

// 拦截器
// global config
axios.interceptors.request.use((req) => {
req.headers.Authorization = '';
return req;
Expand Down
103 changes: 62 additions & 41 deletions src/views/dashBoard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,43 +5,51 @@
class="logo" />
</div>
<el-container class="top-container">
<el-col>
<el-row class="top-title">Cool: a COhort OnLine analytical processing system</el-row>
<el-row class="sub-top-title">Cool is an online cohort analytical processing system that
supports various types of data analytics, including cubequery,
ice-berg query and cohort query. The objective of Cool is to
provide high performance (near real-time) analytical response
for emerging data warehouse domain.
</el-row>
</el-col>
<el-col>
<svg-icon icon-class="p1"
class="p1" />
</el-col>
<el-row :gutter="30">
<el-col :span="12">
<el-row class="top-title">Cool: a COhort OnLine analytical processing system</el-row>
<el-row class="sub-top-title">Cool is an online cohort analytical processing system that
supports various types of data analytics, including cubequery,
ice-berg query and cohort query. The objective of Cool is to
provide high performance (near real-time) analytical response
for emerging data warehouse domain.
</el-row>
</el-col>
<el-col :span="12">
<svg-icon icon-class="p1"
class="p1" />
</el-col>
</el-row>
</el-container>
<el-container class="box">
<el-row class="title">Architecture</el-row>
<el-container class="arch-container">
<el-col :span="12">
<svg-icon icon-class="p2"
class="p1" />
</el-col>
<el-col :span="12"
class="arch-title">
Similar to conventional databases, Cool organizes data records
intables. Each table is maintained by a user-defined schema,
consisting of multiple columns called fields or dimensions. A
dimension file recording the hierarchy of several dimensions is
also given by the users in order to support cube queries. Each
dimension of the table is bound to a field type describing the
format of the values. The primitive types include varied-length
integer, float, string, boolean, time and event. The first four are
similar to underlying database types while the remaining types
are specifically defined by Cool. Time deals with the timestamps
of the records and event is a particular string representing user
actions or behaviors. A dimension tree is constructed in systems
etup guided by the dimension file and persisted in storage.
</el-col>
<el-row :gutter="20">
<el-col :xs="24"
:sm="12"
class="arch-img">
<svg-icon icon-class="p2"
class="p2" />
</el-col>
<el-col :xs="24"
:sm="12">
<el-col class="arch-title">
Similar to conventional databases, Cool organizes data records
intables. Each table is maintained by a user-defined schema,
consisting of multiple columns called fields or dimensions. A
dimension file recording the hierarchy of several dimensions is
also given by the users in order to support cube queries. Each
dimension of the table is bound to a field type describing the
format of the values. The primitive types include varied-length
integer, float, string, boolean, time and event. The first four are
similar to underlying database types while the remaining types
are specifically defined by Cool. Time deals with the timestamps
of the records and event is a particular string representing user
actions or behaviors. A dimension tree is constructed in systems
etup guided by the dimension file and persisted in storage.
</el-col>
</el-col>
</el-row>
</el-container>
</el-container>
<el-container class="box">
Expand All @@ -53,7 +61,7 @@
</el-row>
<el-row class="storage-content">
<svg-icon icon-class="p3"
class="p1" />
class="p3" />
</el-row>
</el-container>
<el-container class="box query-box">
Expand All @@ -77,12 +85,20 @@
class="icon2" />
</el-row>
<el-container class="code-container">
<el-col>
<svg-icon icon-class="code1" />
</el-col>
<el-col>
<svg-icon icon-class="code2" />
</el-col>
<el-row>
<el-col :xs="24"
:sm="12">
<div class="code-img code-img-1">
<svg-icon icon-class="code1" />
</div>
</el-col>
<el-col :xs="24"
:sm="12">
<div class="code-img code-img-2">
<svg-icon icon-class="code2" />
</div>
</el-col>
</el-row>
</el-container>
</el-container>
<el-container class="box demo">
Expand All @@ -95,7 +111,12 @@
</el-row>
<el-row class="img-content">
<!-- TODO: Make the following video box responsive. -->
<iframe class="video" src="https://www.youtube-nocookie.com/embed/r28_jBD9qKg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe src="https://www.youtube-nocookie.com/embed/r28_jBD9qKg"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
style="width: 100%; height:100%">
</iframe>
</el-row>
</el-container>
<el-container class="box footer">
Expand Down
Loading

0 comments on commit 352ff6b

Please sign in to comment.