css --- 手機端,留言模塊的樣式

效果如下:

在這里插入圖片描述

代碼:

  • 說明:用到了mint-ui,需要先安裝
  • mt-button的導入: import { Button } from ‘mint-ui’
  • mt-button的使用: Vue.component(Button.name, Button)
  • 更多 http://mint-ui.github.io/
// comment.vue
<template><div class="comment-container"><hr><h3 class="title">發表評論</h3><textareaplaceholder="請輸入要BB的內容(最多吐槽120字)"maxlength="120"></textarea><mt-buttontype="primary"size="large">發表評論</mt-button><div class="cmt-list"><div class="cmt-item"><div class="cmt-title">第1樓&nbsp;&nbsp;用戶:匿名用戶&nbsp;&nbsp;發表時間:2019-09-19 14:45:42</div><div class="cmt-body">鋤禾日當午 栗子1</div></div></div><div class="cmt-list"><div class="cmt-item"><div class="cmt-title">第2樓&nbsp;&nbsp;用戶:匿名用戶&nbsp;&nbsp;發表時間:2019-09-19 15:18:22</div><div class="cmt-body">鋤禾日當午 栗子2</div></div></div><div class="cmt-list"><div class="cmt-item"><div class="cmt-title">第3樓&nbsp;&nbsp;用戶:匿名用戶&nbsp;&nbsp;發表時間:2019-09-19 15:18:47</div><div class="cmt-body">鋤禾日當午 栗子3</div></div></div><mt-buttontype="danger"size="large"plain>加載更多</mt-button></div>
</template><script>
</script><style lang="scss" scoped>
.comment-container {h3 {font-size: 18px;text-align: center;color: black;}textarea {font-size: 14px;height: 85px;margin: 0;}.cmt-list {margin: 5px 0;.cmt-item {font-size: 13px;.cmt-title {background-color: #ccc;line-height: 30px;}.cmt-body {text-indent: 2em;line-height: 35px;}}}
}
</style>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/250717.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/250717.shtml
英文地址，請注明出處：http://en.pswp.cn/news/250717.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Laravel 中的 視圖和模型

Laravel 中的 視圖和模型

視圖 簡介&#xff1a;視圖包含了應用程序渲染的HTML數據&#xff0c;并將應用程序的顯示邏輯與控制邏輯有效的分離開。在Laravel中&#xff0c;視圖被保存在resources/views目錄中。 php //數組中的內容可以表示在視圖中調用數組&#xff0c;可以用echo $name得到name的值 …
閱讀更多...
BCZM : 1.13

BCZM : 1.13

Nim轉載于:https://www.cnblogs.com/noryes/p/8640630.html
閱讀更多...
yii多表查詢--學習隨筆

yii多表查詢--學習隨筆

今天自己做一個小demo&#xff0c;為了不要冗余字段&#xff0c;需要進行多表聯合查詢、搜索 yii中&#xff0c;用model來映射數據庫&#xff08;其實好多框架都是這么搞的&#xff09;&#xff0c;一個模型類通常有一個search模型類跟著一起 廢話不多說了&#xff0c;首先&…
閱讀更多...
node --- 創建一個Socket服務器

node --- 創建一個Socket服務器

流程: 會開發一個監聽文件改變的應用然后客戶端使用命令行工具(telnet)連接服務端服務端在監聽到文件變化后,會發送數據給客戶端 監聽文件變化 node 的fs模塊:watch方法用于監聽文件的變化,可以在內存分配一個區域,來專門用于監聽文件變化,并執行該區域內指定的回調函數 //…
閱讀更多...
Laravel中數據庫的操作

Laravel中數據庫的操作

查找數據庫的三種方式 DB facade(原始查找)查詢構造Eloquent ORM新建數據表 //示例表 create table if not exits student( ‘id’ int auto_increment primaary key, ‘name’ varchar(255) not null default “”comment’姓名’, ‘age’ tinyint usigned not null defa…
閱讀更多...
node --- 創建一個Socket客戶端連接到服務器

node --- 創建一個Socket客戶端連接到服務器

描述: net.createrServer().listen(60300) 監聽客戶端訪問net.connect({ port: 60300 }) 訪問服務器 服務器: 一個很簡單的監聽文件改變的服務器每當監聽的文件改變了,將信息通過json的格式傳遞給連接到的客戶端 connection.write // 01、net-watcher.js use strict const …
閱讀更多...
Laravel中的Blade模版

Laravel中的Blade模版

Blade模版簡介 Blade模版的好處&#xff1a; 模版繼承&#xff08;template inheritance&#xff09;視圖片段&#xff08;sections&#xff09;部分指令&#xff1a; extend(‘xxx’)為子頁面指定所繼承的頁面布局模版section(‘xxx’)為子頁面提供所繼承的頁面中指定的部分…
閱讀更多...
三元表達式，列表解析和生成器表達式

三元表達式，列表解析和生成器表達式

三元表達式 在以前&#xff0c;在諸如比較兩個數大小的時候&#xff0c;通常的寫法都是下面的樣子 if x > y:print("the max is x") else:print("the max is y") 三元表達式的語法為&#xff1a; True if expression else False 現在可以個體三元表達式…
閱讀更多...
Mysql 如何設置字段自動獲取當前時間，附帶添加字段和修改字段的例子

Mysql 如何設置字段自動獲取當前時間，附帶添加字段和修改字段的例子

--添加CreateTime 設置默認時間 CURRENT_TIMESTAMP ALTER TABLE table_nameADD COLUMN CreateTime datetime NULL DEFAULT CURRENT_TIMESTAMP COMMENT 創建時間 ; --修改CreateTime 設置默認時間 CURRENT_TIMESTAMP ALTER TABLE table_nameMODIFY COLUMN CreateTime datetim…
閱讀更多...
css --- 圣杯布局

css --- 圣杯布局

圣杯布局 左右固定寬度,中間自適應div:nth-child(1) section {display: flex;width: 60%;height: 150px;background-color: pink;margin: 0 auto; }section div:nth-child(1) {width: 100px;height: 150px;background-color: red; }section div:nth-child(2) {flex: 1;backgr…
閱讀更多...
FZU OJ：2230 翻翻棋

FZU OJ：2230 翻翻棋

Problem 2230 翻翻棋Accept: 872 Submit: 2132Time Limit: 1000 mSec Memory Limit : 32768 KBProblem Description象棋翻翻棋&#xff08;暗棋&#xff09;中雙方在4*8的格子中交戰&#xff0c;有時候最后會只剩下帥和將。根據暗棋的規則&#xff0c;棋子只能上下左右移…
閱讀更多...
關于字符串比較時候出現的空指針問題的坑

關于字符串比較時候出現的空指針問題的坑

比如說&#xff1a;String Tname driver.getTrueName(&#xff09;; 這個變量是從driver對象中取出的&#xff0c;但是你不知道這個值是空值null&#xff1b; 這個時候如果你這么寫&#xff1a;Tname.equals("張三") 這個時候就會報空指針異常的 修改&#xff1a…
閱讀更多...
PHP 實現快速排序

PHP 實現快速排序

首先了解快速排序的原理&#xff1a; 1、先取一個基值&#xff0c;用于每次的標準定位。 2、遍歷數組&#xff0c;將大于基值的放到右邊數組&#xff0c;小于的放到左邊數組 3、將每次的左右數組和基值一起合并 代碼實現&#xff1a; //快速排序 function quick_sort($arr…
閱讀更多...
css --- flex:n的解析

css --- flex:n的解析

起步 效果如下: 在父元素中,將3個盒子平均分成了3等份代碼如下: p span {flex: 1;background-color: lightcoral; }p span:nth-child(even) {border-right: 1px solid black;border-left: 1px solid black; }假設有3個子元素flex:1 的意思是,將剩余的寬度平均分成3份,然后該元…
閱讀更多...
1070: [SCOI2007]修車

1070: [SCOI2007]修車

/*一開始以為是個貪心 發現自己太naive了將每個技術工人拆成n個點&#xff0c;一共拆n*m個&#xff0c;第i個表示倒數第i次修車。 讓每輛車向拆出來的點連邊&#xff0c;費用為tmp[i][j]*k&#xff0c;i是技工&#xff0c;j是車&#xff0c;k是拆出來的第幾個點&#xff0c; 這…
閱讀更多...
PHP 實現冒泡排序

PHP 實現冒泡排序

PHP 實現冒泡排序 直接上代碼 //冒泡排序 function bubble_sort($array){$count count($array);if ($count<0) {return false;}for ($i0; $i <$count ; $i) { for ($j0; $j <$count-$i-1 ; $j) { if ($array[$j]>$array[$j1]) {$tmp $array[$j1];$array[$j1]$a…
閱讀更多...
node --- 后端使用bcrypt對密碼進行加密處理

node --- 后端使用bcrypt對密碼進行加密處理

密碼的處理 加密處理在線調試: http://www.atool9.com/hash.phpbcrypt: 加密工具安裝 && 使用 npm install --save bcryptconst bcrypt require(bcrypt); const SALT_WORK_FACTOR 10;const UserSchema new Schema({UserId: {type: ObjectId},password: String })U…
閱讀更多...
統一建模語言UML

統一建模語言UML

目錄 1. UML定義2. UML結構2.1 視圖&#xff08;View&#xff09;2.2 圖&#xff08;Diagram&#xff09;2.3 模型元素&#xff08;Model element&#xff09;2.4 通用機制&#xff08;General mechanism&#xff09;3. 類圖3.1 類與類圖3.2 類之間的關系3.2.1 關聯關系3.2.2 聚…
閱讀更多...
SpringCloud系列七：使用Ribbon實現客戶端側負載均衡

SpringCloud系列七：使用Ribbon實現客戶端側負載均衡

1. 回顧 在前面&#xff0c;已經實現了微服務的注冊與發現。啟動各個微服務時&#xff0c;Eureka Client會把自己的網絡信息注冊到Eureka Server上。 但是&#xff0c;在生成環境中&#xff0c;各個微服務都會部署多個實例&#xff0c;因此還行繼續進行優化。 2. Ribbon簡介 Ri…
閱讀更多...
node --- 使用koa-router,讓后端模塊化

node --- 使用koa-router,讓后端模塊化

使用Koa-router進行路由管理 npm install --save koa-router const Router require(koa-router); let router new Router(); router.get(/, async (ctx)>{ctx.body 用戶操作首頁 })路由模塊化 在appApi下面創建需要模塊化的文件如:home.js、user.js const Router re…
閱讀更多...
最新文章

Copyright @ 2022~2023