问题描述
我正在尝试创建任务的有序列表。每个任务完成后，任务变为绿色，并且该行变为实线。我正在以下静态示例中寻求帮助。
我已经看到了一些这样做的例子，但是我在线条和颜色上苦苦挣扎。如果我将ul li.circle:after用作圆，将ul li.circle:before用作线，则可以使其连接，但是它们都变为实线，因此我无法弄清楚如何与虚线互换。我想使用列表项来定义线条和圆圈的颜色。
在CSS中有填充：0 0 20px 50px;这就是为什么线没有按要求连接到点，但是没有填充的原因，它们之间没有间距。要更改颜色，我可以使用之前/之后更改所有颜色，但是不能为颜色添加如下所示的另一个类。
css起始类应该是带有顶部的行，例如字母T，而arrowDown应该具有连接到虚线的茎。
.red {
background: #ff0000;
}
.green {
background: #00ff00;
}
.start {
/* polygon? T like shape*/
}
ul {
max-width: 400px;
margin: 0 auto;
list-style-type: none;
margin: 0;
font-family: sans-serif;
color: #ffffff;
}
ul li {
padding: 0 0 20px 50px;
position: relative;
margin: 0;
}
/* Circle */
ul li.circle:after {
position: absolute;
color: #ccc;
top: 0;
left: 0;
content: '';
border: 2px solid #fff;
border-radius: 50%;
height: 24px;
width: 24px;
text-align: center;
line-height: 24px;
background: #000000;
}
/* Circle
ul li.circle:before {
position: absolute;
left: 10px;
top: 0px;
content: "";
height: 100%;
width: 0;
border-left: 2px solid #ffffff;
}
*/
/* Line */
ul li.line:before {
position: absolute;
left: 10px;
top: 0px;
content: "";
height: 100%;
width: 0;
border-left: 2px solid #ffffff;
}
/* dottedLine */
ul li.dottedLine:before {
position: absolute;
left: 10px;
top: 0px;
content: "";
height: 100%;
width: 0;
border-left: 2px dotted #ffffff;
}
/* Missing the stem */
ul li.arrowDown:after {
position: absolute;
transform: rotate(45deg);
top: 10px;
left: 4px;
content: '';
display: inline-block;
text-align: center;
line-height: 24px;
border: solid #ffffff;
border-width: 0px 3px 3px 0px;
display: inline-block;
padding: 6px;
}<li>
<li class="start">Monday</li>
<li class="line"></li>
<li class="circle green">Task 1</li>
<li class="line"></li>
<li class="circle green">Task 2</li>
<li class="dottedLine"></li>
<li class="circle red">Task 3</li>
<li class="dottedLine"></li>
<li class="arrowDown">Tuesday</li>
</ul>
解决方法
首先，您的开头GRESOURCE_DEPENDENCIES是cmake_minimum_required(VERSION 3.15)
project(dummy LANGUAGES C)
find_program(GLIB_COMPILE_RESOURCES NAMES glib-compile-resources REQUIRED)
set(GRESOURCE_C dummy.gresource.c)
set(GRESOURCE_XML dummy.gresource.xml)
set(GRESOURCE_XML_IN dummy.gresource.xml.in)
set(GRESOURCE_DEPENDENCIES CACHE INTERNAL "GResource dependencies for dummy")
set(OLD ${CMAKE_CURRENT_SOURCE_DIR}/${GRESOURCE_XML_IN})
set(NEW ${CMAKE_CURRENT_BINARY_DIR}/${GRESOURCE_XML})
if(NOT EXISTS ${NEW} OR (${OLD} IS_NEWER_THAN ${NEW}))
configure_file(${GRESOURCE_XML_IN} ${GRESOURCE_XML})
execute_process(
WORKING_DIRECTORY ${CMAKE_CURRENT_BINARY_DIR}
COMMAND ${GLIB_COMPILE_RESOURCES} --generate-dependencies ${GRESOURCE_XML}
OUTPUT_VARIABLE GRESOURCE_DEPENDENCIES
)
# OUTPUT_VARIABLE is not a list but a single string value with newlines
# Convert it to a list and pop out the last newline character
string(REPLACE "\n" ";" GRESOURCE_DEPENDENCIES ${GRESOURCE_DEPENDENCIES})
list(POP_BACK GRESOURCE_DEPENDENCIES)
endif()
add_custom_command(
OUTPUT ${GRESOURCE_C}
WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
COMMAND ${GLIB_COMPILE_RESOURCES}
ARGS
--generate-source
--target=${CMAKE_CURRENT_BINARY_DIR}/${GRESOURCE_C}
${NEW}
VERBATIM
MAIN_DEPENDENCY ${GRESOURCE_XML}
DEPENDS ${GRESOURCE_DEPENDENCIES}
)
add_custom_target(
dummy-resource
DEPENDS ${GRESOURCE_C}
)
add_executable(${PROJECT_NAME} dummy.c)
add_dependencies(${PROJECT_NAME} dummy-resource)
然后根据需要设置样式，您需要像这样向import React,{ Component } from "react";
import http from "./Service/httpService";
import Config from "./Config.json";
import { createStore } from "redux";
import { connect,provider } from "react-redux";
const initialstate = {
count: 0,};
const incrmentvalue = () => ({
type: "INCREMENT",});
const reducer = (state = initialstate,action) => {
return state;
};
const store = createStore(reducer);
class App extends Component {
render() {
console.log(store);
return (
<provider store={store}>
<HomePage />
</provider>
);
}
}
connect()(App);
export default App;
**Child Component**
import React,{ Component } from "react";
class HomePage extends Component {
state = {};
render() {
console.log(this.props);
return (
<div className="container-fluid p-3">
</div>
);
}
}
connect()(HomePage);
export default HomePage;
和ul类添加高度。
li让您为ul li填充.line
要开始上课，请使用伪类之前的
为您圈出背景颜色时，请将颜色添加到.dottedline中，然后越过ul li.line,ul li.dottedLine {
height: 20px
}
这是经过调整的代码
padding: 0 0 10px 50px;ul li.circle:after