|
@@ -1,26 +1,24 @@
|
|
|
<template>
|
|
|
-<div class="main-grid">
|
|
|
-<div class="head">2PPS
|
|
|
- <form>
|
|
|
+<div class="container">
|
|
|
+ <div class="toppane">Test Page
|
|
|
+ <form>
|
|
|
<input type="text" ref="my_input">
|
|
|
<button @click.prevent="submitTweet()">Submit</button>
|
|
|
</form>
|
|
|
-</div>
|
|
|
-<div class="topicLists">
|
|
|
- <topicLists id="topicLists"></topicLists>
|
|
|
-</div>
|
|
|
-<div class="tweets">
|
|
|
- <ul>
|
|
|
- <Tweet
|
|
|
- v-for="(tweet, index) in tweets"
|
|
|
- :key="tweet.id"
|
|
|
- :topics="tweet.topics"
|
|
|
- :text="tweet.text"
|
|
|
- ></Tweet>
|
|
|
- </ul>
|
|
|
+
|
|
|
</div>
|
|
|
-</div>
|
|
|
-<div class="ArchivedTweets">
|
|
|
+ <div class="leftpane">
|
|
|
+ <h1>Test Page</h1>
|
|
|
+ </div>
|
|
|
+ <div class="middlepane">Test Page
|
|
|
+ <h1>Test Page</h1>
|
|
|
+ <h1>Test Page</h1>
|
|
|
+ <h1>Test Page</h1>
|
|
|
+ <h1>Test Page</h1>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="rightpane">
|
|
|
+ <h1>Test Page</h1></div>
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
@@ -60,22 +58,46 @@ export default {
|
|
|
<style>
|
|
|
@import './assets/base.css';
|
|
|
|
|
|
-header {
|
|
|
- line-height: 1.5;
|
|
|
- text-align: center;
|
|
|
- font-size: large;
|
|
|
+body, html {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
|
|
|
-.topicLists {
|
|
|
- float : left;
|
|
|
- margin: 0 1.5%;
|
|
|
- width: 30%;
|
|
|
+.container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
-.tweets {
|
|
|
- float : left;
|
|
|
- margin: 0 1.5%;
|
|
|
- width: 30%;
|
|
|
+.leftpane {
|
|
|
+ width: 25%;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ background-color: rosybrown;
|
|
|
+ border-collapse: collapse;
|
|
|
}
|
|
|
|
|
|
+.middlepane {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ background-color: royalblue;
|
|
|
+ border-collapse: collapse;
|
|
|
+}
|
|
|
+
|
|
|
+.rightpane {
|
|
|
+ width: 25%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ float: right;
|
|
|
+ background-color: yellow;
|
|
|
+ border-collapse: collapse;
|
|
|
+}
|
|
|
+
|
|
|
+.toppane {
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ border-collapse: collapse;
|
|
|
+ background-color: #4da6ff;
|
|
|
+}
|
|
|
</style>
|