blog的前端代码
view | history | commit | commitdiff
inleft
2022-08-26 fa1bd95d533444d7360d1ada127b7a3279a3901f
commit | author | age
06ee76 1 <template>
f9c38e 2     <div class="myFriend">
8ec9c5 3         <div v-if="list.length==0" class="mySecret"> 空空如也..</div>
I 4         <div v-for="temp in list" v-else>
6bcd13 5             <h1>{{temp.groupName}}</h1>
I 6             <hr>
7b98c8 7             <div class="link-box">
6bcd13 8                 <!-- <a href="#" target="_blank" class="no-underline"> -->
7b98c8 9
6bcd13 10                 <a :href="listTemp.url" target="_blank" class="no-underline" v-for="listTemp in temp.linkVoList">
7b98c8 11                     <div class="myFlex">
I 12                         <div class="thumb">
13                             <img width="200" height="200" :src="listTemp.avatar" :onerror="img404" :alt="listTemp.name">
14                         </div>
15                         <div class="content">
16                             <p class="title">
17                                 {{listTemp.name}}
18                             </p>
19                         </div>
6bcd13 20                     </div>
I 21                 </a>
22             </div>
06ee76 23         </div>
L 24     </div>
25 </template>
26
27 <script>
6bcd13 28     import {
I 29         queryBlogLinkGroup
30     } from '../../api/blogLink.js'
31     export default {
32         created() {
33             queryBlogLinkGroup().then((res) => {
34                 this.list = res.data;
35             })
36         },
37         data() {
38             return {
af029b 39                 img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/404.png\"",
6bcd13 40                 list: []
I 41             }
42         }
43     }
06ee76 44 </script>
L 45
46 </script>
47
48 <style lang="less">
7b98c8 49     .myFlex {
I 50         height: 100%;
51         display: flex;
52         flex-direction: column;
53         justify-content: flex-end;
54     }
55
06ee76 56     .myFriend {
f9c38e 57         box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
ec97e0 58         padding: 10px 30px 20px;
f9c38e 59
I 60         h1 {
61             margin: .67em 0;
62             padding-bottom: .3rem;
63             font-size: 1.8em;
64             line-height: 1.2;
65             position: relative;
66             font-weight: bold;
67         }
68
69         hr {
70             overflow: hidden;
71             margin: 1rem 0;
72             padding: 0;
73             height: .125rem;
74             border: none;
054cde 75             // background: #bcbfc3 repeating-linear-gradient(-45deg, #fff, #fff 0.25rem, transparent 0.25rem, transparent 0.5rem);
I 76             background: #fff repeating-linear-gradient(-45deg, #fff, #fff 0.25rem, transparent 0.25rem, transparent 0.5rem);
06ee76 77         }
L 78     }
79
f9c38e 80     .link-box {
fc0c10 81         padding: 3.375rem 2.1875rem 0.1875rem;
06ee76 82         overflow: hidden;
fc0c10 83         margin: -3.125rem -3.125rem 0;
f9c38e 84         display: flex;
I 85         flex-direction: row;
86         flex-wrap: wrap;
87
88         a {
89             width: 33.75rem;
90             background: #fff;
91             float: left;
92             margin: 0 0 4.375rem;
93             color: #2E2E2E;
94             text-decoration: none;
95             border-bottom: none;
96             border-radius: .25rem;
97             overflow: hidden;
98             -webkit-touch-callout: none;
99             -webkit-user-select: none;
100             -moz-user-select: none;
101             -ms-user-select: none;
102             user-select: none;
103             // -moz-box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1);
104             -webkit-box-shadow: 0 3px.0625rem 0.0625rem #0000001a;
105             -moz-box-shadow: 0 3px 0.0625rem #0000001a;
106             box-shadow: 0 3px 0.0625rem #0000001a;
107             -webkit-transform: translate3d(0, 0, 0);
108             -moz-transform: translate3d(0, 0, 0);
109             -ms-transform: translate3d(0, 0, 0);
110             -o-transform: translate3d(0, 0, 0);
111             transform: translate3d(0, 0, 0);
112             -webkit-transition: .3s;
113             -moz-transition: .3s;
114             -ms-transition: .3s;
115             -o-transition: .3s;
116             transition: .3s;
117
118             .content {
119                 text-align: center;
120                 background-color: #fff;
121
122                 .title {
123                     text-align: center;
124                     padding: 1rem .25rem;
125                     font-weight: 500;
126                     color: #333;
127                     white-space: nowrap;
128                     overflow: hidden;
129                     text-overflow: ellipsis;
130                     margin: 0;
131                 }
132             }
133         }
134
135         .thumb {
136             font-size: 0;
137             overflow: hidden;
138             background-color: #fff;
139             margin: 0;
140             border-top-left-radius: .25rem;
141             border-top-right-radius: .25rem;
142
143             img {
144                 width: 100%;
145                 height: auto;
146                 position: relative;
147                 margin: 0;
148                 padding: 0;
149                 -webkit-transition: .4s;
150                 -moz-transition: .4s;
151                 -ms-transition: .4s;
152                 -o-transition: .4s;
153                 transition: .4s;
154             }
155         }
06ee76 156     }
L 157
f9c38e 158     // .link-box a:hover:after {
I 159     //     left: 0;
160     //     width: 100%;
161     //     -webkit-transition: width 350ms;
162     //     -moz-transition: width 350ms;
163     //     -ms-transition: width 350ms;
164     //     -o-transition: width 350ms;
165     //     transition: width 350ms;
166     // }
06ee76 167
L 168
169     .link-box a:hover,
170     .link-box a:active {
171         -webkit-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
172         -moz-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
173         box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
174         -webkit-transform: translateY(-0.25rem);
175         -moz-transform: translateY(-0.25rem);
176         -ms-transform: translateY(-0.25rem);
177         -o-transform: translateY(-0.25rem);
178         transform: translateY(-0.25rem);
179         -moz-transform: none;
180     }
181
f9c38e 182     @media screen and (max-width: 710px) and (min-width: 319px) {
I 183         .link-box {
184             padding: 4.375rem 3.125rem 3.125rem;
185             margin: -3.125rem;
186         }
187
188         .myFriend {
189             padding: 10px 15px 0px;
190         }
191     }
192
06ee76 193     @media screen and (min-width: 1600px) {
L 194         .link-box a {
195             margin: 0 0.9375rem 3.75rem;
1cf6d9 196             width: -webkit-calc(100% / 5 - 4rem);
I 197             width: calc(100% / 5 - 4rem);
06ee76 198         }
L 199     }
200
1cf6d9 201     @media screen and (max-width: 1599px) and (min-width: 1439px) {
06ee76 202         .link-box a {
L 203             margin: 0 0.9375rem 3.75rem;
1cf6d9 204             width: -webkit-calc(100% / 3 - 8rem);
I 205             width: calc(100% / 3 - 8rem);
206         }
207     }
8ec9c5 208
1cf6d9 209     @media screen and (max-width: 1438px) and (min-width: 791px) {
I 210         .link-box a {
211             margin: 0 0.9375rem 3.75rem;
212             width: -webkit-calc(100% / 4 - 2.3rem);
213             width: calc(100% / 4 - 2.3rem);
06ee76 214         }
L 215     }
216
1cf6d9 217     @media screen and (max-width: 790px) and (min-width: 501px) {
06ee76 218         .link-box a {
L 219             margin: 0 0.9375rem 3.75rem;
1cf6d9 220             width: -webkit-calc(100% / 3 - 2.3rem);
I 221             width: calc(100% / 3 - 2.3rem);
06ee76 222         }
L 223     }
f9c38e 224
I 225
226     @media screen and (max-width: 500px) and (min-width: 319px) {
227         .link-box a {
228             margin: 0 0.75rem 1.5rem;
1cf6d9 229             width: -webkit-calc(100% / 3 - 1.5rem);
I 230             width: calc(100% / 3 - 1.5rem);
f9c38e 231         }
2f9d3c 232
I 233         .blog-main {
234             padding-left: 3%;
235             padding-right: 3%;
236         }
f9c38e 237     }
06ee76 238 </style>